Javascript 异常HTML音频竞争条件

我正在尝试录制音频剪辑，并创建一个用于播放的对象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）domeException：元素没有受支持的源。

如果加载

audioURL

，有时您可以播放音频片段：

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

---

然后（

是异步的，

console.log（audioUrl）

不会播放文件。显示您将audioUrl添加到媒体元素的位置我知道它不会播放文件，但它会打印一个URL，我可以在另一个选项卡中加载该URL（我已经包含了它的屏幕截图）。我已经调试到了这一点。实际的错误是当我尝试时：

this.audio=new audio（audioUrl）；this.audio.play（）；

抱怨

domeException:元素没有支持的源。

然后（

是异步的，

console.log（audioUrl）

不会播放文件。显示您将audioUrl添加到媒体元素的位置我知道它不会播放文件，但它会打印一个URL，我可以在另一个选项卡中加载该URL（其中包括屏幕截图）。我已经调试到这一点。实际错误是在尝试时：

this.audio=new audio（audioUrl）；this.audio.play（）；

投诉

doException:元素没有支持的源。