我正在尝试为网站实现一个非常小的音频播放器。
界面相当简单。它有一个播放/暂停按钮和一个静音/取消静音按钮。
我遇到的问题是为不同的曲目实现同一播放器的多个实例。
玩家的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");
然而，我不知道如何改变这一点，以便同一个脚本可以控制多个音轨。
如果可能的话，我还希望能够确保，如果用户单击不同曲目上的播放按钮，当前正在播放的曲目将"停止"或"暂停"，新曲目将开始播放（因此两首曲目不会叠加播放）。
这是基于jQuery的解决方案。为了使HTML5音频也能在IE8/7中工作，请使用一些额外的flash回退。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='//code.jquery.com/jquery-1.10.1.js'></script>
<style type='text/css'>
.mp3Player {
padding:8px;
margin:8px;
background-color:#ddf;
}
</style>
<script type='text/javascript'>//<![CDATA[
jQuery(function (){
var myAudio = document.getElementById("myAudio");
var current = null;
var playingString = "<span aria-hidden="true" data-icon=""></span><span class="screen-reader-text">Pause</span>";
var pausedString = "<span aria-hidden="true" data-icon=""></span><span class="screen-reader-text">Play</span>";
$(document.body).on('click', '.btnPlayPause',function(e){
var target = this;
//console.log(target, current); //return;
if (current == target) {
target.innerHTML = pausedString;
target.parentNode.setAttribute('data-pos', myAudio.currentTime); //start from paused
myAudio.pause();
current = null;
} else { // current!=target
if (current != null) {
current.innerHTML = pausedString;
current.parentNode.setAttribute('data-pos', '0'); //reset position
target.parentNode.setAttribute('data-pos', myAudio.currentTime); //start from paused
}
current = target;
target.innerHTML = playingString;
if(myAudio.canPlayType && myAudio.canPlayType("audio/mpeg") != "") { // MP3
myAudio.src = target.parentNode.getAttribute('data-src');
} else if(myAudio.canPlayType && myAudio.canPlayType("audio/ogg") != "") { // OGG
myAudio.src = target.parentNode.getAttribute('data-src2');
} else {
return; // no audio support
}
myAudio.play();
myAudio.onloadeddata = function () {
myAudio.currentTime = parseFloat(target.parentNode.getAttribute('data-pos'));
};
}
});
$(document.body).on('click', '.btnMute',function(e){
myAudio.muted = !myAudio.muted;
$('.btnMute').each(function(){
if (myAudio.muted) {
this.innerHTML = "<span aria-hidden="true" data-icon=""></span><span class="screen-reader-text">Muted</span>";
} else {
this.innerHTML = "<span aria-hidden="true" data-icon=""></span><span class="screen-reader-text">Audible</span>";
}
});
});
});
//]]>
</script>
</head>
<body>
<audio id="myAudio"></audio>
<div class="mp3Player" data-src="a.mp3" data-src2="a.ogg" data-pos="0">
<button class="btnPlayPause button">►||</button>
<button class="btnMute button">MUTE</button>
<span class="infoLabel">Audio #1</span>
</div>
<div class="mp3Player" data-src="b.mp3" data-src2="b.ogg" data-pos="0">
<button class="btnPlayPause button">►||</button>
<button class="btnMute button">MUTE</button>
<span class="infoLabel">Audio #2</span>
</div>
</body>
</html>
jQuery代码+结果页。
javascript代码+结果页。
两个脚本都需要额外的现有.mp3文件来播放声音