javascript - 无法加载音频-DOMException:加载失败，因为找不到支持的源

Question

我正在尝试加载音频，但遇到了两个错误，但是一切都很好，并且来源是正确的。
错误:

GET http:// localhost:4200 / src / assets / sound / welcome_Rift.mp3 404(未找到)
-未捕获( promise )DOMException:由于找不到受支持的源而无法加载。

javascript:

this.sound = new Audio();
        this.sound.src = 'src/assets/sound/welcome_Rift.mp3';
        this.sound.load();
        this.sound.play();

文件路径:src / assets / sound / welcome_Rift.mp3
我不知道为什么我会犯这个错误，有人可以帮助我吗？

Answer 1

GET http://localhost:4200/src/assets/sound/welcome_Rift.mp3 404 (Not Found)

404错误意味着未找到您的媒体文件。那可能是很多事情。如果路径正确，则可能是不知道 src/assets/sound/welcome_Rift.mp3应该指向哪里的localhost服务器。最好检查 src/welcome_Rift.mp3中的文件是否确实有效，以查看问题所在。

DOMException: Failed to load because no supported source was found.

这是因为 HTMLMediaElement.play() 返回了 Promise。它说 Uncaught in promise的部分意味着promise无法处理错误，应该使用 catch()方法添加一些promise逻辑。此方法使您可以在发生错误时执行某些操作。

this.sound = new Audio();
this.sound.src = 'src/assets/sound/welcome_Rift.mp3';
this.sound.load();
this.sound.play()
  .then(() => {
    // Audio is playing.
  })
  .catch(error => {
    console.log(error);
  });

较旧的浏览器在执行 play()时可能不会返回Promise，因此在这种情况下，您应该检查它是否返回Promise。

this.sound = new Audio();
this.sound.src = 'src/assets/sound/welcome_Rift.mp3';
this.sound.load();
const promise = this.sound.play();
if (promise !== undefined) { // On older browsers play() does not return anything, so the value would be undefined.
  promise
    .then(() => {
      // Audio is playing.
    })
    .catch(error => {
      console.log(error);
    });
}