JS / JQuery texte à la parole: comment chaîner des audios?

Compte tenu de différents mots:

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

Compte tenu de différents fichiers audio .ogg avec des emplacements connus:

 <!-- 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>

J'utilise JS getElementById('...').play() , que je cours en utilisant un événement onclick sur un élément HTML:

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

Cela me permet de jouer à un fichier audio.

À l'aide d'un seul événement unique, comment jouer le premier audio, puis-t-il quand il fait une chaîne de lecture d'un second audio?

Démarrer des violons avec des actifs là-bas: http://jsfiddle.net/J9wAB/

Remarque: J'ai essayé document.getElementById('id1').play().done(document.getElementById('id2').play()) , mais il joue les deux fichiers simultanément.

EDIT: J'ai accepté une réponse qui fonctionne sur Firefox. Pourtant, cette réponse basée sur addEventListener échoue sur certains navigateurs. Une réponse de base alternative peut être plus réussie.

Quelque chose comme ça :

 $('#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(); });

VIOLON

Il obtient le premier élément audio dans le document et le stocke dans les données de jQuery, et une fois qu'il est joué (l'événement onended ), il devient le prochain élément audio dans le DOM et la prochaine fois que le bouton est cliqué, il joue ainsi et quand Il n'y a plus d'éléments audio, il commence à partir du début à nouveau.

Si vous voulez vraiment ne pas utiliser l'ID, cela ressemblerait à:

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

VIOLON

Pour jouer tous les trois en un seul clic, l'un après l'autre, vous le feriez

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

VIOLON

Aucun jQuery n'a besoin, écoutez simplement l'événement terminé

Le cas simple est le suivant:

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

Abstraire, il ressemblerait à 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');

Vous pouvez utiliser onended="yourcallback()" pour lancer l'audio suivant.

Regardez cette réponse s'il vous plaît: https://stackoverflow.com/a/7652194/2707424