Phaser 3 + Tonejs audioContext

Phaser 3
1

Hi,

I’m trying to get the audioContext to start on iOS for the Tone.js library. I want to do this directly from Phaser 3 once you click a play button. Is this possible?

Here is a working html example to start the Tone.js audioContext:

<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>StartAudioContext</title>
	<script type="text/javascript" src="StartAudioContext.js"></script>
	<script type="text/javascript" src="Tone.js"></script>
</head>
<body>

	<style type="text/css">
	.starterButton {
		width: 300px;
		height: 80px;
		line-height: 80px;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		background-color: rgb(204, 204, 204);
		margin-top: 100px;
		cursor: pointer;
		font-family: sans-serif;
		position: relative;
		font-family: monospace;
	}

	.starterButton:active {
		background-color: #FFB729;
		color: white;
	}

	span {
		font-size: 16px;
		margin-right: 5px;
		font-family: monospace;
	}

	</style>

	<span>STATUS:</span><span id="isStarted">NOT Started</span>

	<div class="starterButton">Tap to start the AudioContext</div>

	<script type="text/javascript">

	//create an audio context
	window.AudioContext = window.AudioContext || window.webkitAudioContext
	var audioContext = new AudioContext()

	//set the context
	StartAudioContext(Tone.context, '.starterButton').then(function(){
	//create a synth and connect it to the master output (your speakers)
	document.querySelector("#isStarted").textContent = "Started"
		var synth = new Tone.Synth().toMaster();

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

	</script>
</body>
</html>

and here is my attempt to apply this in a Phaser scene:

class introGame extends Phaser.Scene{
    constructor(){
        super("IntroGame");
    }
    preload(){
		this.load.image("bg", "bg3.jpg");
        this.load.image("play", "play.png");

   
		this.load.image("logo", "logo.png");
		
		this.input.addPointer();
    }
    create(){
		


		
        this.bg = this.add.sprite(game.config.width / 2, game.config.height / 2, "bg");
        this.bg.displayWidth = gameOptions.bigCircleRadius * 3.5;
        this.bg.displayHeight = gameOptions.bigCircleRadius * 3.5;
		this.bg.alpha = 0.7;
      
        this.playBut = this.add.sprite(game.config.width / 2, game.config.height / 2, "play").setInteractive();
        this.playBut.displayWidth = gameOptions.bigCircleRadius * 2;
        this.playBut.displayHeight = gameOptions.bigCircleRadius * 2;
		
		// adding logo
        this.logo = this.add.sprite(game.config.width / 2, 75, "logo");

		
		
		//create an audio context
		window.AudioContext = window.AudioContext || window.webkitAudioContext
		var audioContext = new AudioContext()

		this.playBut.on('pointerdown', function (event) {
			
			StartAudioContext(Tone.context, 'playBut').then(function(){
			//started
			console.debug("Button Test");
			var synth = new Tone.Synth().toMaster();

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

Any help greatly appreciated.

Cheers