Biorąc pod uwagę n różnych słów:

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

Biorąc pod uwagę n różnych plików audio .ogg ze znanymi lokalizacjami:

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

Używam JS getElementById('...').play(), który uruchamiam przy użyciu zdarzenia onclick na elemencie HTML:

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

Pozwala mi odtworzyć jeden plik audio.

Korzystanie z jednego zdarzenia pojedynczego Onclick, , jak odtwarzaj pierwszy dźwięk, a następnie po zakończeniu łańcucha do niego odtwarzanie drugiego dźwięku?

Rozpoczynające skrzypce z aktywami: http://jsfiddle.net/j9wab/

Uwaga: Próbowałem document.getElementById('id1').play().done(document.getElementById('id2').play()), ale odtwarza oba pliki jednocześnie.

Edytuj: Zaakceptowałem jedną odpowiedź pracując nad Firefoksie. Jednak odpowiedź oparta na niektórych przeglądarkach opartych na niektórych przeglądarkach. Alternatywna odpowiedź bazy obietnicy może być bardziej udana.

1
Hugolpz 27 listopad 2013, 01:09

3 odpowiedzi

Najlepsza odpowiedź

Coś takiego :

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

SKRZYPCE

Dostaje pierwszy element audio w dokumencie i przechowuje go w danych jQuery, a po zagraniu (zdarzenie {X0}}) otrzymuje następny element audio w Domu, a następnym razem przycisk jest kliknięty, gra że i gdy nie ma więcej elementów audio, zaczyna się od początku.

Jeśli naprawdę nie będziesz używać identyfikatora, byłoby to coś takiego jak:

var audio = 1

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

SKRZYPCE

Grać wszystkie trzy na jednym kliknięcie, jeden po drugim, zrobiłbyś

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

SKRZYPCE

4
adeneo 26 listopad 2013, 21:33

Nie potrzeba jQuery, wystarczy posłuchać wydarzenia Ended

Prosta sprawa jest następująca:

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

Abstrakcjonowane, wyglądałoby to jak 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');
2
Juan Mendes 26 listopad 2013, 21:35

Możesz użyć onended="yourcallback()", aby rozpocząć następny dźwięk.

Spójrz na tę odpowiedź: https://stackoverflow.com/a/7652194/2707424

1
Community 23 maj 2017, 10:25