Replaying a WebAudioSound right when it ends would sometimes not work (have workaround)

[Demeno]

Version

• Phaser Version: 3.60

• Operating system: Windows 10

• Browser: Chrome

Description

Calling play() on a WebAudioSound would sometimes not work if timed exactly to the end of the previous play().

It's not very easy to reproduce, I've only been able to reproduce it when invoked by a mouse click / mobile tap / keyboard, not sure if that's important. It does take about a minute or two of clicks to reproduce.

I've already figured out what is happening inside Phaser

When a WebAudioSound finishes playing (source.onended), it marks itself as _this.hasEnded = true.
In the next frame's update(), it checks if (this.hasEnded) and if so it stops the sound and changes resets this.hasEnded = false.

The problem is that it is possible to call play() while hasEnded is already true, before update() runs, thereby restarting the sound, but then when update() happens it immediately stops the newly played sound, because hasEnded is still true.

Workaround:

Now that we know the problem, it's easy to solve by checking if sound.hasEnded is true before calling sound.play(), and if it is true, changing it back to false.

Generic workaround fix for all play() calls:

(Add this after creating the game with new Phaser.Game(config))

const originalWebAudioPlay = Phaser.Sound.WebAudioSound.prototype.play;
Phaser.Sound.WebAudioSound.prototype.play = function (
	markerName: string | Phaser.Types.Sound.SoundConfig,
	config: Phaser.Types.Sound.SoundConfig
): boolean {
	const sound = this;
	if ((sound as Phaser.Sound.WebAudioSound).hasEnded) {
		console.warn('sound hasEnded issue (handled)', sound.key);
		(sound as any).hasEnded = false; // "as any" because hasEnded is supposed to be read-only
	}

	return originalWebAudioPlay.apply(this, [markerName, config]);
};

Example Test Code

To reproduce, click the image once to play the sound, and then try to click again right before the progress number reaches 1.0 and resets. (Try to click a little bit after 0.9)
Usually takes about a minute or two of attempts to reproduce.
The bug is that if you time it just right the sound wouldn't play even though you clicked.

class Example extends Phaser.Scene
{
    preload ()
    {
        this.load.audio('explosion', [ 'assets/audio/SoundEffects/explosion.mp3' ]);
        this.load.image('wizball', 'assets/sprites/wizball.png');
    }

    create ()
    {
        const music = this.sound.add('explosion', {volume:0.4});
        this.add.image(400, 300, 'wizball').setScale(4).setInteractive().addListener('pointerdown',() => { music.play() });

        this.progressText = this.add.text(50, 50, '1');
        this.events.addListener('update', () => {
            const progress = music.seek / music.duration;            
            this.progressText.setText(progress);
        });

        this.sound.pauseOnBlur = true;
    }
}

const config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    pixelArt: true,
    scene: Example
};

const game = new Phaser.Game(config);

Additional Information

[photonstorm]

Thank you for submitting this issue. We have fixed this and the fix has been pushed to the master branch. It will be part of the next release. If you get time to build and test it for yourself we would appreciate that.