JS/JQuery 文本到语音：如何链接音频？答案

【问题标题】：JS/JQuery text to speech: How to chain audios?JS/JQuery 文本到语音：如何链接音频？
【发布时间】：2013-11-26 21:09:26
【问题描述】：

给定 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 事件，如何播放第一个音频，然后在完成后链接到它播放第二个音频？

在那里开始摆弄资产：http://jsfiddle.net/J9wAB/

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

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

【问题讨论】：

另见stackoverflow.com/a/7198851/1974961
您的play() 方法调用真的返回一个promise（具有.done() 方法）吗？
堆栈溢出需要对此类问题有更新的答案。 JavaScript 至少到 ES6 2018，这是用 ES5 询问和回答的。

标签： javascript jquery audio text-to-speech promise

【解决方案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

【讨论】：

感谢您的推动。但是，我愿意“链接”这些音频，这意味着我希望单击一下，一个接一个地阅读它们 3。（我承认这并不容易解释）。我已经 +1 回复了你，谢谢。
@Hugolpz - 应该相当容易，添加到答案中！
fiddle n⁰14 会在您的浏览器中播放 3 种声音吗？它只是在 Chrome 上播放第一个，但如果它适用于您的浏览器，我愿意验证您的答案。
我使用的是 chrome，它会在这里播放所有三种声音？
它只是给我播放第一个声音文件，它应该给我播放 3 个文件，一个接一个。

【解决方案2】：

不需要 jQuery，只需要监听 ended 事件

简单的情况如下：

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

抽象，看起来像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');

【讨论】：

在 Firefox 上工作！ 1 单击 => 3 个音频作为句子播放！ Chrome 崩溃了。但是谢谢你:)
它没有在我的 Chrome 上崩溃
刚刚升级到 Chromium Version 30.0.1599.114 Ubuntu 13.04 (30.0.1599.114-0ubuntu0.13.04.2)，仍然失败。
必须是你的 ubuntu 版本的 Chrome

【解决方案3】：

您可以使用onended="yourcallback()" 开始下一个音频。

请看这个答案：https://stackoverflow.com/a/7652194/2707424

【讨论】：

对于像我这样的新手，你能不能说得更准确些。