按鍵暫停和播放音頻

我正在使用音頻播放器，我希望人們可以使用空格鍵播放和暫停音樂。我有它的工作。不幸的是，該腳本只適用於第一個玩家（當某人點擊歌曲時，玩家部分被加載到屏幕頂部）。所以一旦第一部分消失了。它的播放和暫停功能不再工作。有什麼建議麼。按鍵暫停和播放音頻

$(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"; 
    } 
}

來源

2016-01-22 Matt Thomas

何時何時創建了myTrack？如果這是你的第一個球員，然後你創造更多，那麼你現在的處理程序只知道'myTrack' – mczepiel

我用完整的球員代碼編輯帖子。玩家被加載到一個部分。因此，一次只有一個玩家在頁面上。當你點擊一首新歌曲時，前一首歌曲消失。感謝您的評論！ –

也許是因爲你將click事件監聽器綁定到了第一個局部區域，但是一旦第一個局部區域消失，事件就不會被綁定到第二個局部區域（player），如果這樣做合理的話。有一個函數在下一個玩家加載後重新綁定它。 –

你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的引用，並將始終嘗試使用它。這是你的工作，以確保它仍然有用，或者取而代之。

編輯只是看着你所有的擴展代碼，並注意到你將聽衆附加到myTrack。當您從DOM中刪除myTrack以避免內存泄漏時，您需要將每個addEventListner與相應的removeEventListener配對。

您可能需要將所有「當您開始觀察播放器時執行的代碼」移動到某個功能中，以便您可以將它用於您設置的每個音頻播放器。由於大部分HTML5媒體活動不會冒泡，因此事件代表團正在傾聽更高級別的活動，因此並不是您正在尋找的內容。

將代碼隔離後，您還需要一套用於對刪除音頻元素作出反應的設置。

請記住，addEventListener和removeEventListener期望在同一事件階段針對同一個事件類型使用相同的處理程序調用相同的元素。這是經常讓不熟悉這個過程的人絆倒他們，並將他們直接發送到設置onended。但並不複雜。這裏有很多問題關於removeEventListener「不工作」，這將解釋。

來源

2016-01-22 22:55:27 mczepiel

按鍵暫停和播放音頻

回答

相關問題