我们都知道HTML5给我们提供了"controls"这个插件，可是这个插件却比较丑，还不能实现上一首下一首的播放，以及进度条的手动改变等功能，那么如何自己设计一个控制音乐播放的控制器呢？下图是我设计的控制器。
1.获取总时间以及当前播放时间的实现：
var oTotal=document.getElementsByClassName("total_time")[0];
window.οnlοad=function () {
oAudio.addEventListener("canplay", function() {
oTotal.innerHTML=format(oAudio.duration); //获取总时间
});
}
这里添加监听器的目的是解决获取到的总时间显示为NaN：NaN,其中还用到一个format函数，因为通过oAudio.duration获得的是以秒为单位的数据，所以要将其转化成分：秒的格式需要一个格式转换函数：
//时间的格式化
function format(t) {
var m=Math.floor(t/60);
var s=Math.floor(t%60);
if(m<=9) //小于10时，在前面填0
m="0"+m;
if(s<=9)
s="0"+s;
return m+":"+s;
}
2.播放、暂停上一首下一首的设置:
此功能的实现比较简单，在JS中只需通过onClick点击事件给audio的src赋值。
HTML代码：
00:00
00:00
这样在JS中需要通过onClick点击事件给audio的src赋值,下面以播放暂停按钮为例。
var oAudio=document.getElementById("audio");
var oPlay=document.getElementByClassName("play")[0];
var clickNum=0; //用于判断是要播放还是暂停
oAudio.setAttribute("src","/audioFile/1.mp3"); //给audio对象设置src属性
oPlay.onclick()=function(){
if(clickNum==0){
oAudio.play(); //播放
oPlay.innerHTML=""; //改变图标
clickNum=1;
}else{
oAudio.pause(); //暂停
oPlay.innerHTML="";
clickNum=0;
}
}
3.手动改变进度的实现:总体思路即通过windows的ev对象获取鼠标的移动位置，判断其距本模块最左端的位置，从而设置颜色、小圆的位置以及currentTime
var oProgress=document.getElementsByClassName("range")[0];
var oMaxProgress=document.getElementsByClassName("progress")[0];
var oProgress_circle=document.getElementsByClassName("circle")[0];
var oCurrent=document.getElementsByClassName("current_time")[0];
oAudio.play();
setInterval(setProgress,1000); //通过定时器设置进度的自动改变
//设置进度的自动移动
function setProgress() {
oCurrent.innerHTML=format(oAudio.currentTime); //设置当前时间的显示
oProgress.style.width=(oAudio.currentTime)/(oAudio.duration)*780+"px"; //780px是总宽度
oProgress_circle.style.left=oProgress.style.width;
}
//可以点击轨道改变进度
oMaxProgress.οnmοusedοwn=function (ev) {
changeProgress(ev);
}
//鼠标拖动小圆改变进度
oProgress_circle.οnmοusedοwn=function (ev) {
document.οnmοusemοve=function (ev) {
changeProgress(ev);
}
document.onmouseup = function () { //当鼠标松开后关闭移动事件和自身事件
document.onmousemove = null;
document.onmouseup = null;
}
return false;
}
function changeProgress(ev){
var ev=ev||event;
var l = ev.clientX - 270; //获取圆距左端的距离
if(l<0){
l=0;
}
else if (l > 780) {
l = 780;
}
oProgress_circle.style.left=l+"px";
oProgress.style.width=l+"px";
oAudio.currentTime=(l/780)*oAudio.duration; //设置当前时间，以改变真正的播放进度
oCurrent.innerHTML=format(oAudio.currentTime); //当前时间
}
4.播放模式的切换：
播放模式有三种：随机播放、单曲循环、列表循环。
(1)随机播放的实现需要用到随机数生成函数，将生成的随机数作为歌曲的一个下标，获取响应的歌曲信息，从而播放。
(2)单曲循环的实现比较简单，只需要将audio对象的loop属性设置成true即可。
(3)列表循环的实现只需要触发下一首的点击事件即可。
在做时发现歌曲播放完毕并不会自动切换到下一首，需要对audio的"ended"属性添加监听事件。
var oBofangModel=document.getElementsByClassName("bofangModel")[0];
var clickNum3=0;
//刚加载，clickNum3=0，不触发点击事件,默认初始为随机播放
if(clickNum3==0){
oAudio.loop=false;
oAudio.addEventListener("ended", suiji, false); //监听函数不能加括号
}
//播放模式的切换
oBofangModel.οnclick=function () {
if(clickNum3==0){
oBofangModel.innerHTML="";
clickNum3=1;
oAudio.loop=false;
// oAudio.removeEventListener("ended",function () {..},false); //匿名取消事件无效
oAudio.removeEventListener("ended",suiji,false);
oAudio.addEventListener("ended", liebiao, false);
}
else if(clickNum3==1){
oBofangModel.innerHTML="";
clickNum3=2;
oAudio.loop=true;
}
else if(clickNum3==2){
oBofangModel.innerHTML="";
clickNum3=0;
if(oAudio!=null){
oAudio.loop=false;
oAudio.removeEventListener("ended",liebiao,false);
oAudio.addEventListener("ended", suiji, false);
}
}
}
//列表循环，触发下一首的点击事件
function liebiao(){
oNext.onclick();
}
//产生随机数，自动播放
function suiji() {
var m=Math.floor(Math.random()*oMusic.length);//产生随机数，范围为0到oMusic.length-1,
playSong(m);
}
//播放当前歌曲
function playSong(index) {
localStorage.setItem("index",index); //存储到本地，方便存取
setInfo();
oAudio.play();
setInterval(setProgress,1000);
}
//设置列表信息
function setInfo() {
var m=parseInt(localStorage.getItem("index"));
oAudio.setAttribute("src",oMusic[m].src);
}
html制作自动切换音乐按钮代码 HTML5+JavaScript+CSS实现音乐播放器——难点二:自己设计一个控制音乐播放的控制器...
