给自己的网站添加一个音乐盒

JavaScript实现简单音乐盒

  先看下我加在自己网站中的效果，可以暂停/播放/上一首/下一曲，不想看视频效果的，我还做了动图展示，声音就自己脑补了🙄🙄

  其实音乐盒有很多插件，可以直接使用，拿来就集成到自己的网站中即可，那些插件功能往往也非常完善、强大，比如，下面这个jQuery音乐盒插件

插件地址：

http://www.bootstrapmb.com/tag/yinlehehttp://www.bootstrapmb.com/tag/yinlehe

  人家的插件就比较nb，又有歌词，又有强大的音乐库源，不像我这个用的都是本地music😂😂放来放去都是那几首，后面再看看有没有免费的音乐API可以用吧！

  不用插件的唯一的好处就是方便自己控制，增加修改吧，我不用插件最主要原因还是，对前端页面要求苛刻的我来说，看着那插件好像不太聪明的样子，虽然自己做的也不是很好看，但放到我的网站中，有众多特效加持效果就不一样了。

---

源码获取

  这个js音乐盒效果我已单独整理出来，主要就是根据页面中的Document元素使用js中几个方法，去编写一些简单的逻辑，没有 js 基础的可以看下我之前的JS文章哦，需要这个源码的小伙伴，在公众号回复“js音乐盒”即可，代码中的重点我都写了注释。

最重要的Js部分：

 //旋转碟片
 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/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/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/"+musics[musicindex];//改变音乐的SRC
 music_pic.src="images/"+music_pics[musicindex]+".gif";
 if(music.readyState="complete")
 {
  setTimeout(function(){
    duration.innerHTML=parseInt(music.duration/60)+":"+parseInt(music.duration%60);
  },1000);//一秒后读取音乐的总时长
  
  }
}
​
window.onload=function(){
 getMusic();
}

---

编程之外

​