5
\$\begingroup\$

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.

\$\endgroup\$
2
  • \$\begingroup\$ Many users report that having music autoplay is what ruins their browsing experience. (That's why browsers have started cracking down on this) Is it really such a high bar to ask for affirmative consent to play sound when a new player visits your game's site for the first time? Bear in mind they could have been directed there from a link that gave them no indication that sound could start playing automatically. \$\endgroup\$
    – DMGregory
    Sep 2, 2018 at 18:45
  • \$\begingroup\$ @DMGregory Should I just have a sound button that they can toggle? Also the URL is fairly obvious that it's a game... "www.mygame.com/play". Just thought it'd be weird to get to the splash, and THEN have to click "yes" to play. Any other game console that you play, you start the game and the menu music is just playing \$\endgroup\$
    – user3871
    Sep 2, 2018 at 18:50

2 Answers 2

11
\$\begingroup\$

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.

\$\endgroup\$
1
  • 2
    \$\begingroup\$ A very simple solution is to have a "launch game" button - there's your interaction. Legalese is boring AF and copyright messages a turn off. Make it something fun. \$\endgroup\$
    – Tim Holt
    Nov 26, 2018 at 2:54
1
\$\begingroup\$

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();
\$\endgroup\$
2
  • \$\begingroup\$ Welcome to GDSE. While it's okay to use links in your answer, the system encourages answers that are self contained. Answers that rely too heavily on links (I.E.become significantly less useful if the link rots) tend to attracts down votes. Please edit your answer to summarize the information in your link. \$\endgroup\$
    – Pikalek
    Nov 20, 2018 at 15:10
  • \$\begingroup\$ it's not working... User has to interract or smth \$\endgroup\$
    – Andrew Bro
    Dec 20, 2021 at 13:40

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .