JS写一个漂亮的音乐播放器

先放上效果图：

正如图中所展示的播放器那样，我们用HTML+CSS+JS将这个效果实现出来。

HTML页面布局

<div class="music">

		<div class="photo">

			<div class="photo_pic" id="photo_pic"><img src="" width="100%"><div class="cd"></div></div>

		</div>

		<div class="progress">

			<h3 style="text-align: center;">大咖解读青春期包皮手术</h3>

			<time>00:00</time><time style="float:right" id="time2">00:00</time>

			<div class="progress_obj clear">

				<div class="progress_bar" id="progress_bar"><div class="progress_cube" id="progress_cube"></div></div>

			</div>

			<div class="progress_obj clear">

				<div class="ctrl_btn">

					<div id="prev_btn" class="prev_btn btn"></div>

					<div id="play_btn" class="play_btn btn"></div>

					<div id="next_btn" class="next_btn btn"></div>

				</div>

				<div class="ctrl_info">

					<div class="vol btn"><div class="vol_bar" id="vol_bar"><div class="vol_cube" id="vol_cube"></div></div></div>

					<div class="list btn" id="list" style=""><img src="/2017mobile/images/share.png" style="width:50%;padding-top:2%;"><div id="list_con"></div></div>

				</div>

				<audio id="audio_src">

					<source src="" type="audio/mpeg">

					</audio>

				</div>

			</div>

		</div>

		<div class="clear"></div>

		<div class="choose" style="display: none">

			<div class="choose_obj choose_like">

				<div class="icon" id="icon1">

					

				</div>

				<span>喜欢</span>

			</div>

			<div class="choose_obj choose_share">

				<div class="icon" id="icon2">

					

				</div>

				<span>收藏</span>

			</div>

		</div>

		<div class="lyric">

			<div class="lyric_tit" id="lyric_tit"></div>

			<div id="lyric_txt"></div>

		</div>

	</div>

将自己想要的样式和按钮统统展示到前端页面上来，然后就是添加样式：

.music{  width: 100%;  border-right: 1px solid rgba(255,255,255,0.5);  box-sizing: border-box; }

.photo{  width: 30%;float:left;}

.photo_pic{ border-radius: 50%;  /* box-shadow:0 0 2px #666, 0 0 10px #666;position: relative;*/ }

.photo_pic img{/*border-radius: 100%*/}

.choose{  height:150px;  }

.choose_obj{  width: 50%;  float: left;  text-align: center;  color: #fff  }

.icon{  margin-top: 40px;  height: 50px;  font-size:50px;  line-height: 50px;  font-family: "iconfont";  cursor: pointer;  text-shadow: 2px 2px 0px #666;  }

.icon.yellow+span{  color: yellow;  }

.icon.pink+span{  color: #f7759f;  }

.choose_obj span{  display: block;  height: 30px;  line-height: 30px;  font-family: "微软雅黑";  font-size: 14px;  }

.cd{display: none;  width: 10px;  height: 10px;  position: absolute;  top:50%;  left: 50%;  margin-top: -15px;  margin-left: -15px;  background: #666;  border: 10px solid #fff;  box-shadow: 0 0 1px #000;  border-radius: 50%;  }

.progress{width: 67%; float:right;  font-family: "iconfont";margin-right: 1%; }

.progress h3{font-size:2rem;}

.lyric{  width: 100%;  }

time{  font-size: 12px;  width: 49px;  text-align: center;  color: #000000;  height: 25px;  line-height: 25px;  float: left;  }

.progress_bar{  position: relative;  width:99%;height: 2px;  margin-top: 5px;  background-color: #000000;cursor: pointer;  }

.progress_cube{  position: absolute;  left: 0;  top: -5px;  width: 4px;  height: 4px;  background-color: #fff;  border:5px solid #064895;  border-radius: 50%;  cursor: pointer;  }

.progress_obj{  line-height: 30px;  color: #000000;font-weight: bold; margin-top:5px;}

.ctrl_btn{  width: 40%;  float: left;  }

.ctrl_btn .btn{  color:black;width: 33.3%;float: left;  text-align: center;  cursor: pointer;  }

.play_btn{  font-size:18px;}

.prev_btn{font-size:12px;}

.next_btn{font-size:12px;}

.ctrl_info{  width:55%;  float: left;  }

.vol{  width:76%;height: 100%;  float: left;margin-left: 4%; color:black;}

.vol_bar{  position: relative;  width:68%;  float: right;  height: 2px;  background-color:#000000;  margin-top: 13px;margin-right:10%; }

.vol_cube{  position: absolute;  left: 0;  top: -4px;  width: 3px;  height: 3px;  background-color: #fff;  border:4px solid #064895;  border-radius: 50%;  cursor: pointer;  }

.list{ width: 20%; height: 100%;  float: left;  text-align: center;  }

.lyric_tit{  color: #f00;  text-align: center;  font-weight: 700;  margin-top: 3px;  }

.lyric_con{  position: relative;  line-height: 26px;  color: #555;  font-size: 14px;  padding: 0px 50px ;  text-align: center;  height: 150px;  overflow: hidden;  margin-top: 15px;  }

#lyric_txt{   left: 0;  top:0;  width: 100%;  }

.lyric_con p.played{  color: #999;  }

.lyric_con p.active{  color: #064895;  font-size: 20px;  font-weight: 700;  }

.audio{  display: none;  }

#list{  position: relative;  cursor: pointer;  }

#list_con{  position: absolute;  bottom: 30px;  right: 0px;  width: 150px;  height: 100px;  color: #666;  padding: 10px 0;  border-radius: 5px;  background: rgba(255,255,255,.8);  font-family: "微软雅黑";  font-size: 14px;  cursor: pointer;  display: none;  }

.anniu{margin: 0rem auto;}

.audio_rmtj{margin: 1.3rem auto;}

.audio_tag{width: 93%; margin: 1.3rem auto;}

.audio_tag li{float:left;width: 22.4%; margin: 1%; background: #f5f5f5; border-radius: 0.3rem;border:1px solid #e8e7e7;text-align: center;font-size: 1.8rem;color:#333; line-height: 210%;display: inline }

.audio_tag li a{display: block}

样式不是死的，所以可以灵活改变。

接下来是JS内容，JS要实现的是播放功能，以及拖动播放条功能，还有快进后退功能，再加上分享功能，歌词跟随播放功能

<script type="text/javascript">

    function getTime() {

        setTimeout(function () {

            var duration = $("#audio_src")[0].duration;

            if(isNaN(duration)){

                getTime();

            }

            else{

                var music_time0 =Math.floor( $("#audio_src")[0].duration);

                var music_time = formatSeconds(music_time0);

                $("#time2").html(music_time);

            }

        }, 10);

    }

    getTime();

    var lrc_content=$("#lrc_content").val();

    //data

    var lyric=[{

        'name':"",

        'img':'/2017mobile/images/photo1.jpg',

        'audio_src':'/2017mobile/music/zennenggufuchunguang.mp3',

        'content':lrc_content

    }];

    window.onload=function(){

        var play_btn=document.getElementById("play_btn");

        var prev_btn=document.getElementById("prev_btn");

        var next_btn=document.getElementById("next_btn");

        var audio=document.getElementsByTagName("audio")[0];

        var initTime=document.getElementsByTagName("time")[0];

        var time=document.getElementsByTagName("time")[1];

        var progress_bar=document.getElementById("progress_bar");

        var progress_cube=document.getElementById("progress_cube");

        var vol_bar=document.getElementById("vol_bar");

        var vol_cube=document.getElementById("vol_cube");

        var lyric_txt=document.getElementById("lyric_txt");

        var icon1=document.getElementById("icon1");

        var icon2=document.getElementById("icon2");

        var lyric_tit=document.getElementById("lyric_tit");

        var list_con=document.getElementById("list_con");

        var list_item=list_con.getElementsByTagName("p");

        var songIndex=0;

        var container=document.getElementById("container");

        var obj;

        function config(){

            this.play_mark=true;

            this.duration=audio.duration;

            this.play_btn="";

            this.vol=audio.volume;

            this.timer=null;

            this.rotateSum=0;

            this.icon1=icon1.innerHTML;

            this.icon2=icon2.innerHTML;

            this.icon1_co=icon1.style.color;

            this.endplay_btn="";

            this.endicon1=icon1.innerHTML;

            this.endicon2="";

        }

        obj= new config();

        //列表控制

        var allSong="";

        for(var song=0;song<lyric.length;song++)

        {

            allSong+="<p>"+lyric[song].name+"</p>"

        }

        list_con.innerHTML=allSong;

        list_con.style.height=lyric.length*30+"px";

        for(var listIndex=0;listIndex<list_item.length;listIndex++)

        {

            list_item[listIndex].index=listIndex;

            list_item[listIndex].onclick=function(ev)

            {

                var ev=ev||window.event;

                ev.stopPropagation();

                songIndex=this.index;

                change_music();

            }

        }

        list_con.style.display="none";

        list.onclick=function()

        {

            if(list_con.style.display=="none")

            {

                list_con.style.display="block";

            }

            else{

                list_con.style.display="none";

            }

        }

        //下一首

        next_btn.onclick=function(){

            songIndex++;

            change_music();

        }

        prev_btn.onclick=function(){

            songIndex--;

            change_music();

        }

        function change_music()

        {

            clearInterval(obj.timer);

            if(songIndex>=lyric.length)

            {songIndex=0}

            else if(songIndex<0)

            {songIndex=lyric.length}

            obj= new config();

            iconinit();

            audioInit();

            playedTime();

            lyric_ctrl();

        }

        //初始化总时长、音量等

        function audioInit()

        {

            time.innerHTML=format(audio.duration);

            audio.volume=0.5;

            play_btn.innerHTML=obj.play_btn;

            vol_cube.style.left=audio.volume*vol_bar.offsetWidth+"px";

            lyric_tit.innerText=lyric[songIndex].name;

            if(lyric[songIndex].img==''){

                $("#photo_pic img").attr("src","/2017mobile/images/img_no.jpg");

            }else{

                $("#photo_pic img").attr("src",lyric[songIndex].img);

            }

            audio.src=lyric[songIndex].audio_src;

            progress_cube.style.left=0;

        }

        audioInit();

        //播放时间

        audio.addEventListener("timeupdate",function()

        {

            playedTime();

        })

        function playedTime(){

            if(audio.currentTime==audio.duration)

            {

                next_btn.onclick();

                play_btn.onclick();

            }

            var n=audio.currentTime/audio.duration;

            progress_cube.style.left=n*progress_bar.offsetWidth+"px";

            initTime.innerHTML=format(audio.currentTime);

            var id_num=parseInt(audio.currentTime);

            var lyric_p=document.getElementsByTagName("p");

            for(var i=0;i<lyric_p.length;i++)

            {

                lyric_p[i].index=i;

            }

            if(document.getElementById("lyric"+id_num))

            {

                var obj=document.getElementById("lyric"+id_num);

                for(var i=0;i<obj.index;i++)

                {

                    lyric_p[i].className="played";

                }

                for(var j=obj.index;j<lyric_p.length;j++)

                {

                    lyric_p[j].className="";

                }

                obj.className="yellow active";

            }

        }

        function format(time)

        {

            var time=parseInt(time);

            var m=parseInt(time/60);

            var s=parseInt(time%60);

            m=zero(m);

            s=zero(s);

            function zero(num)

            {

                if(num<10)

                {

                    num="0"+num;

                }

                return num;

            }

            return m+":"+s;

        }

        //拖拽进度条

        progress_cube.onmousedown=function(ev)

        {

            var ev=ev||window.event;

            var initX=ev.clientX-this.offsetLeft;

            this.onmousemove=function(ev)

            {

                var ev=ev||window.event;

                var x=ev.clientX-initX;

                if(x<0){x=0}

                if(x>progress_bar.offsetWidth-14){x=progress_bar.offsetWidth-14}

                play_ctrl(x);

            }

            document.onmouseup=function()

            {

                document.onmousemove=null;

                progress_cube.onmousemove=null;

            }

        }

        function play_ctrl(x){

            var timego=x/progress_bar.offsetWidth*audio.duration;

            progress_cube.style.left=x+"px";

            audio.currentTime=timego;

            playedTime();

        }

        //点击进度条位置

        progress_bar.onclick=function(ev)

        {

            var ev=ev||window.event;

            var dis=ev.clientX-(container.offsetLeft+progress_bar.offsetLeft)-7;

            progress_cube.style.left=dis+"px";

            play_ctrl(dis);

        }/**/

        //拖动音量键

        vol_cube.onmousedown=function(ev)

        {

            var ev=ev||window.event;

            var initX=ev.clientX-vol_cube.offsetLeft;

            this.onmousemove=function(ev)

            {

                var ev=ev||window.event;

                var x=ev.clientX-initX;

                if(x<0){x=0}

                if(x>vol_bar.offsetWidth-11){x=vol_bar.offsetWidth-11}

                var volresult=x/vol_bar.offsetWidth;

                this.style.left=x+"px";

                audio.volume=volresult;

            }

            document.onmouseup=function()

            {

                document.onmousemove=null;

                vol_cube.onmousemove=null;

            }

        }

        //点击播放

        play_btn.onclick=function()

        {

            clearInterval(obj.timer);

            if(obj.play_mark)

            {

                this.innerHTML=obj.endplay_btn;

                audio.play();

                obj.timer=setInterval(function()

                { obj.rotateSum=obj.rotateSum+0;

                    photo_pic.style.transform="rotate("+obj.rotateSum+"deg)";

                },30)

            }

            else{

                this.innerHTML=obj.play_btn;

                audio.pause();

            }

            obj.play_mark=!obj.play_mark;

        }

        //歌词处理

        //喜欢 收藏

        icon2.onclick=function()

        {

            if(this.innerHTML==obj.icon2)

            {

                this.innerHTML=obj.endicon2;

                this.style.color="yellow";

                this.className="icon yellow";

            }

            else{

                this.innerHTML=obj.icon2;

                this.style.color="#fff";

                this.className="icon";

            }

        }

        icon1.onclick=function()

        {

            if(this.style.color==obj.icon1_co)

            {

                this.innerHTML=obj.endicon1;

                this.style.color="#f7759f";

                this.className="icon pink";

            }

            else{

                this.innerHTML=obj.icon1;

                this.style.color=obj.icon1_co;

                this.className="icon";

            }

        }

    };

    //秒转分

    function formatSeconds(value) {

        var theTime = parseInt(value);// 秒

        var theTime1 = 0;// 分

        var theTime2 = 0;// 小时

        if(theTime > 60) {

            theTime1 = parseInt(theTime/60);

            theTime = parseInt(theTime%60);

            if(theTime1 > 60) {

                theTime2 = parseInt(theTime1/60);

                theTime1 = parseInt(theTime1%60);

            }

        }

        var result = ""+parseInt(theTime);

        if(theTime1 > 0) {

            result = ""+parseInt(theTime1)+":"+result;

        }

        if(theTime2 > 0) {

            result = ""+parseInt(theTime2)+":时"+result;

        }

        return ( result);

    };

</script>

在这个示例中，JS库基于jq就行。功能设置在JS中一清二楚，所以按着功能一步一步来还是很容易上手的。

JS写一个漂亮的音乐播放器的相关教程结束。