javascript - JS/JQuery 文本转语音 : How to chain audios?

Question

给定 n 个不同的词:

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

给定 n 个具有已知位置的不同 .ogg 音频文件:

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

我使用 JS getElementById('...').play()，我在 HTML 元素上使用 onclick 事件运行它:

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

这让我可以播​​放一个音频文件。

使用一个 onlick 事件，如何播放第一个音频，然后在完成后链接到第二个音频的播放？

开始摆弄那里的 Assets :http://jsfiddle.net/J9wAB/

注意:我尝试了 document.getElementById('id1').play().done(document.getElementById('id2').play())，但它同时播放两个文件。

编辑:我接受了一个在 Firefox 上工作的答案。然而，这个基于 addEventListener 的答案在某些浏览器上失败了。替代的基于 promise 的答案可能会更成功。

Answer 1

像这样:

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

它获取文档中的第一个音频元素，并将其存储在 jQuery 数据中，一旦播放(onended 事件)，它获取 DOM 中的下一个音频元素，下一次单击按钮，它播放那个，当没有更多音频元素时，它再次从头开始。

如果你真的不想使用 ID，它会是这样的:

var audio = 1

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

FIDDLE

要一次单击播放所有三个，一个接一个，你会这样做

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

FIDDLE