Attempt to switch bubble sound playing into Phaser

In iOS, we cannot trigger a playing sound if it does not start from a user gesture.
This is a huge bummer for a notification sound!

This is an attempt to switch sound playing to Phaser, which is using under the hood the WebAudio API.
This might solve the issue.

front/dist/index.tmpl.html

@@ -91,12 +91,6 @@
 
         <div id="activeScreenSharing" class="active-screen-sharing active">
         </div>
-        <audio id="audio-webrtc-in">
-            <source src="/resources/objects/webrtc-in.mp3" type="audio/mp3">
-        </audio>
-        <audio id="audio-webrtc-out">
-            <source src="/resources/objects/webrtc-out.mp3" type="audio/mp3">
-        </audio>
         <audio id="report-message">
             <source src="/resources/objects/report-message.mp3" type="audio/mp3">
         </audio>

front/src/Phaser/Game/GameScene.ts

@@ -160,6 +160,7 @@ export class GameScene extends DirtyScene implements CenterListener {
     private createPromise: Promise<void>;
     private createPromiseResolve!: (value?: void | PromiseLike<void>) => void;
     private iframeSubscriptionList! : Array<Subscription>;
+    private peerStoreUnsubscribe!: () => void;
     MapUrlFile: string;
     RoomId: string;
     instance: string;
@@ -228,6 +229,11 @@ export class GameScene extends DirtyScene implements CenterListener {
             this.load.image(joystickBaseKey, joystickBaseImg);
             this.load.image(joystickThumbKey, joystickThumbImg);
         }
+        this.load.audio('audio-webrtc-in', '/resources/objects/webrtc-in.mp3');
+        this.load.audio('audio-webrtc-out', '/resources/objects/webrtc-out.mp3');
+        //this.load.audio('audio-report-message', '/resources/objects/report-message.mp3');
+        this.sound.pauseOnBlur = false;
+
         this.load.on(FILE_LOAD_ERROR, (file: {src: string}) => {
             // If we happen to be in HTTP and we are trying to load a URL in HTTPS only... (this happens only in dev environments)
             if (window.location.protocol === 'http:' && file.src === this.MapUrlFile && file.src.startsWith('http:') && this.originalMapUrl === undefined) {
@@ -519,6 +525,21 @@ export class GameScene extends DirtyScene implements CenterListener {
         }
 
         this.emoteManager = new EmoteManager(this);
+
+        let oldPeerNumber = 0;
+        this.peerStoreUnsubscribe = peerStore.subscribe((peers) => {
+            const newPeerNumber = peers.size;
+            if (newPeerNumber > oldPeerNumber) {
+                this.sound.play('audio-webrtc-in', {
+                    volume: 0.2
+                });
+            } else if (newPeerNumber < oldPeerNumber) {
+                this.sound.play('audio-webrtc-out', {
+                    volume: 0.2
+                });
+            }
+            oldPeerNumber = newPeerNumber;
+        });
     }
 
     /**
@@ -960,6 +981,7 @@ ${escapedMessage}
         this.userInputManager.destroy();
         this.pinchManager?.destroy();
         this.emoteManager.destroy();
+        this.peerStoreUnsubscribe();
 
         mediaManager.hideGameOverlay();
 

front/src/WebRtc/MediaManager.ts

@@ -23,10 +23,8 @@ export type HelpCameraSettingsCallBack = () => void;
 
 export class MediaManager {
     private remoteVideo: Map<string, HTMLVideoElement> = new Map<string, HTMLVideoElement>();
-    webrtcInAudio: HTMLAudioElement;
     //FIX ME SOUNDMETER: check stalability of sound meter calculation
     //mySoundMeterElement: HTMLDivElement;
-    private webrtcOutAudio: HTMLAudioElement;
     startScreenSharingCallBacks : Set<StartScreenSharingCallback> = new Set<StartScreenSharingCallback>();
     stopScreenSharingCallBacks : Set<StopScreenSharingCallback> = new Set<StopScreenSharingCallback>();
     showReportModalCallBacks : Set<ShowReportCallBack> = new Set<ShowReportCallBack>();
@@ -44,11 +42,6 @@ export class MediaManager {
 
     constructor() {
 
-        this.webrtcInAudio = HtmlUtils.getElementByIdOrFail<HTMLAudioElement>('audio-webrtc-in');
-        this.webrtcOutAudio = HtmlUtils.getElementByIdOrFail<HTMLAudioElement>('audio-webrtc-out');
-        this.webrtcInAudio.volume = 0.2;
-        this.webrtcOutAudio.volume = 0.2;
-
         this.pingCameraStatus();
 
         //FIX ME SOUNDMETER: check stability of sound meter calculation
@@ -129,11 +122,6 @@ export class MediaManager {
     }
 
     addActiveVideo(user: UserSimplePeerInterface, userName: string = ""){
-        try {
-            this.webrtcInAudio.play();
-        } catch(e) {
-            console.error(e);
-        }
         const userId = ''+user.userId
 
         userName = userName.toUpperCase();
@@ -281,14 +269,6 @@ export class MediaManager {
         this.removeActiveVideo(this.getScreenSharingId(userId))
     }
 
-    playWebrtcOutSound(): void {
-        try {
-            this.webrtcOutAudio.play();
-        } catch(e) {
-            console.error(e);
-        }
-    }
-
     isConnecting(userId: string): void {
         const connectingSpinnerDiv = this.getSpinner(userId);
         if (connectingSpinnerDiv === null) {

front/src/WebRtc/SimplePeer.ts

@@ -246,7 +246,6 @@ export class SimplePeer {
      * This is triggered twice. Once by the server, and once by a remote client disconnecting
      */
     private closeConnection(userId : number) {
-        mediaManager.playWebrtcOutSound();
         try {
             const peer = this.PeerConnectionArray.get(userId);
             if (peer === undefined) {