I am using Google TTS API in a website to sound out a text string returned by a backend server. We have followed this blog's steps to setup audio streaming from browser microphone to a server and return TTS from server to browser. This implementation works well on computer and Android devices. However, on iOS devices the TTS playback uses only the ear speaker and not both (ear speaker and main speaker) speakers. This issue leads to audio playback volume being too low on iOS devices.

• We tried to play a local wav file using an audio tag on an iOS device and that was using both the speakers.

<audio src="audio_wav_file_url_here" controls autoplay="true"></audio>

We suspect this: The TTS playback however, requires an arrayBuffer to be converted to a blob object of wav type and maybe there is some loss of audio volume in that conversion? How do we set the wav blob header so that it doesn't lose any information/volume?

Please find the code snippet in the bottom to understand the above statement more.

• We set OPUS audio encoding on both, backend (server-side) speech service (this service contains the STT, dialogFlow and TTS functions) and frontend(in the playOutput function). This didn’t work on iOS.

  const blob = new Blob([arrayBuffer], { 'type' : 'audio/ogg; codecs=opus' });

• We tried to playback TTS using the WebAudio API's AudioContext object but it gets blocked by iOS. The error being:

  Unhandled Promise Rejection: NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

We expect the TTS playback to have a higher volume on iOS by using both the available phone speakers. Suggestions are welcome. Thanks in advance.

We created a ‘results’ listener, which runs once the data from the server-side is retrieved in the browser. This will use the playOutput method which is shown after this code snippet

//creating an io object
const socketio = io();
//connecting to the socket
const socket = socketio.on('connect', function() {});
    socketio.on('results’', function (data) {
    console.log(data);
    //playing the data retrieved from server side
    playOutput(data);
});

This is the code for the audio playback function on browser:

   const audioGcp = document.getElementById("audioGcp"); 
   //audioGcp is the id of the <audio> HTML tag
   function playOutput(arrayBuffer) {
   //arrayBuffer is the data sent from the server-side via socket to the frontend.
   //This arrayBuffer is then converted to a blob object that can be played back.
        try {
            if (arrayBuffer.byteLength > 0) {
                console.log(`--- Returned TTS audio buffer size: ${arrayBuffer.byteLength}`);
                //creating blob from arrayBuffer of type: wav
                const blob = new Blob([arrayBuffer], { type: "audio/wav" });
                //changing the source of the audio tag which plays back the audio contained in the blob object
                audioGcp.src = windowURL.createObjectURL(blob);
                //playing the audio source
                audioGcp.play();
            }
        } 
        catch(e) {
            console.log(`Play Audio Error: ${e}`);
        }
    }

Any leads as to why the audio is low in iOS would be greatly appreciated.