按键暂停和播放音频

我正在使用音频播放器，我希望人们可以使用空格键播放和暂停音乐。我有它的工作。不幸的是，该脚本只适用于第一个玩家（当某人点击歌曲时，玩家部分被加载到屏幕顶部）。所以一旦第一部分消失了。它的播放和暂停功能不再工作。有什么建议么。按键暂停和播放音频

$(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

按键暂停和播放音频

回答

相关问题