Chrome only plays audio once there's mouse click

Phaser 3
1

I have the following event listener in my scene’s create method:

    this.game.events.on('ADD_BODIES', (items) => {
      this.createBodies(items);
      this.sound.play('bubble-surfacing');
    }, this);

In Firefox this works perfectly fine and the sound is played, but on Chrome it only plays once I click the screen (anywhere). It seems like the sound.play method hangs in there waiting for user interaction, and only once that interaction happens does it play.

Any workaround?

2

:wave:

Try to get a mouse click before then.

3

Hey @samme thanks for replying.

I’ve checked and this seems to be a restriction with Chrome - sounds are only triggerable upon user gestures; even when the user has already clicked once on the window, if they then click on another window, the sound won’t play until he clicks again.

I guess doing what I’m trying to do would only be feasible by asking the user permission for notifications.

4

You can do something like

if (this.sound.locked) {
  this.loadText.setText('Click to Start');

  this.input.once('pointerdown', () => {
    this.scene.start('MainMenu');
  });
}
1 Like
5

You could also check for an event, where as soon as the user hovers over the canvas, to enable sound

1 Like
6

Hey @esse_senhor , just checked a game I made, at Breakout Breakdown, and it seems that I added
audio: {
disableWebAudio: true
}

in the config. I’m not sure why (I did this a year ago, to be fair), but it doesn’t give me that warning in console about not allowing auto-play to happen. You could try forking my repo off my Github if you like and adding background sound as soon as the level loads to see if it works