JS/JQuery text to speech: How to chain audios?

Question

Given n different words:

var text = [ "bèijing Beijing Shanghai"]
var words= [ "bèijing", "Beijing", "Shanghai" ];

Given n different .ogg audio files with a known locations :

<!-- AUDIOS FILES -->
<audio id="id1" src="/audio/Zh-bèijing.ogg"></audio>
<audio id="id2" src="/audio/Zh-Beijing.ogg"></audio>
<audio id="id3" src="/audio/Zh-Shanghai.ogg"></audio>

I use JS getElementById('...').play(), which I run using an onclick event over an HTML element:

<!-- HTML -->
<div id="play" onClick="document.getElementById('id1').play();">
    <button>Play</button>
</div>

This allow me to play one audiofile.

Using one single onlick event, how play the first audio, then when done chain to it the play of a second audio ?

Starting fiddles with assets there : http://jsfiddle.net/J9wAB/

Note: I tried document.getElementById('id1').play().done(document.getElementById('id2').play()), but it plays both files simultaneously.

EDIT: I accepted one answer working on Firefox. Yet, this addEventListener based answer fails on on some browsers. An alternative promise base answer may be more successful.

Answer 1

Something like this :

$('#play').data('audio', $('audio:first')).on('click', function() {
    var self = this;
    $(this).data('audio').on('ended', function() {
        var n = $('audio').eq( $(self).data('audio').index('audio') + 1 );
        $(self).data('audio', n.length ? n : $('audio:first'));
    }).get(0).play();
});

FIDDLE

It gets the first audio element in the document, and stores it in jQuery's data, and once it's played (the onended event) it get's the next audio element in the DOM and the next time the button is clicked, it playes that, and when there are no more audio elements, it starts from the beginning again.

If you really wan't to use the ID instead, it would be something like :

var audio = 1

$('#play').on('click', function() {
    $('#id' + audio).get(0).play();
    audio++;
});

FIDDLE

To play all three on a single click, one after the other, you'd do

$('#play').on('click', function() {
    $('audio').on('ended', function() {
        $('audio').eq($(this).index('audio')+1).get(0).play();
    }).get(0).play();
});

FIDDLE

Answer 2

No jQuery needed, just listen for the ended event

The simple case is the following:

document.getElementById('id1').addEventListener('ended', function(){
    document.getElementById('id2').play();
});   

Abstracted, it would look like http://jsfiddle.net/J9wAB/13/

function chain(ids/* id, id, ... */) {
    function setHandler(first, next) {
      document.getElementById(first).addEventListener('ended', function(){
        document.getElementById(next).play();
      });   
    }
    for (var i = 0; i < arguments.length - 1; i++) {
        setHandler(arguments[i], arguments[i+1]);
    }
}
chain('id1', 'id2', 'id3');

Answer 3

You can use the onended="yourcallback()" to start the next audio.

Look at this answer please: https://stackoverflow.com/a/7652194/2707424