Sounds not working in web build

[MadejaMaciej]

No description provided.

[MadejaMaciej]

It is bigger problem than I thought. Basically web browser automatically blocks any sound if user hasn't clicked anything. So for work around I basically set up starting screen for webbrowser that says to play a game click any button and then splash screen happens.

[mrfatguy]

Stimulating click like in jQuery's $('background').click() is not an option?

[MadejaMaciej]

Unfortunately not, it detects that this was not actual interaction from client. It has to be some kind of interaction, click, mouse move, etc. We cannot rely on mouse move so we have to listen for clicks.

[mrfatguy]

What about making an animation (.mp4 file) and playing it? Can you auto-start MP4, MKV etc. video with sound without any user interaction?

[MadejaMaciej]

We can start a muted video any time. We just cannot play sounds without user interaction, as it is seen as "annoying" for the user.

[MadejaMaciej]

But again, without any interaction from user, even when video end sound will just not work. It is only for web build tho.

[mrfatguy]

OK, I am working on some idea. Just give me some time.

What about second movie / sound / effect / animation / video? If user clicks and you successfully show our logo with sound and then you would like to play some other audio file (on the same screen), can you trigger it automatically (after first "user interaction" / click)? Or we must have user click / tap / press key) any time we want to trigger some mp3 playout?

[MadejaMaciej]

So basically it is limited only to first interaction. So after user clicks something once we can play any sound we like.

Therefore what I did is before splash screen I created (for now) empty screen with text click anything to start a game. It only shows in browsers, so electron app is not affected by that, as there we can play any sounds we like. The same mobile version.

[MadejaMaciej]

I can't think of any other workarounds for the moment - and for what I have found on internet it seems that this is "desired" workaround. We could listen for mousemove for example, but we cannot guarantee that user will move it at all, therefore I would prefer to use on browser this starting screen before splash.

It is as well most likely to not change in the future, as other workarounds might marked as not desired and blocked later.

[mrfatguy]

I totally understand this and eagerly agree with this blockade. As a web user / web game player I don't want anything to play by itself when it is opened in some tab, before I actually interact with it. So the below is not a way for looking for an workaround, but rather a kind of _lessons learnt" for future.

Ideas:

1. See, if you can listen for DOMContentLoaded event or use $(document).bind('ready', function() {}); and trigger playing sound from there (unless you have already checked it; then skip this point).

2. Check, if you can listen for main window's resize? Chances that you start game with exactly the same dimensions as user currently have its browser set are minimal. I have heard that onResize() event is triggered by Javascript / DOM any time new URL loads.

3. See, if you can listen for visibilitychange event and make use of it.

4. Check, if you can auto-play audio (or video) muted and then use Web Audio API (in one of the above events?) to increase volume to some level?

5. See, if this old trick with playing silence in an iframe is going to work for you.

BTW: Last page (5) has a bug (or an intentionally hidden content). When you open it, it seems empty. Open Dev Tools in your browser (Ctrl+Shift+C) click on "empty" page, locate <div id="ajax-loading-screen"> in page source and hit Del to delete this HTML element. Then you'll have full access to page content.

The trick does work (when you click on the example links and go to https://olafwempe.com/ the background music truly auto-starts), but again the entire page is hidden behind empty full-screen overlay. This is most likely this "silence"-iframe that the article talks about.

If this will work in our game and provided that you DO WANT to break browser limitations and auto-start logo tune then you maybe forced to hide/close this iframe (or <div id="ajax-loading-screen"> element) programmatically.

If you don't want to break the rules / limitations then consider this task as completed / closed. And we will re-use that additional screen (that you have prepared already, with "click to start") to display "early alpha game" info.

[MadejaMaciej]

Already tried 4 of the first steps, nothing of it does work. 5 step should work, but in that case I would prefer to use official solution so wait for user click, as iframe may break in future.

Will leave it as closed and done and we should be able to use this screen as info popup as well, I just need to modularize it, as for now it just display static text without any graphics.

I'll use for that tasj ticket that already existst.