fix: persist audio elements in DOM and forward mic change events [WPB-23195] (#20310)

* fix: persist audio elements in DOM and forward mic change events

* fix: add anchor audio HTML elements

* fix: Request calling speaker root element

* fix: lint issue in AudioSpeakerFactory

Author: EnricoSchw

apps/webapp/src/script/components/AppContainer/AppContainer.tsx

@@ -129,6 +129,8 @@ export const AppContainer = ({config, clientType}: AppProps) => {
 
       {/* Wrapper which will hold the audio elements for playing e.g. the ringtone. The elements are created within AudioRepository.ts */}
       <div id="audio-elements" />
+      {/* Wrapper which will hold the audio elements for the calling speaker */}
+      <div id="calling-audio-speaker-elements" />
     </>
   );
 };

apps/webapp/src/script/components/calling/CallingOverlayContainer.tsx

@@ -118,6 +118,11 @@ const CallingContainer = ({
     callingRepository.refreshAudioInput();
   };
 
+  const switchSpeakerOutput = (deviceId: string) => {
+    setAudioOutputDeviceId(deviceId);
+    callingRepository.refreshAudioOutput();
+  };
+
   const sendEmoji = (emoji: string, call: Call) => {
     void callingRepository.sendInCallEmoji(emoji, call);
   };
@@ -126,10 +131,6 @@ const CallingContainer = ({
     void callingRepository.sendInCallHandRaised(isHandUp, call);
   };
 
-  const switchSpeakerOutput = (deviceId: string) => {
-    setAudioOutputDeviceId(deviceId);
-  };
-
   const toggleCamera = (call: Call) => callingRepository.toggleCamera(call);
 
   const toggleMute = (call: Call, muteState: boolean) => callingRepository.muteCall(call, muteState);

apps/webapp/src/script/repositories/calling/AudioSpeakerFactory.test.ts

@@ -0,0 +1,56 @@
+describe('AudioSpeakerFactory', () => {
+  let mockBaseElement: HTMLElement;
+  let mockStream: MediaStream;
+  let playMock: jest.Mock;
+  let AudioSpeakerFactory: any;
+
+  beforeEach(() => {
+    jest.resetModules();
+
+    mockBaseElement = document.createElement('div');
+    mockBaseElement.id = 'calling-audio-speaker-elements';
+    document.body.appendChild(mockBaseElement);
+
+    mockStream = {} as MediaStream;
+
+    playMock = jest.fn().mockResolvedValue(undefined);
+
+    (global as any).Audio = jest.fn(() => {
+      const audio = document.createElement('audio');
+
+      Object.defineProperty(audio, 'play', {
+        value: playMock,
+        writable: true,
+      });
+
+      return audio;
+    });
+
+    AudioSpeakerFactory = require('./AudioSpeakerFactory').AudioSpeakerFactory;
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = '';
+    jest.clearAllMocks();
+  });
+
+  it('creates new audio element and appends it to base element', () => {
+    const audioElement =
+      AudioSpeakerFactory.createNewCallingAudioSpeaker(mockStream);
+
+    expect(audioElement).toBeDefined();
+    expect(audioElement.srcObject).toBe(mockStream);
+    expect(playMock).toHaveBeenCalled();
+    expect(mockBaseElement.children.length).toBe(1);
+  });
+
+  it('throws error if base element does not exist', () => {
+    document.body.innerHTML = '';
+    jest.resetModules();
+    AudioSpeakerFactory = require('./AudioSpeakerFactory').AudioSpeakerFactory;
+
+    expect(() =>
+      AudioSpeakerFactory.createNewCallingAudioSpeaker(mockStream),
+    ).toThrow('Audio element could not be crated!');
+  });
+});

apps/webapp/src/script/repositories/calling/AudioSpeakerFactory.ts

@@ -0,0 +1,50 @@
+/*
+ * Wire
+ * Copyright (C) 2026 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+import {getLogger, Logger} from 'Util/Logger';
+
+export class AudioSpeakerFactory {
+  private static readonly logger: Logger = getLogger('AudioSpeakerFactory');
+  private static baseElement: HTMLElement | null = document.getElementById('calling-audio-speaker-elements');
+
+  public static createNewCallingAudioSpeaker(stream: MediaStream): HTMLAudioElement {
+    AudioSpeakerFactory.initBaseElement();
+
+    if (!AudioSpeakerFactory.baseElement) {
+      AudioSpeakerFactory.logger.error('No audio base element exist in DOM!');
+      throw new Error('Audio element could not be crated!');
+    }
+
+    AudioSpeakerFactory.logger.log('Add new audio speaker');
+    const audioElement = new Audio();
+    audioElement.srcObject = stream;
+    audioElement.play().catch(error => {
+      AudioSpeakerFactory.logger.error('Audio play failed', error);
+    });
+    AudioSpeakerFactory.baseElement.appendChild(audioElement);
+
+    return audioElement;
+  }
+
+  private static initBaseElement(): void {
+    if (!AudioSpeakerFactory.baseElement) {
+      AudioSpeakerFactory.baseElement = document.getElementById('calling-audio-speaker-elements');
+    }
+  }
+}

apps/webapp/src/script/repositories/calling/Call.ts

@@ -22,11 +22,13 @@ import ko from 'knockout';
 
 import {CALL_TYPE, CONV_TYPE, STATE as CALL_STATE} from '@wireapp/avs';
 
+import {AudioSpeakerFactory} from 'Repositories/calling/AudioSpeakerFactory';
 import {Conversation} from 'Repositories/entity/Conversation';
 import {CanvasMediaStreamMixer} from 'Repositories/media/CanvasMediaStreamMixer';
 import type {MediaDevicesHandler} from 'Repositories/media/MediaDevicesHandler';
 import {mediaDevicesStore} from 'Repositories/media/useMediaDevicesStore';
 import {chunk, getDifference, partition} from 'Util/ArrayUtil';
+import {getLogger, Logger} from 'Util/Logger';
 import {matchQualifiedIds} from 'Util/QualifiedId';
 import {sortUsersByPriority} from 'Util/StringUtil';
 
@@ -45,6 +47,7 @@ interface ActiveSpeaker {
 }
 
 export class Call {
+  private readonly logger: Logger = getLogger('Call');
   public readonly reason: ko.Observable<number | undefined> = ko.observable();
   public readonly startedAt: ko.Observable<number | undefined> = ko.observable();
   public readonly endedAt: ko.Observable<number> = ko.observable(0);
@@ -67,7 +70,7 @@ export class Call {
   public readonly maximizedParticipant: ko.Observable<Participant | null>;
   public readonly isActive: ko.PureComputed<boolean>;
   public readonly epochCache = new CallingEpochCache();
-  private readonly audios: Record<string, {audioElement: HTMLAudioElement; stream: MediaStream}> = {};
+  private readonly audios: Record<string, {audioElement: HTMLAudioElement | null; stream: MediaStream}> = {};
   /**
    * set to `true` if anyone has enabled their video during a call (used for analytics)
    */
@@ -158,10 +161,12 @@ export class Call {
         audio.audioElement.remove();
         audio.audioElement.srcObject = null;
       }
-      const audioElement = new Audio();
-      audioElement.srcObject = audio.stream;
-      audioElement.play();
-      audio.audioElement = audioElement;
+
+      try {
+        audio.audioElement = AudioSpeakerFactory.createNewCallingAudioSpeaker(audio.stream);
+      } catch (e) {
+        this.logger.warn('Fail to playAudioStreams:', e);
+      }
     });
     this.updateAudioStreamsSink();
   }

apps/webapp/src/script/repositories/calling/CallingRepository.ts

@@ -1865,6 +1865,14 @@ export class CallingRepository {
     return stream;
   }
 
+  public refreshAudioOutput() {
+    const activeCall = this.callState.joinedCall();
+    if (!activeCall) {
+      return;
+    }
+    activeCall.updateAudioStreamsSink();
+  }
+
   /**
    * @returns `true` if a media stream has been stopped.
    */