四川盐亭网站制作公司

JavaScript如何实现简单音乐播放器

小编这次要给大家分享的是JavaScript如何实现简单音乐播放器，文章内容丰富，感兴趣的小伙伴可以来了解一下，希望大家阅读完这篇文章之后能够有所收获。

创新互联建站长期为近千家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为施甸企业提供专业的成都做网站、成都网站建设，施甸网站改版等技术服务。拥有10余年丰富建站经验和众多成功案例,为您定制开发。

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

话不多说，先上图。

JavaScript如何实现简单音乐播放器JavaScript如何实现简单音乐播放器JavaScript如何实现简单音乐播放器

这样看起来有点单调。

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

JavaScript如何实现简单音乐播放器

具体效果可以去我的个人网站查看http://tcxqq.top

好了，成品已经展示了接下来，开干吧！





Document






 
   
 

 

 

 

 
0:00/0:00

先建好基本的HTML框架。

为我们的音频

...
里面的部分为音乐的控件以及进度条，图片等。
为旋转的碟片
为音乐专辑图片
为 碟片中间的小圆点

我们通过DIV嵌套一个div来作为音乐的进度条（图片红色部分），第一个div固定宽度，第二个div用%来设置宽度。

0:00/0:00

为时间显示 播放时长和总时长

控制菜单按钮 上一曲 播放/暂停 下一曲

下面是具体的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+了吧），还有鹿先森乐队的两首。

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

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

看完这篇关于JavaScript如何实现简单音乐播放器的文章，如果觉得文章内容写得不错的话，可以把它分享出去给更多人看到。


文章标题：JavaScript如何实现简单音乐播放器
文章出自：http://scyanting.com/article/ghdosj.html

其他资讯