iPhone on Safari confuses which speaker to output audio to if a microphone is initialized while there is audio playback

Question

iPhones have an issue in Safari playing audio through the speakerphone speakers. Once a microphone is initialized we then play a short audio clip (about three seconds) after this is played, we then record a users response with the microphone -this pattern of events occurs three times. This first audio clip is played through the handset speaker -making the volume low. Then after the mic records the first user response the following audio clip is then played through the speakerphone (which is desired for all three audio clips). What could be confusing iOS/Safari in terms of the audio context destination? Is there a setting that I can set to ensure speakerphone, or another event pattern I can use to achieve my desired behavior. Desired Behavior: iPhone will play all audio clips through the speaker phone, even while a microphone is initialized.

1: Playing a short audio clip before the "feature set" (audio playback and recording response) 2: Setting timeout after microphone is initialized, and microphone stream is started. 3: We have played around with the order in which we begin recording/playing audio. 4: If no microphone is initialized and never begins recording the desired behavior occurs.

audio = new Audio();
this.audio.src = audioUrl;
const audioFileLoadedPromise = this.audio.play()
//////////////////////////////////////////////////
const mediaStreamConstraints: MediaStreamConstraints = {
        audio: !enableAudio ? false : {
            echoCancellation: true,
            volume: 1.0
        },
        video: false : (enableVideo === true ? 

this.getCameraConstraints() : enableVideo),
};

navigator.mediaDevices.getUserMedia(mediaStreamConstraints)
/////////////////////////////////////////////////


await this.microphoneComponent.initComponent();
await this.microphoneComponent.startRecording();
await sleep(1000); //this pause was to test if timing somehow affected playback
this.beginAudio(); //this is the audio clip that is played through handset

////from here the pattern continues switching off between playing audio and recording user response and audio is played through speakerphone (as desired)

Desired Behavior: iPhone will play all audio clips through the speaker phone, even while a microphone is initialized.

Answer 1

This is a know issue for iOS, documented here https://bugs.webkit.org/show_bug.cgi?id=230902

A workaround that I tried and worked goes like this (TypeScript)

public connectToSpeaker(remoteAudioStream: MediaStream, gain: number) {
        try {
            const AudioCtx = window.AudioContext || window['webkitAudioContext'];
            const context = new AudioCtx();
            const audioNode = context.createMediaStreamSource(remoteAudioStream);
            const gainNode: GainNode = context.createGain();
            // some device volume too low ex. iPad
            gainNode.gain.value = gain;
            audioNode.connect(gainNode);
            gainNode.connect(context.destination);
        } catch (ex) {
            // will throw an exception if no audio track exists
            console.error(ex)
        }
    }