JS寫一個漂亮的音樂播放器

先放上效果圖：

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寫一個漂亮的音樂播放器

繼續閱讀

主流浏覽器四大綜合性能測試

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條