自定义一个音频播放器

简单的做一个音频播放器，还是不错的，css样式没有写，自由发挥啦！

outerNode

  <div class="outerNode">
          <div class=innerNode>
              <div class=coverNode>
                       <div class="titleNode"></div>
                </div>  
          </div>
     </div>

后面的代码，放入到coverNode元素的后面

plangressNode

             <div class="plangressNode">
                   <div class="lineNode">
                        <div class="lineLeftNode"></div>
                        <div class="lineRightNode"></div>
                        <div class="lineCenterNode"></div>
                        <div class="trueLine"></div>
                        <div class="timeNode">
                               <div  class="nowNode"> </div>
                                <div class="allNode"></div>
                        </div>
                      </div>
                   </div>

bootom

               <div class="bottomNode">
                     <div class="speedNode">
                          <button class="oneSpeed">1x</button>
                          <button class="twoSpeed">2x</button>
                          <button class="halfSpeed">0.5x</button>
                       </div>
                   <div class="lasttNode"></div>
                   <div class="playNode"></div>
                   <div class="nextNode"></div>
                   <div class="volumeNode"></div>
            </div>

JS

1. 获取对象

//timeNode 时间按钮
//nowNode 当前时间
//allNode 总时间
//speedNode 速率按钮
//oneSpeed 一倍数按钮
// twoSpeed 二倍数按钮
//halfSpeed .5倍数按钮
//bottomNode 功能区
//lastNode 上一曲按钮
// nextNode 下一曲按钮
//playNode 播放暂停按钮
//volumeNode 静音按钮
//trueLine 真正的进度条
// lineNode 进度条区
//lineLeftNode 进度条的左边
//lineRightNode 进度条的右边
//lineCenterNode 进度条的中间
//coverNode 封面图
// titleNode 音乐名字
//outerNode 最外层元素

创建Audio对象

var myAudio=new Audio();
var timeNode=document.querySelector(".timeNode"),
     nowNode=document.querySelector(".nowNode"),
     allNode=document.querySelector(".allNode"),
     speedNode=document.querySelector(". speedNode"),
     oneSpeed=document.querySelector(". oneSpeed"),
     twoSpeed=document.querySelector(". twoSpeed"),
     halfSpeed=document.querySelector(". halfSpeed"),
    bottomNode=document.querySelector(". bottomNode"),
    lastNode=document.querySelector(". lastNode"),
    nextNode=document.querySelector(". nextNode"),
   playNode=document.querySelector(". playNode"),
   volumeNode=document.querySelector(". volumeNode"),
  trueLine=document.querySelector(". trueLine"),
  lineNode=document.querySelector(". lineNode"),
  planpressNode=document.querySelector(". planLineNode"),
  lineLeftNode=document.querySelector(". lineLeftNode"),
  lineRightNode=document.querySelector(". lineRightNode"),
  lineCenterNode=document.querySelector(". lineCenterNode"),
 coverNode=document.querySelector(". coverNode"),
 titleNode=document.querySelector(". titleNode"),
 outerNode=document.querySelector(". outerNode"),

音乐的添加 使用数组 的json数据

var  allMusic=[
{
   "MusicSrc""="URL地址",
   "MusicPro"="URL地址",
   "MusicName"="自定义音乐名字"
 },
{
   "MusicSrc""="URL地址",
   "MusicPro"="URL地址",
   "MusicName"="自定义音乐名字"
},
{
   "MusicSrc""="URL地址",
   "MusicPro"="URL地址",
   "MusicName"="自定义音乐名字"
},
{
   "MusicSrc""="URL地址",
   "MusicPro"="URL地址",
   "MusicName"="自定义音乐名字"
},
],index=0

设置src

myAudio.src=allMusic[index].MusicSrc;

设置image

coverNode.style.backgroundImage="url("+allMusic[index].MusicPro+")";

显示总时间，和时间动起来

myAudio.addEventListener("canplay",function(){
      var needTime=parseInt(myAudio.duration);//获取总时间
      var s=needTime%60;//秒钟
      var m=parseInt(needTime/60);分钟
      var timeNum=toDou(m)+":"+toDou(s);
     allNode.innerHTML=timeNum;
},false);
function toDou(time){
    return time<10？"0"+time:time;
}
myAudio.addEventListener("timeupdate",function(){
      var needTime=parseInt(myAudio.currentTime);//获取总时间
      var s=needTime%60;//秒钟
      var m=parseInt(needTime/60);分钟
      var timeNum=toDou(m)+":"+toDou(s);
     nowNode.innerHTML=timeNum;
},false);

计算进度条的长度 监听时间数据事件

plangressNode.addEventListener("timeupdate",function(){
           tureLine.style.width=myAudio.currentTime/myAudio.duration*100+"%";
},false)

点击进度条外层元素，会达到指定的位置

plangressNode.onclick=function(e){
   var  ev=e||event;
   myAudio.currentTime=myAudio.duration*(ev.clientX-(this.offsetLeft+outNode.offsetLeft))/this.offsetWidth);
   tureLine.style.width=myAudio.duration*(ev.clientX-(this.offsetLeft+outNode.offsetLeft))/this.offsetWidth)*100+"%";
}

点击下一曲

nextNode.onclick=function(){
    index++;
    if(index==allMusic.length){
     index=0;
    }
   musicAll()
}

点击上一曲

  lastNode.onclick=function(){
       index--;
      if(index==-1){
          index=allMusic.length-1;
      }
     musicAll()
 }

封装一个下一曲上一曲的函数

function  musicAll(){  
    myAudio.currentTime=0;//清空当前播放的时间
    trueLine.style.width=0%;//清空下一曲的长度

    myAudio.src=allMusic[index].MusicSrc;//获取下一曲的歌
   if(playBln==false){
        myAudio.play();
    }else{
        myAudio.pause();
    }

coverNode这个是封面元素

    coverNode.style.backgroundImage="url("+allMusic[index].MusicPro+")";//获取下一首的图片
 }

放音乐播放完时，自动下一曲，首先我们要使用一个事件，就是timeupdate当时间改变是触发，然后监听事件

 nextNode.addEventListener("timeupdate",function(){
     var needCurrent=parseInt(myAudio.currentTime);
     var needDuration=parseInt(myAudio.duration);
     if(needCurrent==needDuration){
           index++;
           if(index==allMusic.length){
               index=0;
           }
           musicAll()
     }

})

播放速率

 oneSpeed.onclick=function(){
   myAudio.playbackRate=1;
}
twoSpeed.onclick=function(){
   myAudio.playbackRate=2;
}
halfSpeed.onclick=function(){
    myAudio.playbackRate=0.5;
}