Angular / HTML5 will not play audio mpeg from local folder

Question

Does Angular or HTML5 somehow restrict mpeg files from being played from the local folder / localhost? It works if I use a link to an external CDN.

In HTML5, I have . . . .

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

and the player is greyed out like this:

I have also tried playing the file programmatically, but without success . . .

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

Any Suggestions? Thanks!

Answer 1

First store the file in the assets folder of angular, add the file location to the assets array of angular.json (if needed, might be during build!) Then you can reference the file like below!

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

Stackblitz Demo -> cd test -> npm i -> npm run start