实现简单的自定义音乐播放器

这篇博客只是记录自己写的js插件，着重点在于js，而不是css或者html。所以在js方面会比较详细，而其他的就只是简单提提。

刚学前端js那会，只是应付式的把书看完了，demo也没写几个。碰巧这学期的网页设计课程接近期末，老师要求要完成一个期末设计。好吧，就拿它来练练手了。just do it，搞起。这段时间对音乐和MV比较感兴趣，于是就打算做一个分享音乐、MV的分享网站。要想做这样一个网站有样东西是必须要完成的，没错，就是一个有特色的播放器。

一：首先看看别人家（QQ音乐）的播放器：

分析：（1）：先提取出别人家播放器的几个功能。

1、播放/暂停 

2、左右切换歌曲 

3、调节音量

4、循环方式

5、弹出歌曲列表

6、显示音乐信息（专辑图片、歌手、歌名）

7、弹出/收起 播放器

8、显示播放进度条

（2）：再看布局

这只是我自己简单的分析，并没有根据它的源代码来分析（好像有点不负责任），所以布局可能与它代码实现的布局会有点出入。但最后的效果是一样的就没多大关系。

二：分析自己的简单播放器

既然是简单的，那么就不需要把别人家播放器的所有功能完成，当然，如果想做的话还是可以的。

（1）简单版本的播放器的功能。

1、弹出/收起 播放器

2、左右切换歌曲 

3、播放/暂停 

4、显示音乐信息（专辑图片、歌手、歌名）

（2）布局。功能的减少，意味着按钮的减少，所以布局相比会比较简单。毕竟是简单版本的嘛。。呵呵

不知道看懂了没有，毕竟每个程序猿都是灵魂画师...还是上最后的效果图，和设计图作对比吧。

三：代码实现

根据上面的设计图，用代码实现布局

html代码：

<!--开始设置播放器-->
<div class="playutil">
    <audio id="aud" src="source/MyLove.mp3"></audio>
    <div class="playtouming"></div>
    <!--开始设置布局-->
    <!-- 专辑图片-->
    <div class="songimgdiv"><img src="img/songimg.jpg"/></div>
    <!--播放按钮-->
    <div class="control">
        <p id="musicinfo">My Love - mylover</p>
        <div class="buttons">
            <a id="nextleftbtn" onMouseOver="overchangleft()" onMouseOut="outchangleft()" onclick="nextleft()">
		<img id="leftbutton" src="img/pleft.png"/>
	    </a>
            <a id="playbtn" onMouseOver="overchangplay()" onMouseOut="outchangplay()" onclick="musicplay()">
		<img id="playbutton" src="img/pplay.png"/>
	    </a>
            <a id="nextrightbtn" onMouseOver="overchangright()" onMouseOut="outchangright()" onclick="nextright()">
		<img id="rightbutton" src="img/pright.png"/>
	    </a>
        </div>
    </div>
    <!--右边开关按钮-->
    <div class="playdivbtn">
        <a id="on" onclick="onutil()"><img src="img/right.png"/></a>
        <a id="off" onclick="offutil()"><img src="img/left.png"/></a>
    </div>
</div>

这里说明一下，这个自定义播放器是基于html5的一个<audio>标签完成的，所以这个标签是必须的。而且我想做一个透明的效果，所以在里面放置了一个class=playtouming的<div>。目前只有这种方案实现透明效果。具体的可以查询其他资料。

css代码

.onutil {  
    transition: left ease .5s;  
    left: 0px;  
}  
.offutil{
    transition:left ease .5s;
    left: -462px;
}
.playutil {  
    z-index: 100;  
    position: fixed;  
    bottom: 125px;  
    left: -462px;  
    width: 485px;  
    height: 115px;  
    border: 1px solid #433B38;  
    border-radius: 0px 4px 4px 0px;  
    box-shadow: 3px 3px 5px 3px rgba(0, 0, 0, 0.5);  
}  
.playutil .playtouming {  
    width: 485px;  
    height: 115px;  
    opacity: 0.85;  
    filter: alpha(opacity=85);  
    background-color: #433B38;  
}  

.songimgdiv {  
    position: absolute;  
    top: 0px;  
    margin: 8px;  
    margin-left: 20px;  
    border: 1px solid #433B38;  
    border-radius: 4px;  
    box-shadow: 1px 1px 2px 2px rgba(255, 255, 255, 0.3);  
}  
.control {  
    position: absolute;  
    top: 0px;  
    left: 130px;  
    width: 330px;  
}  
.control>p {  
    width: 330px;  
    text-align: center;  
    margin: 15px auto;  
    color: #FFFFFF;  
    size: 5px;  
}  
.buttons {  
    text-align: center;  
}  
.buttons a {  
    margin: 0px 15px;  
}  
.playdivbtn {  
    width: 23px;  
    position: absolute;  
    top: 0px;  
    right: 0px;  
}

这里首先根据每一个功能来分析一下实现的思路。

前提，为了实现弹出/收起 播放器功能，添加了两个按钮。但这样子网页一加载完就会出现两个按钮（有一个在它下面），所以添加了一个方法，当网页加载完时让收起按钮隐藏，这时播放器是收起状态。

1、弹出/收起 播放器

给最右侧的播放器开关按钮点击事件，当播放器是收起的状态时点击，给它添加一个onutil样式(具体是什么可以看上面的css)，然后替换按钮图片为收起按钮。当播放器是打开状态时，先把onutil样式去掉，再给它添加offutil样式，再替换掉开关按钮图片。

2、左右切换歌曲&& 显示音乐信息（专辑图片、歌手、歌名）

因为这是纯前端的插件，所以歌曲本身不是从后台获取的。为了模拟这样的情况就先把歌曲路径放到一个数组里，歌曲存放在source的文件夹下。当切换歌曲时，有三样东西是需要改变的。一是歌曲，二是歌曲专辑图片（我这里没做..），三是歌曲信息。所以点击切换歌曲按钮时，首先判断下标是否越界，越界的话置0，让它从第一首歌曲开始播放。从数组里获取路径后，改变<audio>获取歌曲的路径，然后改变歌曲信息。当然，如果要改变专辑图片的话还要改变图片路径。

3、播放/暂停 

这个功能比较简单实现，就是给播放/暂停按钮点击事件，这个方法里面要做的就是改变<audio>的播放状态，然后替换按钮图片。

这里还实现了一个效果，就是鼠标经过按钮时都会发亮。其实就是替换了图片，给所有按钮添加鼠标经过事件，再换图片OK了。以上都是简单地说一下实现的思路，具体的实现方法还是主要看气质，不不不，错了。主要看代码！

js代码：

    <script type="text/javascript">
        $(document).ready(function(){
            $("#off").hide();
            $("#stopbtn").hide();
        });
    </script>
	var musicarray=new Array();
    var musicIndex=0;
    musicarray[0]="source/MyLove.mp3;-mylover";
    musicarray[1]="source/Clean.mp3;-Taylor";
    musicarray[2]="source/Gentleman.mp3;-unknown"
    //播放器div
    function onutil() {
        $(".playutil").removeClass("offutil");
        $(".playutil").addClass("onutil");
        $("#on").hide();
        $("#off").show();
    }
    function offutil() {
        $(".playutil").removeClass("onutil");
        $(".playutil").addClass("offutil");
        $("#off").hide();
        $("#on").show();
    }
    //播放器控件
    function musicplay() {
        var audio=document.getElementById('aud');
        if(audio.paused){
            audio.play();
            document.getElementById("playbutton").src="img/pstop.png";
        }else{
            audio.pause();
            document.getElementById("playbutton").src="img/pplay.png";
        }
    }

    //改变鼠标经过时图片
    function overchangleft() {
        document.getElementById("leftbutton").src="img/pleft_hover.png";
    }
    function overchangplay() {
        var audio=document.getElementById('aud');
        if(audio.paused) {
            document.getElementById("playbutton").src = "img/pplay_hover.png";
        }else{
            document.getElementById("playbutton").src = "img/ppstop_hover.png";
        }
    }
    function overchangright() {
        document.getElementById("rightbutton").src="img/pright_hover.png";
    }
    function outchangleft() {
        document.getElementById("leftbutton").src="img/pleft.png";
    }
    function outchangplay() {
        var audio=document.getElementById('aud');
        if(audio.paused) {
            document.getElementById("playbutton").src = "img/pplay.png";
        }else{
            document.getElementById("playbutton").src = "img/pstop.png";
        }
    }
    function outchangright() {
        document.getElementById("rightbutton").src="img/pright.png";
    }
    //上一首
    function nextleft() {
        if(musicIndex-1<0){
            var audio=document.getElementById('aud');
            audio.src=musicarray[musicarray.length-1].split(";")[0];
            audio.play();
            musicIndex=musicarray.length-1;
            $("#musicinfo").text(musicarray[musicIndex].split(";")[0].split("/")[1].split(".")[0]+musicarray[musicIndex].split(";")[1]);
            document.getElementById("playbutton").src="img/pstop.png";
        }else{
            var audio=document.getElementById('aud');
            audio.src=musicarray[musicIndex-1].split(";")[0];
            audio.play();
            musicIndex-=1;
            $("#musicinfo").text(musicarray[musicIndex].split(";")[0].split("/")[1].split(".")[0]+musicarray[musicIndex].split(";")[1]);
            document.getElementById("playbutton").src="img/pstop.png";
        }
    }
    //下一首
    function nextright(){
        if(musicIndex+1>=musicarray.length){
            var audio=document.getElementById('aud');
            audio.src=musicarray[0].split(";")[0];
            audio.play();
            musicIndex=0;
            $("#musicinfo").text(musicarray[musicIndex].split(";")[0].split("/")[1].split(".")[0]+musicarray[musicIndex].split(";")[1]);
            document.getElementById("playbutton").src="img/pstop.png";
        }else{
            var audio=document.getElementById('aud');
            audio.src=musicarray[musicIndex+1].split(";")[0];
            audio.play();
            musicIndex+=1;
            $("#musicinfo").text(musicarray[musicIndex].split(";")[0].split("/")[1].split(".")[0]+musicarray[musicIndex].split(";")[1]);
            document.getElementById("playbutton").src="img/pstop.png";
        }
    }

四：结尾

这个自定义的播放器功能还是比较简单的，实现起来也不算复杂。所以有兴趣的可以继续完善。最后希望一起努力，不忘初心。