JavaScript如何實(shí)現(xiàn)簡(jiǎn)單音樂播放器

發(fā)布時(shí)間：2020-08-03 09:51:53 來源：億速云閱讀：264 作者：小豬欄目：web開發(fā)

小編這次要給大家分享的是JavaScript如何實(shí)現(xiàn)簡(jiǎn)單音樂播放器，文章內(nèi)容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。

閱讀本文章你需要對(duì)HTML、CSS和Javascript有基本的了解。

話不多說，先上圖。

這樣看起來有點(diǎn)單調(diào)。

我們把它加在網(wǎng)頁(yè)上試試。

JavaScript如何實(shí)現(xiàn)簡(jiǎn)單音樂播放器

具體效果可以去我的個(gè)人網(wǎng)站查看http://tcxqq.top

好了，成品已經(jīng)展示了接下來，開干吧！

<!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>里面的部分為音樂的控件以及進(jìn)度條，圖片等。
<img src="images/music/pictures/disc.png" alt="" class="disc">為旋轉(zhuǎn)的碟片
<img src="images/music/pictures/default.jpg" alt="" id="music_pic">為音樂專輯圖片
<span class="dot"></span>為碟片中間的小圓點(diǎn)
<div class="music_program"><div id="prograss"></div></div>
我們通過DIV嵌套一個(gè)div來作為音樂的進(jìn)度條（圖片紅色部分），第一個(gè)div固定寬度，第二個(gè)div用%來設(shè)置寬度。
<p><span id="currenttime">0:00</span><span>/</span><span id="duration">0:00</span></p> 為時(shí)間顯示播放時(shí)長(zhǎng)和總時(shí)長(zhǎng)
<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;
}

至于圖片資源的話，博主是在站長(zhǎng)素材下載的

鏈接🔗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;//旋轉(zhuǎn)角度
 var disctimer,prograsstimer;//碟片計(jì)時(shí)器,進(jìn)度條計(jì)時(shí)器
 var musicindex=0;//音樂索引
 var musics=new Array("nicengshishaonian.mp3","huanian.mp3","chunfengshili.mp3");//音樂數(shù)組
 var music_pics=new Array("000002","000001","000001");
 
 
 //旋轉(zhuǎn)碟片
 var disc=document.getElementsByClassName('disc');
 
 //音樂時(shí)間顯示
 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);//清除碟片的定時(shí)器
  btn.style.background="url(images/music/pictures/pause.png) no-repeat 10px";//改變播放暫停鍵的圖標(biāo)
  disctimer=setInterval(function(){
  disc[0].style.transform="rotate("+deg+"deg)";
  deg+=5;
  
  //每秒設(shè)置進(jìn)度條長(zhǎng)度
  },100);
  prograsstimer=setInterval(function(){
  prograss.style.width=(music.currentTime)*100 / (music.duration)+"%";
  curtime(curtxt,music);
  if(music.currentTime>=music.duration-1)//片尾跳轉(zhuǎn)下一曲
  {
  musicindex++;//音樂索引加一
  if(musicindex>=musics.length)//如果音樂索引超過長(zhǎng)度，將音樂索引清零
  {
  musicindex=0;
  }
  getMusic();
  music.play();//重載音樂后進(jìn)行播放
  }
  },1000);
 }
 else
 {
  music.pause();//停止音樂
  btn.style.background="url(images/music/pictures/play.png) no-repeat 10px";
  clearInterval(disctimer);//清除碟片滾動(dòng)的定時(shí)器
  clearInterval(prograsstimer);//清除進(jìn)度條的定時(shí)器
 }
 }
 
 //下一曲
 function nextMusic()
 {
 musicindex++;//音樂索引加一
 if(musicindex>=musics.length)//如果音樂索引超過長(zhǎng)度，將音樂索引清零
 {
 musicindex=0;
 }
 getMusic();
 music.play();
 }
 
 //上一曲
 function backMusic()
 {
 musicindex--;
 if(musicindex<0)//如果索引小于0，將索引變?yōu)樽畲笾?
 {
 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);//一秒后讀取音樂的總時(shí)長(zhǎng)
  
 }
 }
 
 
 window.onload=function(){
 getMusic();
 
 }

這次博主接受批評(píng)，對(duì)代碼進(jìn)行了大量的注釋，方便大家閱讀。

So 這里就不過多介紹了，這里用的三首歌都是博主喜歡的。

由于博主的網(wǎng)站不支持中文！所以改成拼音了。

第一首是SHE的我曾是少年（喜歡SHE的基本都20+了吧），還有鹿先森樂隊(duì)的兩首。

歌曲自己喜歡什么就加什么吧！

OK，這就是一個(gè)完整的播放器了。

看完這篇關(guān)于JavaScript如何實(shí)現(xiàn)簡(jiǎn)單音樂播放器的文章，如果覺得文章內(nèi)容寫得不錯(cuò)的話，可以把它分享出去給更多人看到。

向AI問一下細(xì)節(jié)

JavaScript如何實(shí)現(xiàn)簡(jiǎn)單音樂播放器

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽