Удаление прослушивателя событий, сгенерированного из динамически упорядоченного аудио - PullRequest
Новая
       10

Удаление прослушивателя событий, сгенерированного из динамически упорядоченного аудио

0 голосов
/ 01 сентября 2018

У меня есть аудио файлы, воспроизводимые в динамически создаваемой последовательности. У меня есть следующий код для этого, который запускается при вызове pop_modal (): 

var soundmute = 0;

function pop_modal(){
    if(soundmute==0){
       soundmute=1;
       var playlist = "chime,token,nambari,moja,mbili,tatu,nne,tano,sita,saba,nane,tisa,nenda";
       create_playlist_and_play(playlist);
       $("#announce").modal({backdrop: true});
       $("#announce").show();
       play_queue_sounds("chime");
    }
}

function create_playlist_and_play(list){
    var tracks = list.split(",");
    // add event listeners
    for (var i = 0; i < tracks.length; i++) {
        console.log(tracks[i]);
        $("#sound-" + tracks[i])[0].addEventListener("ended", function playnext(){
            if (i!=tracks.length-1){
                    console.log("played = "+tracks[i]);
                    play_queue_sounds(tracks[i+1]);
                    $("#sound-" + tracks[i])[0].removeEventListener("ended",playnext(),false);
                }else{
                    setTimeout(hide_modal, 3000);
            }
        } , false);
    }
}


function hide_modal(){
    soundmute=0;
    $("#announce").hide();
}
function play_queue_sounds(name){
    var audio = $("#sound-" + name)[0];
    audio.volume = audio.getAttribute("volume");
    audio.play();
}

У меня есть это в моем HTML: 

<audio preload="auto" id="sound-chime" volume=0.5>
<source src="/files/queue_sounds/chime.mp3"></source>
</audio>
<audio preload="auto" id="sound-token" volume=0.5>
<source src="/files/queue_sounds/token.mp3"></source>
</audio>
<audio preload="auto" id="sound-nambari" volume=0.5>
<source src="/files/queue_sounds/nambari.mp3"></source>
</audio>

Я получаю эту ошибку: 

Uncaught TypeError: Cannot read property 'getAttribute' of undefined
at play_queue_sounds (eval at setup (form.min.js?ver=1522838189.0:2641), <anonymous>:121:26)
at HTMLAudioElement.playnext (eval at setup (form.min.js?ver=1522838189.0:2641), <anonymous>:40:21)

Другая проблема, с которой я сталкиваюсь, заключается в том, что если я попытаюсь переместить свою функцию воспроизведения за пределы родительской функции, я смогу воспроизвести аудиофайлы для воспроизведения, но тогда я не смогу удалить созданные прослушиватели событий. Я чувствовал, что вышеупомянутая конструкция решит проблему слушателей событий, но я не могу заставить ее работать.

UPDATE

После некоторой настройки я прибегнул к этому, который до сих пор работал нормально: 

function create_playlist_and_play(list){
    var tracks = list.split(",");
    // add event listeners
    var i = 0;
    for ( i = 0; i < tracks.length; i++) {
        console.log(tracks[i]);
        $("#sound-M" + tracks[i]).on("ended",{ "tracks": tracks,"i":i },playnext);
    }
}
function playnext(event){
    var tracks = event.data.tracks;
    var i = event.data.i;
    if (event.data.i!=event.data.tracks.length-1){
            console.log("played = "+tracks[i]);
            play_queue_sounds(tracks[i+1]);
    }else{
        setTimeout(hide_modal, 3000);
    }
}

function pop_modal(){
   if(soundmute==0){
        soundmute=1;
        var playlist = "chime,token,nambari,tatu,saba,tano,nenda,moja";
        create_playlist_and_play(playlist);
        $("#announce").modal({backdrop: true});
        $("#announce").show();
        play_queue_sounds("chime");
   }
}

function hide_modal(){
    $('audio[id^="sound-M"]').each(function () {
        var old_element = this;
        var new_element = old_element.cloneNode(true);
        old_element.parentNode.replaceChild(new_element, old_element);
    });
    soundmute=0;
    $("#announce").hide();
}
...