Audio not playing in Angular 7

Question

I'm doing a big Angular 7 project for myself and I want some background music in it.

So I use this:

<audio id="audio" *ngIf="ship.dock != true" autoplay="true" loop='true' style="position: absolute; z-index: -1;">
    <source src="src/assets/music/space.mp3" type="audio/mp3">
</audio>

ship.dock is set to false. The problem is when the page load, the song is not playing, but when I work on the project and I save my code, the page reload and the song is playing.

If I dock the ship and then undock the ship the song is now playing also.

with the inspector the element audio appear

Thanks in advance !

Answer 1

It's a browser security feature to not autoplay an audio unless there is some user interaction.

https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#new-behaviors

Autoplay with sound is allowed if:

• User has interacted with the domain (click, tap, etc.).
• On desktop, the user's Media Engagement Index threshold has been crossed, meaning the user has previously played video with sound.
• The user has added the site to their home screen on mobile or installed the PWA on desktop.