[Fixed] How to ask user for permission to play sound in Chrome browser

Issue

var sound = new Howl({
            src: [this.config['Audio'].English],
            preload: true,
            sprite: this.AudioSpriteEn,
            autoplay: true,
            html5: true,
            muted: false,           
        });    
sound.play();

I want to autoplay sound onload in my Angular website but Chrome’s autoplay policy is preventing the sound from playing.

Solution

Normally the browser expects the user does the first interaction with your website to then trigger a sound. Are you trying to play after user clicks something or are you playing automatically after the website load?

Accordding to Mozilla: https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide

From the user’s perspective, a web page or app that spontaneously starts making noise without warning can be jarring, inconvenient, or off-putting. Because of that, browsers generally only allow autoplay to occur successfully under specific circumstances.

And this is what chrome says about: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

Muted autoplay is always allowed. 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. Top frames can delegate autoplay permission to their
iframes to allow autoplay with sound.

In fact you don’t need the user to click specifically in a big red button with the words "MAKE NOISE", instead, clicking on any other element in your website (list, divs, images, sliders…) count as "the user interaction", that brings you a other possibilities. I.E: If you show a big Cookies advertisement banner, you can start playing the audio after the user closes that banner.

BYPASS FIRST USER INTERACTION RULE:

Method 1:
Give your website PWA capabilities and requesting the user to install your PWA, after that you will be able to play sound without user first interaction. NOTE: this is according to chrome documentation, can break on other browsers.
https://web.dev/add-manifest/#:~:text=The%20web%20app%20manifest%20is,when%20the%20app%20is%20launched.

Method 2:

Listen whichever is the first user click inside your website body, and plays the sound. Try running the snippet and then clicking the resulting body

const ks = new Audio('https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3')
let userinteraction = 0
document.addEventListener('click',()=>{
 if(userinteraction) return;
 userinteraction++;
 ks.play()
})

<ul>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
   <li>Vestibulum auctor dapibus neque.</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<h1>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</h1>