Keypress Pause and Play Audio

Question

Я работаю над аудиоплеером, и я хочу, чтобы люди могли играть и приостанавливать музыку с помощью пробела. У меня есть работа. К сожалению, сценарий работает только с первым игроком (когда кто-то нажимает на песню, часть игрока загружается в верхней части экрана). Итак, как только первая часть исчезнет. Функция воспроизведения и паузы не работает снова. Какие-либо предложения.

$(document).keydown(function(event) { 
    if (event.keyCode == 32) { 
    if (!mytrack.paused && !mytrack.ended) { 
     mytrack.pause(); 
     play.innerHTML = "<i class='fa fa-play'></i>"; 
     window.clearInterval(updateTime); 
    } else { 
     mytrack.play(); 
     play.innerHTML = "<i class='fa fa-pause'></i>"; 
     updateTime = setInterval(update, 500); 
    } 
    return false; 
    } 
}); 

---

Полный код

var mytrack = document.getElementById("sound"); 
var play = document.getElementById("play"); 
var currentTime = document.getElementById("current-time"); 
var totalTime = document.getElementById("total-time"); 
var defaultBar = document.getElementById("default-bar"); 
var progressBar = document.getElementById("progress-bar"); 
var barSize; 

defaultBar.addEventListener('click', clickedBar, false); 

mytrack.addEventListener('loadedmetadata', function() { 
    mytrack.play(); 
    updateTime = setInterval(update, 500); 
    play.innerHTML = "<i class='fa fa-pause'></i>"; 
    var minutes = parseInt(mytrack.duration/60); 
    var seconds = parseInt(mytrack.duration % 60); 
    if (seconds < 10) { 
    totalTime.innerHTML = minutes + ":0" + seconds; 
    } else { 
    totalTime.innerHTML = minutes + ":" + seconds; 
    } 
}); 

function playOrPause() { 
    if (!mytrack.paused && !mytrack.ended) { 
    mytrack.pause(); 
    play.innerHTML = "<i class='fa fa-play'></i>"; 
    window.clearInterval(updateTime); 
    } else { 
    mytrack.play(); 
    play.innerHTML = "<i class='fa fa-pause'></i>"; 
    updateTime = setInterval(update, 500); 
    } 
} 

function update() { 
    if(!mytrack.ended) { 
    // CURRENT TIME TO READABLE TIME 
    var minutes = parseInt(mytrack.currentTime/60); 
    var seconds = parseInt(mytrack.currentTime % 60); 
    if (seconds < 10) { 
     currentTime.innerHTML = minutes + ":0" + seconds; 
    } else { 
     currentTime.innerHTML = minutes + ":" + seconds; 
    } 
    // BAR 
    var progressBarSize = parseInt(mytrack.currentTime * barSize /mytrack.duration); 
    progressBar.style.width = progressBarSize + "px"; 
    barSize = defaultBar.offsetWidth; 
    } else { 
    currentTime.innerHTML = "0:00"; 
    play.innerHTML = "<i class='fa fa-play'></i>"; 
    // Bar 
    progressBar.style.width = "0px"; 
    // TIMER 
    window.clearInterval(updateTime); 
    } 
} 

function clickedBar(e) { 
    if(!mytrack.ended) { 
    var mouseX = e.pageX - defaultBar.offsetLeft; 
    var newTime = mouseX * mytrack.duration/barSize; 
    mytrack.currentTime = newTime; 
    progressBar.style.width = mouseX + "px"; 
    } 
} 

Answer 1

Ваш mytrack устанавливается один раз в самом начале. не

var mytrack = document.getElementById("sound"); 

В процессе использования вашего приложения, если «новый игрок» ставится на место таким образом, что mytrack уже не в DOM, ваша ссылка на mytrack теперь указывает на звуковой элемент, который не является полезным больше.

Вам либо не нужно заменять mytrack, а вместо этого динамически изменять src таким образом, чтобы mytrack оставался в DOM или обновлял вашу ссылку на ваш аудио элемент по мере необходимости.

Это может быть так же просто, как обновление mytrack = document.getElementById("whatever-the-id-of-the-new-audio-element-is"); после его замены или поиск его динамически каждый, прежде чем пытаться взаимодействовать с ним.

Короче говоря, ваши замыкания сохраняют ссылку на mytrack и всегда будут пытаться ее использовать. Это ваша работа, чтобы убедиться, что она по-прежнему полезна, или замените ее.

EDIT просто просмотрел весь ваш расширенный код и заметил, что вы подключаете слушателей к myTrack. Вам необходимо соединить каждый addEventListner с соответствующим removeEventListener, когда вы удаляете myTrack из DOM, чтобы избежать утечек памяти.

Возможно, вам захочется переместить весь «код, который будет выполняться, когда вы начнете наблюдать за плеером», чтобы вы могли использовать его для каждого настроенного вами аудиоплеера. Событие делегирование, прослушивание событий на более высоком уровне, на самом деле не то, что вы ищете, поскольку большинство медиа-событий HTML5 не пузырятся.

После того, как вы выделили этот код, вам также понадобится набор для реагирования на удаление аудиоэлемента.

Имейте в виду, что addEventListener и removeEventListener ожидают вызова того же элемента для одного и того же типа событий с тем же обработчиком на той же фазе событий. Это то, что часто вызывает людей, незнакомых с процессом, и посылает их на установку onended непосредственно на элемент. Но это не так сложно. Есть много проблем здесь, на SO около removeEventListener «не работает», что объяснит.