给定 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 的答案可能会更成功。
最佳答案
像这样:
$('#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();
});
它获取文档中的第一个音频元素,并将其存储在 jQuery 数据中,一旦播放(onended
事件),它获取 DOM 中的下一个音频元素,下一次单击按钮,它播放那个,当没有更多音频元素时,它再次从头开始。
如果你真的不想使用 ID,它会是这样的:
var audio = 1
$('#play').on('click', function() {
$('#id' + audio).get(0).play();
audio++;
});
要一次单击播放所有三个,一个接一个,你会这样做
$('#play').on('click', function() {
$('audio').on('ended', function() {
$('audio').eq($(this).index('audio')+1).get(0).play();
}).get(0).play();
});
关于javascript - JS/JQuery 文本转语音 : How to chain audios?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20228004/