使用单个控制器控制多个html5音轨 [英] Control multiple html5 audio tracks using a single controller
问题描述
我正在尝试为网站实现一个非常小的音频播放器。
I am trying to implement a very minimal audio player for a web site.
界面相当简单。它有一个播放/暂停按钮和一个静音/取消静音按钮。
The interface is rather simple. It has a play/pause button, and a mute/unmute button.
我遇到的问题是为不同的音轨实现同一个播放器的多个实例。
The problem I have is implementing multiple instances of the same player for different tracks.
播放器的javascript是：
The javascript for the player is:
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>";
}
});
});
这适用于单曲目。但是如果我在同一页面上有多个曲目，这就成了一个问题。
This works fine for a single track. But if I have multiple tracks on the same page, this becomes a problem.
我猜我需要对我定义myAudio变量的语法进行一些修改：
I am guessing that I need some modification to the syntax where I define the myAudio variable:
var myAudio = document.getElementById（myAudio）;
但是，我不知道如何改变它，所以相同的脚本可以控制多个音轨。
However, I am not sure how to change that so the same script can control multiple audio tracks.
如果可能的话，我也希望能够确保如果用户点击其他曲目上的播放按钮，当前播放的曲目将停止或暂停并且新曲目开始播放（因此2曲目不会互相播放）。
If possible, I also would like to be able to ensure that if the user clicks the play button on a different track, the track that is currently playing "stops" or is "paused" and the new track starts (so 2 tracks are not playing on top of each other).
推荐答案
这是基于jQuery的解决方案。要在IE8 / 7中使HTML5音频工作，请使用一些额外的闪回后备。
This is jQuery based solution. To make HTML5 audio work also in IE8/7 use some additional flash fallback.
<!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 code + result page.
javascript code + result page.
两个脚本都需要额外的现有.mp3文件来播放声音
Both scripts need additional existing .mp3 files to play the sound
这篇关于使用单个控制器控制多个html5音轨的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
