HTML5+JavaScript+CSS实现音乐播放器——难点二:自己设计一个控制音乐播放的控制器

       我们都知道HTML5给我们提供了"controls"这个插件，可是这个插件却比较丑，还不能实现上一首下一首的播放，以及进度条的手动改变等功能，那么如何自己设计一个控制音乐播放的控制器呢？下图是我设计的控制器。

1.获取总时间以及当前播放时间的实现：

var oTotal=document.getElementsByClassName("total_time")[0];
window.onload=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代码：

<audio src="" id="audio"></audio>
<div class="foot">
<i class="iconfont icon-kuaitui" title="上一首"></i>
<span class="play"><i class="iconfont icon-zanting" title="播放"></i></span>
<i class="iconfont icon-kuaijin" title="下一首"></i>
<div class="progress">
<span class="current_time">00:00</span>
<div class="progress_range"><div class="range"></div><div class="circle"></div></div>
<span class="total_time">00:00</span>
</div>
<div class="model">
<div class="volume"><span class="iconfont icon-shengyin" title="静音"></span></div>
<div class="volume_range"><div class="range"></div><div class="circle"></div></div>
<div class="bofangModel"><span class="iconfont icon-suiji"  title="随机播放"></span></div>
</div>
</div>

这样在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="<i class='iconfont icon-bofang' title='暂停'></i>";  //改变图标
clickNum=1;
}else{
oAudio.pause();    //暂停
oPlay.innerHTML="<i class='iconfont icon-zanting' title='播放'></i>";
clickNum=0;
}
}

3.手动改变进度的实现:

总体思路即通过windows的ev对象获取鼠标的移动位置，判断其距本模块最左端的位置，从而设置颜色、小圆的位置以及currentTime

var oProgress=document.getElementsByCl
a1d2
assName("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.onmousedown=function (ev) {
changeProgress(ev);
}
//鼠标拖动小圆改变进度
oProgress_circle.onmousedown=function (ev) {
document.onmousemove=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.onclick=function () {
if(clickNum3==0){
oBofangModel.innerHTML="<span class='iconfont icon-liebiaoxunhuan' title='列表循环'></span>";
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="<span class='iconfont icon-danquxunhuan1' title='单曲循环'></span>";
clickNum3=2;
oAudio.loop=true;
}
else if(clickNum3==2){
oBofangModel.innerHTML="<span class='iconfont icon-suiji' title='随机播放'></span>";
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);
}