Angular / HTML5 不会播放本地文件夹中的音频 mpeg

Question

Angular 或 HTML5 是否会以某种方式限制 mpeg 文件从本地文件夹/localhost 播放？如果我使用外部 CDN 的链接，它就可以工作。

在 HTML5 中，我有 . 。 。 .

  <audio controls  autoplay>
    <source src="src/app/sounds/alert.mp3" type="audio/mpeg" >
  </audio>

播放器像这样变灰：

我也尝试过以编程方式播放该文件，但没有成功。 。 .

var audio = new Audio("src/app/sounds/alert.mp3");
audio.load()
audio.play();

有什么建议吗？谢谢！

Answer 1

首先将文件存储在 Angular 的

assets

文件夹中，将文件位置添加到

angular.json

的 asset 数组中（如果需要，可能是在构建过程中！）然后您可以像下面一样引用该文件！

<audio controls autoplay>
  <source src="/assets/asdf.mp3" type="audio/mpeg" />
</audio>

Stackblitz Demo

->

cd test

->

npm i

->

npm run start