optional mute on visibility hidden

Author: chrisweb

dist/index.js

@@ -27,6 +27,7 @@ export declare class PlayerCore {
     protected _stopOnReset: boolean;
     protected _postMuteVolume: number;
     protected _isMuted: boolean;
+    protected _visibilityAutoMute: boolean;
     readonly WHERE_IN_QUEUE_AT_END: string;
     readonly WHERE_IN_QUEUE_AT_START: string;
     readonly WHERE_IN_QUEUE_AFTER_CURRENT: string;
@@ -76,4 +77,9 @@ export declare class PlayerCore {
     getAudioGraph(): Promise<IAudioGraph>;
     setAudioContext(customAudioContext: AudioContext): void;
     getAudioContext(): Promise<AudioContext>;
+    setAutoCreateContextOnFirstTouch(autoCreate: boolean): void;
+    getAutoCreateContextOnFirstTouch(): boolean;
+    setVisibilityAutoMute(visibilityAutoMute: boolean): void;
+    getVisibilityAutoMute(): boolean;
+    protected _handleVisibilityChange(): void;
 }

dist/index.js.map

@@ -90,6 +90,9 @@ let secondSound = player.addSoundToQueue(secondSoundAttributes);
 
 console.log(secondSound);
 
+// turn un feature: if page becomes invisible auto mute, unmute when page becomes visible again
+player.setVisibilityAutoMute(true);
+
 // halt the audio hardware access temporarily to reduce CPU and battery usage
 /*player.getAudioContext().then((audioContext) => {
     audioContext.suspend();
@@ -104,4 +107,4 @@ console.log(secondSound);
 //player.play();
 
 // play next song
-//player.play(player.PLAY_SOUND_NEXT);
+//player.play(player.PLAY_SOUND_NEXT);

dist/index.umd.js

@@ -302,10 +302,8 @@ class PlayerAudio {
                 // https://developer.mozilla.org/en-US/docs/Web/API/AudioDestinationNode
                 this._audioGraph.gainNode.connect(audioContext.destination);
 
-                // update volume (gainValue)
-                const gainValue = this._volume / 100;
-
-                this._changeGainValue(gainValue);
+                // update volume
+                this.changeVolume(this._volume);
 
                 // resolve
                 resolve(this._audioGraph);
@@ -400,6 +398,11 @@ class PlayerAudio {
 
         this._volume = volume;
 
+        // update volume (gainValue)
+        const gainValue = this._volume / 100;
+
+        this._changeGainValue(gainValue);
+
     }
 
     protected _changeGainValue(gainValue: number): void {

dist/index.umd.js.map

@@ -46,6 +46,8 @@ export class PlayerCore {
     protected _postMuteVolume: number = null;
     // is muted?
     protected _isMuted: boolean = false;
+    // automatically mute if visibility changes to invisible
+    protected _visibilityAutoMute: boolean = false;
 
     // constants
     readonly WHERE_IN_QUEUE_AT_END: string = 'append';
@@ -878,4 +880,47 @@ export class PlayerCore {
 
     }
 
+    public setAutoCreateContextOnFirstTouch(autoCreate: boolean): void {
+        this._playerAudio.setAutoCreateContextOnFirstTouch(autoCreate);
+    }
+
+    public getAutoCreateContextOnFirstTouch(): boolean {
+        return this._playerAudio.getAutoCreateContextOnFirstTouch();
+    }
+
+    public setVisibilityAutoMute(visibilityAutoMute: boolean): void {
+
+        this._visibilityAutoMute = visibilityAutoMute;
+
+        if (visibilityAutoMute) {
+            document.addEventListener('visibilitychange', this._handleVisibilityChange.bind(this), false);
+        } else {
+            document.removeEventListener('visibilitychange', this._handleVisibilityChange.bind(this), false);
+        }
+
+    }
+
+    public getVisibilityAutoMute(): boolean {
+        return this._visibilityAutoMute;
+    }
+
+    protected _handleVisibilityChange() {
+
+        let hiddenKeyword: string;
+
+        if (typeof document.hidden !== 'undefined') { // Opera 12.10 and Firefox 18 and later support
+            hiddenKeyword = 'hidden';
+        } else if (typeof (document as any).msHidden !== 'undefined') {
+            hiddenKeyword = 'msHidden';
+        } else if (typeof (document as any).webkitHidden !== 'undefined') {
+            hiddenKeyword = 'webkitHidden';
+        }
+
+        if ((document as any)[hiddenKeyword]) {
+            this.mute();
+        } else {
+            this.unMute();
+        }
+    }
+
 }