javascript - 异常的 HTML 音频竞争条件

Question

我正在尝试录制音频剪辑并创建一个用于播放的对象 URL。我希望在页面加载后立即发生这种情况，但是似乎存在竞争条件。Blob 总是被创建并充满数据，但有时audioURL它是可播放的，有时不是。为什么会存在这种竞争条件？

const MicRecorder = require("mic-recorder-to-mp3");
this.recorder = new MicRecorder({
  bitRate: 128,
});
this.recorder.start();
// wait for some button press.

this.recorder
    .stop()
    .getMp3()
    .then(([buffer, blob]) => {
      this.buffer = buffer;
      this.blob = blob;
      console.log(blob.arrayBuffer()); // The blob always prints and is full of data.

      // Create Audio for playing
      const audioUrl = URL.createObjectURL(this.blob);
      console.log(audioUrl); // This audio Url is sometimes playable, sometimes not
      this.audio = new Audio(audioUrl);
...

// Some button is clicked.
this.audio.play();

Uncaught (in promise) DOMException: The element has no supported sources.

如果您audioURL有时加载，您可以播放音频剪辑：

有时你不能，而且似乎没有数据：

标签： javascripthtml5-audio