【发布时间】：2013-08-03 17:23:19
【问题描述】：
我正在尝试为网站实现一个非常简单的音频播放器。
界面比较简单。它有一个播放/暂停按钮和一个静音/取消静音按钮。
我遇到的问题是为不同的轨道实现同一播放器的多个实例。
播放器的javascript是：
jQuery(function() {
var myAudio = document.getElementById("myAudio");
var btnPlayPause = document.getElementById("btnPlayPause");
var btnMute = document.getElementById("btnMute");
btnPlayPause.addEventListener("click", function() {
if (myAudio.paused || myAudio.ended) {
myAudio.play();
btnPlayPause.innerHTML = "<span aria-hidden=\"true\" data-icon=\"\"></span><span class=\"screen-reader-text\">Play</span>";
}
else {
myAudio.pause();
btnPlayPause.innerHTML = "<span aria-hidden=\"true\" data-icon=\"\"></span><span class=\"screen-reader-text\">Pause</span>";
}
});
btnMute.addEventListener("click", function() {
if (myAudio.muted) {
myAudio.muted = false;
btnMute.innerHTML = "<span aria-hidden=\"true\" data-icon=\"\"></span><span class=\"screen-reader-text\">Mute</span>";
}
else {
myAudio.muted = true;
btnMute.innerHTML = "<span aria-hidden=\"true\" data-icon=\"\"></span><span class=\"screen-reader-text\">Unmute</span>";
}
});
});
这适用于单轨。但如果我在同一页面上有多个曲目，这就会成为问题。
我猜我需要对定义 myAudio 变量的语法进行一些修改：
var myAudio = document.getElementById("myAudio");
但是，我不确定如何更改它，以便同一个脚本可以控制多个音轨。
如果可能，我还希望能够确保如果用户单击不同曲目上的播放按钮，当前正在播放的曲目“停止”或“暂停”并且新曲目开始（所以 2曲目没有相互重叠播放）。
【问题讨论】：
-
里面有问题吗？
-
是的，如何修改脚本，让同一个脚本可以控制多个不同的轨道。现在。如果我在一个曲目上单击播放，所有曲目都会同时播放。
-
如果我想要一个播放列表，那就太好了。在这种情况下，没有播放列表，但每个曲目旁边都有一个播放按钮。我需要让播放按钮播放相关的曲目，并且只播放该曲目。如果您单击另一个曲目旁边的播放按钮，则当前正在播放的曲目将暂停，并播放新单击的曲目。但是该解决方案对于站点范围内的第二个播放器很有用，因此仍然非常有用。
标签： javascript html html5-audio jquery