Starting audio

Phaser 3
1

I have a simple game I’ve put together, initially based on “Making your first Phaser 3 game”: https://apbiologygame.netlify.com/ (I’m a teacher, this may get used as a recruitment piece for my AP class). When it initially opens, the audio does not start playing on Chrome or Edge (it seems to work on Firefox). However, it does play after a return to the intro scene (after playing the game or going to the instructions/credits scenes). It behaves as expected once it starts.

Here’s the code setting up the audio in the initial scene:

audio

and the code for the config:

audio2

Anyone know what I’m missing?

2

I think it has to do with the document not being focused. I tried solving the focus problem, but window.focus doesn’t seem to do anything in Chrome.

https://www.w3schools.com/jsref/met_win_focus.asp

I don’t see any difference in Chrome between the focus and blur ‘try it yourself’.

I noticed that while https://apbiologygame.netlify.com/ is still loading if you click the canvas before it appears the music plays normally.

Perhaps include a intro scene just to load all assets, and request a click to start. This will focus the page, begin the next scene where the music is started, and I expect play normally.

1 Like
3

Could this have something to do with Chrome’s audio autoplay policies? Recent versions of Chrome require the user to interact with the page in some way before they allow it to play audio. These new policies were introduced quite recently (maybe even in the latest version), so I haven’t had the chance to experiment with them and see how they behave, but your explanation makes it sound likely it’s related to that.

1 Like
4

Adding a click to start scene took care of it. Thanks!

5

I believe it’s a Chrome issue. You’ll want have to click first before sound will play. Not an issue on Safari or Firefox I believe.

6

I have faced the same problem, definitely Chrome makes issue. Here is a simple solution from Phaser 3 examples:
Example https://phaser.io/examples/v3/view/input/multitouch/multi-touch-test

if (this.sound.locked)
    {
        var text = this.add.text(10, 10, 'Tap to unlock audio', { font: '16px Courier', fill: '#00ff00' });

        this.sound.once('unlocked', function ()
        {
            text.destroy();
            this.createPiano();
        }, this);
    }
    else
    {
        this.createPiano();
    }