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.