HTML5 How do I debug this?

[Alec Armstrong]

Hi - I have recently tried to update an old game I made in GameMaker. I am very pleased that it compiles perfectly and works well in the Windows desktop version. However, there are issues with the html5 version and I am not sure how to go about attempting to fix these.

Original:

Strongman Challenge

Latest version:

Strongman Challenge

First - the music does not play on loading in the new version (when on the website). The music is activated by the following code:

if !audio_is_playing(snd_circusdilemma)
{
audio_play_sound(snd_circusdilemma, 5, true);
}

Next (and the bigger problem) is if you play the new version and press escape (which restarts the game via action_restart_game()) then the program is completely unresponsive to mouse events (i.e. the buttons) although it still responds to keyboard events. I note the new version in the desktop version does not have these issues and works really well. My question is, how would you go about trying to identify the issues?

 

[rIKmAN]

Check the console in the browser dev tools (F12 in Chrome for example)
It will probably be telling you that you can't autoplay sounds without the user interacting with the game first (pressing a "play" button etc).

 

[Nocturne]

You already have a topic for this issue: https://forum.yoyogames.com/index.php?threads/audio-is-playing.77740/#post-461042

Please do NOT post duplicate topics. As you have provided more information in this topic I'll leave it open and close the other one.

 

[Alec Armstrong]

rIKmAN - thank you for posting. So why does the game made with an earlier version of gamemaker allow the music to play, but not the latest version? Also, is there a way around this so the music is automatically played?

 

[rIKmAN]

rIKmAN - thank you for posting. So why does the game made with an earlier version of gamemaker allow the music to play, but not the latest version? Also, is there a way around this so the music is automatically played?

I believe it's now a browser standard to prevent autoplaying of sound and video and improve user experience, so not sure why it works with an older version of GMS2 using the same browsers. Test with a few different browsers and check the console to see what error is reported in each.

I remember dealing with it via mobile browsers, but others who use the HTML5 export more regularly may be able to chime in with more info on the exact details.

The simplest way to solve it is to have a start/play button or similar that the user must click to start the game and then start playing your sounds. Not sure if there are other more sneaky workarounds, but I wouldn't advise using them to autoplay anyway - there's a reason it was changed.

A quick Google found: Chrome Autoplay Policy Change in April 2018

 

[Alec Armstrong]

Concerning the music not playing - there is no error reported. However, what I can see in the browser developer console is that the below line only appears in certain conditions (the sound button has been pressed or the game as already been played!
<audio preload="none" autoplay="" loop="" src="html5game/snd_circusdilemma.ogg"></audio>
(I tried adding this line into the browser code, but the browser does not let it pass through!)

The easy solution might be to have an object in the game that when it detects the mouse going over or being moved launches the music?

 

[rIKmAN]

Concerning the music not playing - there is no error reported. However, what I can see in the browser developer console is that the below line only appears in certain conditions (the sound button has been pressed or the game as already been played!
<audio preload="none" autoplay="" loop="" src="html5game/snd_circusdilemma.ogg"></audio>
(I tried adding this line into the browser code, but the browser does not let it pass through!)

The easy solution might be to have an object in the game that when it detects the mouse going over or being moved launches the music?

I'm not sure tbh, I don't do much with the HTML5 export, however I don't think hovering is classed as an interaction from the user (it's also impossible on mobile).

If you read that link I posted you can see the circumstances where autoplay is allowed on Chrome, and I'm sure the other browsers will have their own articles detailing similar information - and I wouldn't advise trying to circumvent browser standards.

It's odd you don't get any message in the console, as I just quickly tried playing an audio file in the Create Event of an object and exporting to HTML5 (IDE: v2.2.5.481, Runtime: v2.2.5.378) running in the latest Chrome (v84.0.4147.105) and this is what was displayed:

Test.js?MQCYB=914062664:2976 The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page. https://goo.gl/7K7WLu

That link in the message loads to the WebAudio section of the page I already linked in my previous reply.

 

[chmod777]

It will probably be telling you that you can't autoplay sounds without the user interacting with the game first (pressing a "play" button etc).

Yeah, needs something like that. Could also be done in HTML, for instance for a click somewhere in the page:

In index.html, replace:
window.onload = GameMaker_Init;

with:

window.onload = clickBody;
function clickBody() {
    var f = function() {
        GameMaker_Init();
        document.body.removeEventListener("click", f, false);
    };
    document.body.addEventListener("click", f, false);
}

 

[Alec Armstrong]

Hi - thank you for posting again. I noticed that an error is posted if I look at the Console option (the default view is elements). It says:
StrongmanTest2ndAugust2020.js?IBBBC=749530896:3718 The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page. https://goo.gl/7K7WLu

I tried adding an object that launches the music if there is nothing happening with the mouse, but this does not work!

Meanwhile, my issue with the escape key. Presumably, this is a GameMaker issue and quite possibly a bug. My quick fix is to set the escape key to go to the starting room.

 

[Alec Armstrong]

chmod777 - thank you for your post it looks like a potential fix! Unfortunately, when I tried your code it did not work (the browser went blank.)

 

[Roldy]

When you debug the HTML (in Chrome for instance) and on your first click the console will display the following:

WebAudio Context unlocked.
WebAudio Context state updated to: running
WebAudio autoplay test passed.

After that is displayed you can play audio.

Do you receive that output in the console on first click? You must click for the browser to unlock the context.

A good way to do this is have your app start 'muted' and then the user can 'unmute' if they want to hear your music. This will insure a click happens before you try and play music.

 

[Alec Armstrong]

Hi- thank you to everyone for posting. I found that two user clicks were needed in order to be guaranteed that the music started playing (sometimes it managed it with just one, but only on a few occasions).
My solution was to write the message "Double click on the .... graphic to start the music" and then I chose to have the music automatically playing elsewhere unless the player had opted out!

This is a slightly disappointing solution (as the double click is more of an illusion and only one click is needed if there has been a click made on a "blank" part of the screen), but it works and is probably the easiest solution.