JS/JQuery текст в речь: как подключить аудио?

Question

Учитывая п разных слов:

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

Учитывая п различных .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(), что я бег, используя onclick событие злоумышленника HTML элемента:

<!-- 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()), но он одновременно играет оба файла.

EDIT: Я принял один ответ, работающий над Firefox. Тем не менее, этот ответ на addEventListener не работает в некоторых браузерах. Альтернативный альтернативный вариант ответа может быть более успешным.

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, и в следующий раз, когда нажимается кнопка, он воспроизводит это, и когда нет более звуковых элементов, оно начинается с начала снова.

Если вы действительно wan't использовать ID вместо этого, было бы что-то вроде:

var audio = 1 

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

FIDDLE

Чтобы играть все три на один клик, один за другим, вы» d сделать

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

FIDDLE

Answer 2

Вы можете использовать onended="yourcallback()", чтобы начать следующий звук.

Посмотрите на этот ответ, пожалуйста: https://stackoverflow.com/a/7652194/2707424

Answer 3

Нет Jquery не нужно, просто слушать для закончился событие

Простой случай заключается в следующем:

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');