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.

Does your `play()` method call really return a promise (that has a `.done()` method)? — Bergi, Sep 29 '14 at 12:48
Stack overflow needs to have newer answers to stuff like this. JavasScript up to ES6 2018 at least and this was asked and answered with ES5. — Altimus Prime, May 25 '21 at 18:18

adeneo · Accepted Answer · 2013-11-26T21:33:31.413

4

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

edited Nov 26 '13 at 21:33

answered Nov 26 '13 at 21:19

adeneo

312,895
29
395
388

thanks for this push. I'am however willing to "chain" these audios, which means I want that one single click read them 3 one after an other. (I admit it is not easy to explain). I +1ed you answer to thanks you already. – Hugolpz Nov 26 '13 at 21:26
@Hugolpz - should be fairly easy, added to the answer ! – adeneo Nov 26 '13 at 21:33
Does the fiddle n⁰14 play the 3 sounds in your browser ? It just play the first on Chrome, but I am willing to valided your answer if it works on your browser. – Hugolpz Nov 26 '13 at 21:38
I'm using chrome, and it plays all three sounds here ? – adeneo Nov 26 '13 at 21:42
It just plays me the first sound-file, it should play me the 3 files, one after the other. – Hugolpz Nov 26 '13 at 21:44
Works for me in OS X Firefox 25.0.1 – radicaledward101 Nov 26 '13 at 21:44
Indeed, works on Firefox ! 1 click => 3 audios played as a sentence! Doesn't works on Chrome, but you answered the question and deserve a big validation. – Hugolpz Nov 26 '13 at 21:48

score 2 · Answer 2 · answered Nov 26 '13 at 21:35

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');

answered Nov 26 '13 at 21:35

Ruan Mendes

90,375
31
153
217

Works on Firefox ! 1 click => 3 audios played as a sentence! Chrome crash it. But thanks you :) – Hugolpz Nov 26 '13 at 21:55
It didn't crash on my Chrome – Ruan Mendes Nov 27 '13 at 06:48
Just upgraded to Chromium `Version 30.0.1599.114 Ubuntu 13.04 (30.0.1599.114-0ubuntu0.13.04.2)`, still failing. – Hugolpz Nov 28 '13 at 03:33
Must be something with your ubuntu version of Chrome – Ruan Mendes Nov 28 '13 at 19:26

score 1 · Answer 3 · edited May 23 '17 at 10:25

1

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

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

edited May 23 '17 at 10:25

Community

1
1

answered Nov 26 '13 at 21:30

Joost

62
1
11

could you be more precise for a newby like me. – Hugolpz Nov 26 '13 at 21:33

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

3 Answers3

Linked