JS / JQuery的文本到语音：如何链音频？ [英] JS/JQuery text to speech: How to chain audios?

问题描述

由于n个不同的字：

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

给定一个带有已知位置n个不同的.ogg音频文件：

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>

我用JS 的getElementById（'...'）。播放（），它在我奔跑使用的onclick 事件在一个HTML元素：

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>

这让我打一的AudioFile。

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 ?

开始与资产有小提琴： http://jsfiddle.net/J9wAB/

Starting fiddles with assets there : http://jsfiddle.net/J9wAB/

注意：我试图的document.getElementById（'ID1'）播放（）来实现（的document.getElementById（ID2）打（）），但它同时播放两个文件。

Note: I tried document.getElementById('id1').play().done(document.getElementById('id2').play()), but it plays both files simultaneously.

编辑：我接受一个答案在Firefox上运行。然而，这个的addEventListener 基于答案失败对某些浏览器。另一种许诺基地答案可能会更成功。

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.

推荐答案

事情是这样的：

$('#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和下一次按钮被点击，它playes即，当没有更多的音频元素，它从开始再次开始。

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.

如果你真的wan't使用ID代替，这将是这样的：

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

这篇关于JS / JQuery的文本到语音：如何链音频？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！