Can't get phaser to play nice with another web audio library

Phaser 3
1

Has anyone had any luck getting phaser 3 to work with another web audio library? I am trying to create a game where the sound effects are synthesized using the Tone.js library. I’m pretty sure I have everything set up correctly but for some reason I can’t get any audio out of the Tone synthesizer I have created. I haven’t had this problem with any of the projects I have made using Tone.js without Phaser so I am pretty sure it’s caused by some interaction between the two.

I have tried setting disableWebAudio to true and also setting noAudio to true in my config but this hasn’t helped. I think that phaser could still be creating an AudioContext which is conflicting with the one created by Tone.js. Does anyone know how to disable the WebAudio part of phaser completely or see something else that might be causing Tone.js not to work?

Here’s a link to the code on Repl.it if anyone would like to have a look

2

I think your repl.it is missing the sound folder but I created a basic project to test this and it worked okay for me.

I just used the basic Hello sound from Tone.js and the default phaser3-parcel-template setup. I also added some music just to see what would happen and it seemed to work.

Here’s the relevant code from the HelloWorldScene

import Phaser from 'phaser'
import * as Tone from 'tone'

export default class HelloWorldScene extends Phaser.Scene
{
    // constructor...

    preload()
    {
        this.load.image('sky', 'http://labs.phaser.io/assets/skies/space3.png')
        this.load.image('logo', 'http://labs.phaser.io/assets/sprites/phaser3-logo.png')
		this.load.image('red', 'http://labs.phaser.io/assets/particles/red.png')
		
        // extra music
		this.load.audio('music', 'music/menu.wav')
    }

    create()
    {
        // play the music
		const music = this.sound.add('music')
		music.play()

		this.add.image(400, 300, 'sky')
			.setInteractive()
			.on(Phaser.Input.Events.GAMEOBJECT_POINTER_UP, async () => {
					await Tone.start()

					// create a synth and connect it to the main output (your speakers)
					const synth = new Tone.Synth().toDestination();

					// play a middle 'C' for the duration of an 8th note
					synth.triggerAttackRelease("C4", "8n");
			})

        // other code...
    }
}
3 Likes
3

Thanks for having a look at my code, you’re right I forgot to add the sound folder to the repo. I have managed to get the code working, I was calling

synth.triggerAttackRelease("C4", "8n", Tone.now();

instead of

synth.triggerAttackRelease("C4", "8n");

Which was stopping the note from triggering. Thanks for your help!