html - JavaScript play audio one after another HTML5

Question

I have a problem with playing audio from a dynamically created javascript audio object one after another. The Audio comes from Google over an array of strings.

for (i = 0; i < Txt_array.length; i++) {
audio.src ='http://translate.google.com/translate_tts?&tl=en&q='+Txt_array[i];
audio.play();};

I would like to do this by an event listener, or is there any other way? It is not just about Google, so I would like to ask you for a general solution, not a ready made google speech script.

Could you help me? How can I play the audio one after another?

Update:

audio.src='http://translate.google.com/translate_tts?&tl=en&q=' + Txt_array[0];
audio.play();

audio.addEventListener('ended', function(){
for (i = 1; i < Txt_array.length; i++) {
audio.src ='http://translate.google.com/translate_tts?&tl=en&q='+Txt_array[i];
audio.play();};
}, false);

I added the Eventlistener, I guess it should work like this, but I still hae a problem that the Eentlistener does not fire if this is the first file played, right?

I would be happy for further support.

Thank you in advance.

Answer 1

There is an ended event, you can change the src property in a listener for it.

var strings = "Hello how are you".split(" ");
var index = 1;

audio.src='http://translate.google.com/translate_tts?&tl=en&q=' + strings[0];
audio.play();

audio.onended = function() {
    if(index < strings.length){
        audio.src='http://translate.google.com/translate_tts?&tl=en&q=' + strings[index];
        audio.play();
        index++;
    }
};