HTML5 games: play() failed because the user didn't interact with the document first

Question

I'm creating an HTML5 game using MelonJS game engine. Before I load the game, I have a simple pre-login page with a Splash and background music. This page has no need to load the game engine or game scripts.

The game will most likely be played on Chrome, but with the latest Chrome 66 update, you cannot autoplay music until someone "interacts" with the page:

login.html:72 Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.

With code

<audio id="soundtrack" src="data/bgm/Music_Login_Splash_v1.ogg" type="audio/ogg"></audio>

and

$(document).ready(function() {
    $('#soundtrack').get(0).play();
});

Google states: 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 play video with sound.
• On mobile, the user has added the site to his or her home screen.

Mousemove no longer counts as "an event" or "interaction".

Wondering if there's a solid workaround for this as not autoplaying the login splash soundtrack will be odd and ruin the user gaming experience. Workarounds I've tried are to have an autoclick event happen, or autoreloading the page if it's their first time. Otherwise, I can try loading the game engine for the login page and playing thru canvas audio.

Answer 1

There is a good reason for this precaution: Users usually don't expect audio from websites. They get really angry when they load a website, and an audio advertisement blares at them at full volume. This is even worse if they opened multiple tabs and are not sure which one is responsible. That's why all browser vendors prevent websites from playing audio unless the user interacts with them. Yes, I understand that you want to use this feature for good and not evil, but if there was a workaround, that workaround could also be used by the advertisers. So be glad that such a workaround does not exist.

So the only real solution is to find some reason why the player would need to perform some form of interaction after the game HTML document is loaded. A good excuse is some kind of initial screen with a copyright message and other legalese which disappears after the user clicked on it. You can also use this splash screen as a preloader for the assets needed for your login screen. That makes sure the background music is actually loaded when a user with a low bandwidth connection sees it.

Answer 2

Please go through https://developers.google.com/web/updates/2017/06/play-request-was-interrupted if you need additional info.

To load the track

   var audio = new Audio('./soundtrack.format');

play it when you need like

   var playPromise = audio.play();