JavaScript实现简单音乐播放器

2019-11-19 12:30:22

字体：大中小

来源：转载

供稿：网友

该篇文章会教你通过JavaScript制作一个简单的音乐播放器。包括播放、暂停、上一曲和下一曲。

阅读本文章你需要对HTML、CSS和Javascript有基本的了解。

话不多说，先上图。

这样看起来有点单调。

我们把它加在网页上试试。

具体效果可以去我的个人网站查看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 Documentvar 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+了吧），还有鹿先森乐队的两首。

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

OK，这就是一个完整的播放器了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：js实现搜索栏效果

下一篇：Vue 全家桶实现移动端酷狗音乐功能