Fixing Web Audio first initialization sequence + removing Web Audio from Babylon.js core

src/Audio/babylon.soundtrack.js

@@ -4,28 +4,32 @@ var BABYLON;
         function SoundTrack(scene, options) {
             this.id = -1;
             this._isMainTrack = false;
+            this._isInitialized = false;
             this._scene = scene;
-            this._audioEngine = BABYLON.Engine.audioEngine;
             this.soundCollection = new Array();
-            if (this._audioEngine.canUseWebAudio) {
-                this._outputAudioNode = this._audioEngine.audioContext.createGain();
-                this._outputAudioNode.connect(this._audioEngine.masterGain);
-                if (options) {
-                    if (options.volume) {
-                        this._outputAudioNode.gain.value = options.volume;
-                    }
-                    if (options.mainTrack) {
-                        this._isMainTrack = options.mainTrack;
-                    }
-                }
-            }
+            this._options = options;
             if (!this._isMainTrack) {
                 this._scene.soundTracks.push(this);
                 this.id = this._scene.soundTracks.length - 1;
             }
         }
+        SoundTrack.prototype._initializeSoundTrackAudioGraph = function () {
+            if (BABYLON.Engine.audioEngine.canUseWebAudio) {
+                this._outputAudioNode = BABYLON.Engine.audioEngine.audioContext.createGain();
+                this._outputAudioNode.connect(BABYLON.Engine.audioEngine.masterGain);
+                if (this._options) {
+                    if (this._options.volume) {
+                        this._outputAudioNode.gain.value = this._options.volume;
+                    }
+                    if (this._options.mainTrack) {
+                        this._isMainTrack = this._options.mainTrack;
+                    }
+                }
+                this._isInitialized = true;
+            }
+        };
         SoundTrack.prototype.dispose = function () {
-            if (this._audioEngine.canUseWebAudio) {
+            if (BABYLON.Engine.audioEngine.canUseWebAudio) {
                 if (this._connectedAnalyser) {
                     this._connectedAnalyser.stopDebugCanvas();
                 }
@@ -39,6 +43,9 @@ var BABYLON;
             }
         };
         SoundTrack.prototype.AddSound = function (sound) {
+            if (!this._isInitialized) {
+                this._initializeSoundTrackAudioGraph();
+            }
             if (BABYLON.Engine.audioEngine.canUseWebAudio) {
                 sound.connectToSoundTrackAudioNode(this._outputAudioNode);
             }
@@ -60,7 +67,7 @@ var BABYLON;
             }
         };
         SoundTrack.prototype.setVolume = function (newVolume) {
-            if (this._audioEngine.canUseWebAudio) {
+            if (BABYLON.Engine.audioEngine.canUseWebAudio) {
                 this._outputAudioNode.gain.value = newVolume;
             }
         };
@@ -83,13 +90,12 @@ var BABYLON;
                 this._connectedAnalyser.stopDebugCanvas();
             }
             this._connectedAnalyser = analyser;
-            if (this._audioEngine.canUseWebAudio) {
+            if (BABYLON.Engine.audioEngine.canUseWebAudio) {
                 this._outputAudioNode.disconnect();
-                this._connectedAnalyser.connectAudioNodes(this._outputAudioNode, this._audioEngine.masterGain);
+                this._connectedAnalyser.connectAudioNodes(this._outputAudioNode, BABYLON.Engine.audioEngine.masterGain);
             }
         };
         return SoundTrack;
     })();
     BABYLON.SoundTrack = SoundTrack;
 })(BABYLON || (BABYLON = {}));
-//# sourceMappingURL=babylon.soundtrack.js.map

src/Audio/babylon.soundtrack.ts

@@ -1,6 +1,5 @@
 module BABYLON {
     export class SoundTrack {
-        private _audioEngine: AudioEngine;
         private _outputAudioNode: GainNode;
         private _inputAudioNode: AudioNode;
         private _trackConvolver: ConvolverNode;
@@ -9,28 +8,36 @@
         public soundCollection: Array<Sound>;
         private _isMainTrack: boolean = false;
         private _connectedAnalyser: Analyser;
+        private _options;
+        private _isInitialized = false;
 
         constructor(scene: Scene, options?: any) {
             this._scene = scene;
-            this._audioEngine = Engine.audioEngine;
             this.soundCollection = new Array();
-            if (this._audioEngine.canUseWebAudio) {
-                this._outputAudioNode = this._audioEngine.audioContext.createGain();
-                this._outputAudioNode.connect(this._audioEngine.masterGain);
+            this._options = options;
 
-                if (options) {
-                    if (options.volume) { this._outputAudioNode.gain.value = options.volume; }
-                    if (options.mainTrack) { this._isMainTrack = options.mainTrack; }
-                }
-            }
             if (!this._isMainTrack) {
                 this._scene.soundTracks.push(this);
                 this.id = this._scene.soundTracks.length - 1;
             }
         }
 
+        private _initializeSoundTrackAudioGraph() {
+            if (Engine.audioEngine.canUseWebAudio) {
+                this._outputAudioNode = Engine.audioEngine.audioContext.createGain();
+                this._outputAudioNode.connect(Engine.audioEngine.masterGain);
+
+                if (this._options) {
+                    if (this._options.volume) { this._outputAudioNode.gain.value = this._options.volume; }
+                    if (this._options.mainTrack) { this._isMainTrack = this._options.mainTrack; }
+                }
+
+                this._isInitialized = true;
+            }
+        }
+
         public dispose() {
-            if (this._audioEngine.canUseWebAudio) {
+            if (Engine.audioEngine.canUseWebAudio) {
                 if (this._connectedAnalyser) {
                     this._connectedAnalyser.stopDebugCanvas();
                 }
@@ -45,6 +52,9 @@
         }
 
         public AddSound(sound: Sound) {
+            if (!this._isInitialized) {
+                this._initializeSoundTrackAudioGraph();
+            }
             if (Engine.audioEngine.canUseWebAudio) {
                 sound.connectToSoundTrackAudioNode(this._outputAudioNode);
             }
@@ -69,7 +79,7 @@
         }
 
         public setVolume(newVolume: number) {
-            if (this._audioEngine.canUseWebAudio) {
+            if (Engine.audioEngine.canUseWebAudio) {
                 this._outputAudioNode.gain.value = newVolume;
             }
         }
@@ -95,9 +105,9 @@
                 this._connectedAnalyser.stopDebugCanvas();
             }
             this._connectedAnalyser = analyser;
-            if (this._audioEngine.canUseWebAudio) {
+            if (Engine.audioEngine.canUseWebAudio) {
                 this._outputAudioNode.disconnect();
-                this._connectedAnalyser.connectAudioNodes(this._outputAudioNode, this._audioEngine.masterGain);
+                this._connectedAnalyser.connectAudioNodes(this._outputAudioNode, Engine.audioEngine.masterGain);
             }
         }
     }

src/Debug/babylon.debugLayer.js

@@ -531,7 +531,7 @@ var BABYLON;
                 this._generateCheckBox(this._optionsSubsetDiv, "Skeletons", this._scene.skeletonsEnabled, function (element) { _this._scene.skeletonsEnabled = element.checked; });
                 this._generateCheckBox(this._optionsSubsetDiv, "Sprites", this._scene.spritesEnabled, function (element) { _this._scene.spritesEnabled = element.checked; });
                 this._generateCheckBox(this._optionsSubsetDiv, "Textures", this._scene.texturesEnabled, function (element) { _this._scene.texturesEnabled = element.checked; });
-                if (BABYLON.Engine.audioEngine.canUseWebAudio) {
+                if (BABYLON.AudioEngine && BABYLON.Engine.audioEngine.canUseWebAudio) {
                     this._optionsSubsetDiv.appendChild(document.createElement("br"));
                     this._generateTexBox(this._optionsSubsetDiv, "<b>Audio:</b>", this.accentColor);
                     this._generateRadio(this._optionsSubsetDiv, "Headphones", "panningModel", this._scene.headphone, function (element) {
@@ -606,4 +606,3 @@ var BABYLON;
     })();
     BABYLON.DebugLayer = DebugLayer;
 })(BABYLON || (BABYLON = {}));
-//# sourceMappingURL=babylon.debugLayer.js.map

src/Debug/babylon.debugLayer.ts

@@ -676,7 +676,7 @@
                 this._generateCheckBox(this._optionsSubsetDiv, "Skeletons", this._scene.skeletonsEnabled, (element) => { this._scene.skeletonsEnabled = element.checked });
                 this._generateCheckBox(this._optionsSubsetDiv, "Sprites", this._scene.spritesEnabled, (element) => { this._scene.spritesEnabled = element.checked });
                 this._generateCheckBox(this._optionsSubsetDiv, "Textures", this._scene.texturesEnabled, (element) => { this._scene.texturesEnabled = element.checked });
-                if (Engine.audioEngine.canUseWebAudio) {
+                if (AudioEngine && Engine.audioEngine.canUseWebAudio) {
                     this._optionsSubsetDiv.appendChild(document.createElement("br"));
                     this._generateTexBox(this._optionsSubsetDiv, "<b>Audio:</b>", this.accentColor);
                     this._generateRadio(this._optionsSubsetDiv, "Headphones", "panningModel", this._scene.headphone, (element) => {

src/babylon.engine.js

@@ -484,7 +484,7 @@ var BABYLON;
             document.addEventListener("mspointerlockchange", this._onPointerLockChange, false);
             document.addEventListener("mozpointerlockchange", this._onPointerLockChange, false);
             document.addEventListener("webkitpointerlockchange", this._onPointerLockChange, false);
-            if (!Engine.audioEngine) {
+            if (BABYLON.AudioEngine && !Engine.audioEngine) {
                 Engine.audioEngine = new BABYLON.AudioEngine();
             }
             //default loading screen
@@ -2031,4 +2031,3 @@ var BABYLON;
     })();
     BABYLON.Engine = Engine;
 })(BABYLON || (BABYLON = {}));
-//# sourceMappingURL=babylon.engine.js.map

src/babylon.engine.ts

@@ -687,7 +687,7 @@
             document.addEventListener("mozpointerlockchange", this._onPointerLockChange, false);
             document.addEventListener("webkitpointerlockchange", this._onPointerLockChange, false);
 
-            if (!Engine.audioEngine) {
+            if (AudioEngine && !Engine.audioEngine) {
                 Engine.audioEngine = new AudioEngine();
             }
 			

src/babylon.scene.js

@@ -146,7 +146,9 @@ var BABYLON;
             }
             this.attachControl();
             this._debugLayer = new BABYLON.DebugLayer(this);
-            this.mainSoundTrack = new BABYLON.SoundTrack(this, { mainTrack: true });
+            if (BABYLON.SoundTrack) {
+                this.mainSoundTrack = new BABYLON.SoundTrack(this, { mainTrack: true });
+            }
             //simplification queue
             if (BABYLON.SimplificationQueue) {
                 this.simplificationQueue = new BABYLON.SimplificationQueue();
@@ -983,15 +985,17 @@ var BABYLON;
         };
         Scene.prototype.getSoundByName = function (name) {
             var index;
-            for (index = 0; index < this.mainSoundTrack.soundCollection.length; index++) {
-                if (this.mainSoundTrack.soundCollection[index].name === name) {
-                    return this.mainSoundTrack.soundCollection[index];
+            if (BABYLON.AudioEngine) {
+                for (index = 0; index < this.mainSoundTrack.soundCollection.length; index++) {
+                    if (this.mainSoundTrack.soundCollection[index].name === name) {
+                        return this.mainSoundTrack.soundCollection[index];
+                    }
                 }
-            }
-            for (var sdIndex = 0; sdIndex < this.soundTracks.length; sdIndex++) {
-                for (index = 0; index < this.soundTracks[sdIndex].soundCollection.length; index++) {
-                    if (this.soundTracks[sdIndex].soundCollection[index].name === name) {
-                        return this.soundTracks[sdIndex].soundCollection[index];
+                for (var sdIndex = 0; sdIndex < this.soundTracks.length; sdIndex++) {
+                    for (index = 0; index < this.soundTracks[sdIndex].soundCollection.length; index++) {
+                        if (this.soundTracks[sdIndex].soundCollection[index].name === name) {
+                            return this.soundTracks[sdIndex].soundCollection[index];
+                        }
                     }
                 }
             }
@@ -1425,7 +1429,9 @@ var BABYLON;
             // Intersection checks
             this._checkIntersections();
             // Update the audio listener attached to the camera
-            this._updateAudioParameters();
+            if (BABYLON.AudioEngine) {
+                this._updateAudioParameters();
+            }
             // After render
             if (this.afterRender) {
                 this.afterRender();
@@ -1446,7 +1452,7 @@ var BABYLON;
             this._lastFrameDuration = BABYLON.Tools.Now - startDate;
         };
         Scene.prototype._updateAudioParameters = function () {
-            if (!this.audioEnabled || (this.mainSoundTrack.soundCollection.length === 0 && this.soundTracks.length === 0)) {
+            if (!this.audioEnabled || (this.mainSoundTrack.soundCollection.length === 0 && this.soundTracks.length === 1)) {
                 return;
             }
             var listeningCamera;
@@ -1487,11 +1493,13 @@ var BABYLON;
             },
             set: function (value) {
                 this._audioEnabled = value;
-                if (this._audioEnabled) {
-                    this._enableAudio();
-                }
-                else {
-                    this._disableAudio();
+                if (BABYLON.AudioEngine) {
+                    if (this._audioEnabled) {
+                        this._enableAudio();
+                    }
+                    else {
+                        this._disableAudio();
+                    }
                 }
             },
             enumerable: true,
@@ -1529,11 +1537,13 @@ var BABYLON;
             },
             set: function (value) {
                 this._headphone = value;
-                if (this._headphone) {
-                    this._switchAudioModeForHeadphones();
-                }
-                else {
-                    this._switchAudioModeForNormalSpeakers();
+                if (BABYLON.AudioEngine) {
+                    if (this._headphone) {
+                        this._switchAudioModeForHeadphones();
+                    }
+                    else {
+                        this._switchAudioModeForNormalSpeakers();
+                    }
                 }
             },
             enumerable: true,
@@ -1583,7 +1593,9 @@ var BABYLON;
             this._onAfterRenderCallbacks = [];
             this.detachControl();
             // Release sounds & sounds tracks
-            this.disposeSounds();
+            if (BABYLON.AudioEngine) {
+                this.disposeSounds();
+            }
             // Detach cameras
             var canvas = this._engine.getRenderingCanvas();
             var index;
@@ -1907,4 +1919,3 @@ var BABYLON;
     })();
     BABYLON.Scene = Scene;
 })(BABYLON || (BABYLON = {}));
-//# sourceMappingURL=babylon.scene.js.map

src/babylon.scene.ts

@@ -301,7 +301,9 @@
 
             this._debugLayer = new DebugLayer(this);
 
-            this.mainSoundTrack = new SoundTrack(this, { mainTrack: true });
+            if (SoundTrack) {
+                this.mainSoundTrack = new SoundTrack(this, { mainTrack: true });
+            }
 
             //simplification queue
             if (SimplificationQueue) {
@@ -1264,16 +1266,18 @@
 
         public getSoundByName(name: string): Sound {
             var index: number;
-            for (index = 0; index < this.mainSoundTrack.soundCollection.length; index++) {
-                if (this.mainSoundTrack.soundCollection[index].name === name) {
-                    return this.mainSoundTrack.soundCollection[index];
+            if (AudioEngine) {
+                for (index = 0; index < this.mainSoundTrack.soundCollection.length; index++) {
+                    if (this.mainSoundTrack.soundCollection[index].name === name) {
+                        return this.mainSoundTrack.soundCollection[index];
+                    }
                 }
-            }
 
-            for (var sdIndex = 0; sdIndex < this.soundTracks.length; sdIndex++) {
-                for (index = 0; index < this.soundTracks[sdIndex].soundCollection.length; index++) {
-                    if (this.soundTracks[sdIndex].soundCollection[index].name === name) {
-                        return this.soundTracks[sdIndex].soundCollection[index];
+                for (var sdIndex = 0; sdIndex < this.soundTracks.length; sdIndex++) {
+                    for (index = 0; index < this.soundTracks[sdIndex].soundCollection.length; index++) {
+                        if (this.soundTracks[sdIndex].soundCollection[index].name === name) {
+                            return this.soundTracks[sdIndex].soundCollection[index];
+                        }
                     }
                 }
             }
@@ -1806,7 +1810,9 @@
             this._checkIntersections();
 
             // Update the audio listener attached to the camera
-            this._updateAudioParameters();
+            if (AudioEngine) {
+                this._updateAudioParameters();
+            }
 
             // After render
             if (this.afterRender) {
@@ -1834,7 +1840,7 @@
         }
 
         private _updateAudioParameters() {
-            if (!this.audioEnabled || (this.mainSoundTrack.soundCollection.length === 0 && this.soundTracks.length === 0)) {
+            if (!this.audioEnabled || (this.mainSoundTrack.soundCollection.length === 0 && this.soundTracks.length === 1)) {
                 return;
             }
 
@@ -1878,11 +1884,13 @@
 
         public set audioEnabled(value: boolean) {
             this._audioEnabled = value;
-            if (this._audioEnabled) {
-                this._enableAudio();
-            }
-            else {
-                this._disableAudio();
+            if (AudioEngine) {
+                if (this._audioEnabled) {
+                    this._enableAudio();
+                }
+                else {
+                    this._disableAudio();
+                }
             }
         }
 
@@ -1920,11 +1928,13 @@
 
         public set headphone(value: boolean) {
             this._headphone = value;
-            if (this._headphone) {
-                this._switchAudioModeForHeadphones();
-            }
-            else {
-                this._switchAudioModeForNormalSpeakers();
+            if (AudioEngine) {
+                if (this._headphone) {
+                    this._switchAudioModeForHeadphones();
+                }
+                else {
+                    this._switchAudioModeForNormalSpeakers();
+                }
             }
         }
 
@@ -1989,7 +1999,9 @@
             this.detachControl();
 
             // Release sounds & sounds tracks
-            this.disposeSounds();
+            if (AudioEngine) {
+                this.disposeSounds();
+            }
 
             // Detach cameras
             var canvas = this._engine.getRenderingCanvas();