使用单个控制器控制多个html5音轨

我正在尝试为网站实现一个非常小的音频播放器。

界面相当简单。 它有一个播放/暂停按钮和一个静音/取消静音按钮。

我遇到的问题是为不同的轨道实现同一播放器的多个实例。

播放器的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 = "Play"; } else { myAudio.pause(); btnPlayPause.innerHTML = "Pause"; } }); btnMute.addEventListener("click", function() { if (myAudio.muted) { myAudio.muted = false; btnMute.innerHTML = "Mute"; } else { myAudio.muted = true; btnMute.innerHTML = "Unmute"; } }); }); 

这适用于单个轨道。 但如果我在同一页面上有多个曲目，这就成了一个问题。

我猜我需要对我定义myAudio变量的语法进行一些修改：

var myAudio = document.getElementById("myAudio");

但是，我不知道如何更改它，因此相同的脚本可以控制多个音轨。

如果可能的话，我还希望能够确保如果用户点击其他轨道上的播放按钮，当前播放的曲目“停止”或“暂停”并且新曲目开始播放（因此2曲目不是互相打球）。

Answer 1

这是基于jQuery的解决方案。 为了使HTML5音频工作也在IE8 / 7中使用一些额外的闪回后备 。

            
 ►|| MUTE Audio #1 
 
 ►|| MUTE Audio #2 
   

jQuery 代码 + 结果页面 。

javascript 代码 + 结果页面 。

这两个脚本都需要额外的现有.mp3文件来播放声音