Panning feature breaks WebAudio on Safari (OSX and iOS)

[d4rkforce]

Version

• Phaser Version: v3.50.0

• Operating system: OSX, iOS

• Browser: Safari

Description

Use of WebAudio currently breaks Phaser when using Safari, because Safari does not implement createStereoPanner() yet, causing the script to stop executing during initialization.

Example Test Code

Based on phaser3-examples:

var config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    scene: {
        preload: preload,
        create: create
    }
};

var game = new Phaser.Game(config);

var first;

function preload ()
{
    this.load.audio('overture', [
        'assets/audio/Ludwig van Beethoven - The Creatures of Prometheus, Op. 43/Overture.ogg',
        'assets/audio/Ludwig van Beethoven - The Creatures of Prometheus, Op. 43/Overture.mp3'
    ]);
}

function create ()
{
    first = this.sound.add('overture', { loop: true }).setPan(1);
    enableInput.call(this);
}

function enableInput()
{
    this.input.once('pointerdown', function (pointer)
    {
        first.play();
    }, this);
}

Additional Information

I put together a rather hacky patch that checks if createStereoPanner exists as a function, making the code run on Safari without removing the panning functionality on other browsers, but a more permanent solution would probably be a good idea:

diff --git a/src/sound/webaudio/WebAudioSound.js b/src/sound/webaudio/WebAudioSound.js
index 506631cc0..e9c771157 100644
--- a/src/sound/webaudio/WebAudioSound.js
+++ b/src/sound/webaudio/WebAudioSound.js
@@ -99,7 +99,11 @@ var WebAudioSound = new Class({
          * @private
          * @since 3.50.0
          */
-        this.pannerNode = manager.context.createStereoPanner();
+        this.pannerNode = null;
+        if (typeof manager.context.createStereoPanner === 'function')
+        {
+            this.pannerNode = manager.context.createStereoPanner();
+        }
 
         /**
          * The time at which the sound should have started playback from the beginning.
@@ -175,9 +179,15 @@ var WebAudioSound = new Class({
 
         this.muteNode.connect(this.volumeNode);
 
-        this.volumeNode.connect(this.pannerNode);
-
-        this.pannerNode.connect(manager.destination);
+        if (this.pannerNode !== null)
+        {
+            this.volumeNode.connect(this.pannerNode);
+            this.pannerNode.connect(manager.destination);
+        }
+        else
+        {
+            this.volumeNode.connect(manager.destination);
+        }
 
         this.duration = this.audioBuffer.duration;
 
@@ -501,8 +511,13 @@ var WebAudioSound = new Class({
         this.muteNode = null;
         this.volumeNode.disconnect();
         this.volumeNode = null;
-        this.pannerNode.disconnect();
-        this.pannerNode = null;
+
+        if (this.pannerNode !== null)
+        {
+            this.pannerNode.disconnect();
+            this.pannerNode = null;
+        }
+
         this.rateUpdates.length = 0;
         this.rateUpdates = null;
     },
@@ -918,13 +933,24 @@ var WebAudioSound = new Class({
 
         get: function ()
         {
-            return this.pannerNode.pan.value;
+            if (this.pannerNode !== null)
+            {
+                return this.pannerNode.pan.value;
+            }
+            else
+            {
+                return this.currentConfig.pan;
+            }
         },
 
         set: function (value)
         {
             this.currentConfig.pan = value;
-            this.pannerNode.pan.setValueAtTime(value, this.manager.context.currentTime);
+
+            if (this.pannerNode !== null)
+            {
+                this.pannerNode.pan.setValueAtTime(value, this.manager.context.currentTime);
+            }
 
             this.emit(Events.PAN, this, value);
         }

[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.