HTML+純JS製作音樂播放器
阿新 • • 發佈：2018-12-21
該篇文章會教你通過JavaScript製作一個簡單的音樂播放器。包括播放、暫停、上一曲和下一曲。
閱讀本文章你需要對HTML、CSS和Javascript有基本的瞭解。
話不多說，先上圖。
emmm。。。這樣看起來有點單調。
我們把它加在網頁上試試。
具體效果可以去我的個人網站檢視http://tcxqq.top
好了，成品已經展示了接下來，開幹吧！
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/music.css"> </head> <body> <audio src="" id="mymusic"></audio> <div class="music"> <div class="pic_div"> <img src="images/music/pictures/disc.png" alt="" class="disc"> <img src="images/music/pictures/default.jpg" alt="" id="music_pic"> <span class="dot"></span> <div class="music_program"> <div id="prograss"></div> </div> <div class="time"> <p><span id="currenttime">0:00</span><span>/</span><span id="duration">0:00</span></p> </div> <div class="music_menu"> <span onClick="backMusic()"></span> <span onClick="playPause()" id="playbtn"></span> <span onClick="nextMusic()"></span> </div> </div> </div> </body> <script src="js/music.js"></script> </html>
先建好基本的HTML框架。
<audio src="" id="mymusic"></audio>為我們的音訊
<div class="music">...</div>裡面的部分為音樂的控制元件以及進度條，圖片等。
<img src="images/music/pictures/disc.png" alt="" class="disc">為旋轉的碟片
<img src="images/music/pictures/default.jpg" alt="" id="music_pic">為音樂專輯圖片
<span class="dot"></span>為 碟片中間的小圓點
<div class="music_program"><div id="prograss"></div></div>
我們通過DIV巢狀一個div來作為音樂的進度條（圖片紅色部分），第一個div固定寬度，第二個div用%來設定寬度。
<p><span id="currenttime">0:00</span><span>/</span><span id="duration">0:00</span></p> 為時間顯示 播放時長和總時長
<div class="music_menu"> <span onClick="backMusic()"></span> <span onClick="playPause()" id="playbtn"></span> <span onClick="nextMusic()"></span> </div>
控制選單按鈕 上一曲 播放/暫停 下一曲
下面是具體的css程式碼
@charset "utf-8"; /* CSS Document */ .music { height: 150px; width: 150px; background:rgba(98,91,91,0.9); } .pic_div { position: relative; } .dot { width: 15px; height: 15px; background: #464545; position: absolute; border: 2px solid white; border-radius: 50%; top: 40px; left: 85px; } .disc { width: 100px; position: absolute; right: 5px; transform: rotate(30deg); } #music_pic { width: 100px; position: absolute; } .music_program { height: 2px; width: 100px; background: #555; position: relative; top: 100px; } .music_program div { height: 100%; width: 0%; background: red; } .time { width: 100px; height: 20px; position: relative; top: 85px; overflow: hide; } .time p { padding-left: 33px; } .time p span:nth-of-type(2) { padding: 0 5px; } .music_menu { width: 150px; height: 25px; position: relative; top: 85px; } .music_menu span { width: 30px; height: 25px; display: inline-block; cursor: pointer; } .music_menu span:nth-of-type(1) { margin-left: 8px; background: url(../images/music/pictures/back.png) no-repeat 7px; } .music_menu span:nth-of-type(2) { margin-left: 14px; background: url(../images/music/pictures/play.png) no-repeat 10px; } .music_menu span:nth-of-type(3) { margin-left: 14px; background: url(../images/music/pictures/forward.png) no-repeat 7px; }
至於圖片資源的話，博主是在站長素材下載的
連結?http://sc.chinaz.com/psd/130622574580.htm
接下來是最重要的Js部分！
// JavaScript Document var music=document.getElementById("mymusic"); var prograss=document.getElementById("prograss"); var curtxt=document.getElementById("currenttime"); var duration=document.getElementById("duration"); var music_pic=document.getElementById("music_pic"); var deg=0;//旋轉角度 var disctimer,prograsstimer;//碟片計時器,進度條計時器 var musicindex=0;//音樂索引 var musics=new Array("nicengshishaonian.mp3","huanian.mp3","chunfengshili.mp3");//音樂陣列 var music_pics=new Array("000002","000001","000001"); //旋轉碟片 var disc=document.getElementsByClassName('disc'); //音樂時間顯示 function curtime(txt,misic) { if(music.currentTime<10) { txt.innerHTML="0:0"+Math.floor(music.currentTime); }else if(music.currentTime<60) { txt.innerHTML="0:"+Math.floor(music.currentTime); } else { var minet=parseInt(music.currentTime/60); var sec=music.currentTime-minet*60; if(sec<10) { txt.innerHTML="0"+minet+":"+"0"+parseInt(sec); } else { txt.innerHTML="0"+minet+":"+parseInt(sec); } } } //播放暫停 function playPause() { var btn=document.getElementById("playbtn"); if(music.paused) { music.play(); clearInterval(disctimer);//清除碟片的定時器 btn.style.background="url(images/music/pictures/pause.png) no-repeat 10px";//改變播放暫停鍵的圖示 disctimer=setInterval(function(){ disc[0].style.transform="rotate("+deg+"deg)"; deg+=5; //每秒設定進度條長度 },100); prograsstimer=setInterval(function(){ prograss.style.width=(music.currentTime)*100 / (music.duration)+"%"; curtime(curtxt,music); if(music.currentTime>=music.duration-1)//片尾跳轉下一曲 { musicindex++;//音樂索引加一 if(musicindex>=musics.length)//如果音樂索引超過長度，將音樂索引清零 { musicindex=0; } getMusic(); music.play();//過載音樂後進行播放 } },1000); } else { music.pause();//停止音樂 btn.style.background="url(images/music/pictures/play.png) no-repeat 10px"; clearInterval(disctimer);//清除碟片滾動的定時器 clearInterval(prograsstimer);//清除進度條的定時器 } } //下一曲 function nextMusic() { musicindex++;//音樂索引加一 if(musicindex>=musics.length)//如果音樂索引超過長度，將音樂索引清零 { musicindex=0; } getMusic(); music.play(); } //上一曲 function backMusic() { musicindex--; if(musicindex<0)//如果索引小於0，將索引變為最大值 { musicindex=musics.length-1; } getMusic(); music.play(); } //讀取音樂 function getMusic() { music.src="images/music/"+musics[musicindex];//改變音樂的SRC music_pic.src="images/music/pictures/"+music_pics[musicindex]+".jpg"; if(music.readyState="complete") { setTimeout(function(){ duration.innerHTML=parseInt(music.duration/60)+":"+parseInt(music.duration%60); },1000);//一秒後讀取音樂的總時長 } } window.onload=function(){ getMusic(); }
呃呃呃，這次博主接受批評，對程式碼進行了大量的註釋，方便大家閱讀。
So 這裡就不過多介紹了，這裡用的三首歌都是博主喜歡的。
由於博主的網站不支援中文？！所以改成拼音了。
第一首是SHE的我曾是少年（喜歡SHE的基本都20+了吧），還有鹿先森樂隊的兩首。
emmm歌曲自己喜歡什麼就加什麼吧！
OK，這就是一個完整的播放器了。
簡單吧。
歡迎大家學習交流，
我是 本該如此 ，荊軻刺秦王。