quickStart() function will constantly fetch my synthesized-speech at the server-side. Synthesize-speech will always overwrite to ‘output.mp3’. Hence, output.mp3 is dynamically updated.

My issue is, when I synthesize the word “hello”, the audioPlayer will play the output.mp3 for “hello” well. However, when I go to the next word “there”, the audioPlayer will still play the output.mp3 for “hello”, and not “there”. Similarly, when I go to my 3rd word, i.e. “my”, it still plays “hello”.

Checking my github directory, the “output.mp3” plays “hello”, “there” and “my” when I checked each time I execute quickStart(). Does it mean the url is not updating the output.mp3 after its updated.

Oddly, this is only within android web browsers and desktop web browsers. iOS web browsers work perfectly fine. Everytime I run quickStart(word), the audioPlayer will play the right word each time.

This is my code:

// Define an endpoint to handle requests for text-to-speech synthesis
app.get('/synthesize-speech', async (req, res) => {
    try {
        // Get the word from the query parameters
        const text = req.query.word;

        if (!text){
            return res.status(400).json({ error: 'No word passed over' });
        }

        // Construct the request
        const request = {
            input: { text: text },
            voice: { languageCode: 'en-IN', name: 'en-IN-Neural2-D', ssmlGender: 'FEMALE' },
            audioConfig: { audioEncoding: 'MP3', speakingRate: 1, pitch: -2 },
        };

        // Perform the TTS request
        const [response] = await client.synthesizeSpeech(request);

        // Write audio content to local file
        const writeFile = util.promisify(fs.writeFile);
        const outputPath = path.join(__dirname, 'public', 'output.mp3');
        await writeFile(outputPath, response.audioContent, 'binary');

        res.json({ success: true })
    }    
    catch(error){
        console.error('Error:', error);
        res.status(500).json({ error: 'Internal server error' });
    }
});

// Function to synthesize speech for a word and play it
        async function quickStart(word) {

            // Placeholder function for text-to-speech logic
            console.log(`Processing word: ${word} and ${currentIndex}`);

            // Make a GET request to the server to generate and serve audio files
            const response = await fetch(`/synthesize-speech?word=${word}`);
            
            if (!response.ok) {
                throw new Error('Failed to fetch audio file');
            }

            const audioBlob = await response.blob();
            const audioUrl = window.URL.createObjectURL(audioBlob);

            // Set the source of the audio player to the dynamically generated URL
            audioPlayer.src = audioUrl;
            
            // Create a new audio element
            // const audioElement = new Audio(audioUrl);

            // Add event listener to start audio only if it's not already added
            if (!$("#startAudio").data("eventAdded")) {
                $("#startAudio").on("click", function(e) {
                    if (!audio) {
                        audio = new Audio('/output.mp3');
                    }
                });
                $("#startAudio").data("eventAdded", true);
            }
            
            // Add event listener to play audio when it's ready
            audioPlayer.onloadedmetadata = function() {
                audioPlayer.play();
            };
        }

        <audio controls id="audioPlayer">
            Your browser does not support the audio element.
        </audio>