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

2019独角兽企业重金招聘Python工程师标准>>>

我们都知道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.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.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);
}

转载于:https://my.oschina.net/u/2619218/blog/1502864