I am using @google-cloud/text-to-speech to stream some audio.

Here is the code in the backend:

import { TextToSpeechClient } from '@google-cloud/text-to-speech';
const t2s = new TextToSpeechClient();

app.use('/api/v1/text2speech', async (req, res) => {
    const text = req.query['text'];
    const t2s = new TextToSpeechClient();
    const request = { input: { text }, audioConfig: { audioEncoding: 2 } };
    const [response] = await t2s.synthesizeSpeech(request);
    res.setHeader('Content-Type', 'audio/mpeg');
    res.write(response.audioContent);
    return res.end();
});

In the browser:

<audio src="/api/v1/text2speech?text=Audio to be played"></audio>

Attempt to do something on the audio ended event:

const audio = document.querySelector('audio');
audio.addEventListener('ended', () => {
    // Nothing happens here on iOS/iPad OS
    window.alert('Audio has ended');
});

Result: Works on all devices except iOS/iPad OS

Notes:

1. The ended even does get triggered when the audio is played from a static file. But I need to stream the audio & not play from a file.
2. I have also tried workarounds to check the status of audio.paused but the audio.paused property remains false forever, even though the stream has completed.
3. Since this is a stream, I do not know the duration of the audio. So I can't check the value based on currentTime.