为什么暂停的时候，我点击下一首，控制台会有提示？

来源：7-7 自定义audio-js（4）

菜鸟101

2020-03-25 17:32:18

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style type="text/css">
       *{
           margin: 0;
           padding: 0;
           list-style: none;
       }
    .outerNode{
       width: 505px;
       height: 406px;
       position: absolute;
       left: 50%;
       top: 50%;
       margin: -204px 0 0 -253.5px;
       border: 1px solid #a6a18d;
       border-radius: 8px;
       box-shadow: 0 0 16px #a6a18d;
    }
    .innerNode{
       width: 503px;
       height: 405px;
       border-top: 1px solid #e1d1b9;
       border-left: 1px solid #ceccbf;
       border-radius: 8px;
       overflow: hidden;
       border-right: 1px solid #ceccbf;
    }
    .innerNode .topNode{
       height: 198px;
       width: 100%;
       border-bottom: 1px solid #787476;
       background: url('music/pic/fmt01.jpg') center center;
       background-size: cover;
       transition: .7s;
       position: relative;

    }

    .innerNode .topNode .musicName{
       color: white;
       position: absolute;
       left: 3px;
       bottom: 2px;
    }

    .innerNode .lineNode{
       width: 100%;
       height: 46px;
       border-top: 1px solid #f9f7ee;
       border-bottom: 1px solid #a29d8a;
       background: url('musicimage/linebg.jpg') repeat-x;
    }

    .innerNode .lineNode .progressNode{
       height: 18px;
       width: 440px;
       margin: 13px 0 0 28px;
       float: left;
       background: url('musicimage/progressbg.jpg') repeat-x;
       position: relative;

    }

    .innerNode .lineNode .progressNode .progressleft{
       background: url('musicimage/leftNode.jpg');
       width: 7px;
       height: 100%;
       position: absolute;
       left: 0;
    }

    .innerNode .lineNode .progressNode .progressright{
       background: url('musicimage/rightNode.jpg');
       width: 7px;
       height: 100%;
       position: absolute;
       right: 0;
    }
    .innerNode .lineNode .progressNode .trueLine{
       position: absolute;
       left: 3px;
       top: 2px;
       height: 12px;
       width: 0%;
       background: url('musicimage/green_bg.png') repeat-x;
       border-radius: 6px;
    }
    .innerNode .bottomNode{
       width: 100%;
       height: 157px;
       border-top: 1px solid #a29d8a;
       background: url('musicimage/bottombg.jpg') repeat-x;
       position: relative;
    }
    .innerNode .bottomNode .lastNode{
       background: url('musicimage/lastBg.png') no-repeat;
       width: 75px;
       height: 74px;
       position: absolute;
       left: 125px;
       top: 39px;
       cursor: pointer;

    }

    .innerNode .bottomNode .playNode{
       width: 95px;
       height: 94px;
       position: absolute;
       background: url('musicimage/playNode.png') no-repeat;
       left: 202px;
       top: 29px;
       cursor: pointer;
    }

    .innerNode .bottomNode .nextNode{
       background: url('musicimage/rightbg.png') no-repeat;
       width: 75px;
       height: 74px;
       position: absolute;
       left: 306px;
       top: 39px;
       cursor: pointer;
    }

    .innerNode .bottomNode .volumeNode{
       background: url('musicimage/volume.png');
       width: 37px;
       height: 32px;
       position: absolute;
       right: 43px;
       top: 58px;
       cursor: pointer;
    }

    .innerNode .bottomNode .no_volumeNode{
       background: url('musicimage/no_volume.png');
       width: 37px;
       height: 32px;
       position: absolute;
       right: 43px;
       top: 58px;
       cursor: pointer;
    }
   </style>
</head>
<body>
   
   <div class="outerNode">
       
       <div class="innerNode">
           
           <div class="topNode">
               
               <div class="musicName"></div>
           </div>
           
           <div class="lineNode">
               
               <div class="progressNode">
                   <div class="progressleft"></div>
                   <div class="progressright"></div>
                   
                   <div class="trueLine"></div>
               </div>
           </div>
              
           <div class="bottomNode">
               
               <div class="lastNode"></div>
               
               <div class="playNode"></div>
               
               <div class="nextNode"></div>
               
               <div class="volumeNode"></div>
           </div>
       </div>
   </div>
   <script type="text/javascript">
       var playBtn = document.querySelector('.playNode'),
            //playBln控制播放停止的布尔值
            playBln = true,
            //控制声音的按钮
            volumeNode= document.querySelector('.volumeNode'),
            //控制声音的布尔值
            volumeBln = true,
            //进度条的选择器
            trueLine = document.querySelector('.trueLine'),
            //进度条的外层元素
            progressNode = document.querySelector('.progressNode'),
            //最外层的元素
            outerNode = document.querySelector('.outerNode'),
            //选择封面背景
            topNode = document.querySelector('.topNode');
            //下一首歌的按钮
            nextNode = document.querySelector('.nextNode');
            //上一首歌的按钮
            lastNode = document.querySelector('.lastNode'),
            //音乐名称
            musicName = document.querySelector('.musicName');

       //创建audio对象
       var myAudio = new Audio();
       //所有的数据存在一个数组里面
       let allMusic = [{
           'MusicSrc':'music/mus/AcousticGuitar1.mp3',
           'MusicPic':'music/pic/fmt01.jpg',
           'MusicName':'AcousticGuitar1'

       },{
           'MusicSrc':'music/mus/AmazingGrace.mp3',
           'MusicPic':'music/pic/fmt02.png',
           'MusicName':'AmazingGrace'

       },{
           'MusicSrc':'music/mus/FeelsGood2B.mp3',
           'MusicPic':'music/pic/fmt03.jpg',
           'MusicName':'FeelsGood2B'

       },{
           'MusicSrc':'music/mus/FunBusyIntro.mp3',
           'MusicPic':'music/pic/fmt04.jpg',
           'MusicName':'FunBusyIntro'

       },{
           'MusicSrc':'music/mus/GreenDaze.mp3',
           'MusicPic':'music/pic/fmt05.jpg',
           'MusicName':'GreenDaze'

       },{
           'MusicSrc':'music/mus/Limosine.mp3',
           'MusicPic':'music/pic/fmt06.jpg',
           'MusicName':'Limosine'

       },],index = 0;
       //给audio对象src
       myAudio.src = allMusic[index].MusicSrc;
       //给封面赋值
       topNode.style.backgroundImage = 'url('+allMusic[index].MusicPic+')';
       musicName.innerHTML = allMusic[index].MusicName;


        //播放暂停事件
       playBtn.onclick = function(){
           playBln = !playBln;
           if(playBln == false){
               myAudio.play();
           }else{
               myAudio.pause();
           }
       };

       //声音事件
       volumeNode.onclick = function(){
           volumeBln =!volumeBln;
           if(volumeBln == false){
               myAudio.volume = 0;
               this.className = "no_volumeNode";
           }else{
               myAudio.volume = 1;
               this.className = "volumeNode";
           }
       };

       //播放时进度条的长度控制计算
       myAudio.addEventListener('timeupdate',function(){
           trueLine.style.width = myAudio.currentTime / myAudio.duration * 100 +'%';
       });

       //点击 progressNode 元素让进度条直接到达这个位置
       progressNode.onclick = function(e){
           var ev = e || event;
           myAudio.currentTime = myAudio.duration* ((ev.clientX - (this.offsetLeft + outerNode.offsetLeft))/this.offsetWidth);
           trueLine.style.width = ((ev.clientX - (this.offsetLeft + outerNode.offsetLeft))/this.offsetWidth)*100+"%";

       };

       //下一首的事件
       nextNode.onclick = function(){
          index++;
          if(index == allMusic.length){
              index =0;
          }
          MusicPlayFn();

       }

       //音乐播放的函数
       function MusicPlayFn(){
          myAudio.src = allMusic[index].MusicSrc;
          myAudio.currentTime = 0;
          trueLine.style.width ="0%";
          myAudio.play();
          if(playBln == false){
               myAudio.play();
           }else{
               myAudio.pause();
           }
       //给封面赋值
       topNode.style.backgroundImage = 'url('+allMusic[index].MusicPic+')';
       musicName.innerHTML = allMusic[index].MusicName;

       }
      //上一首歌的事件
       lastNode.onclick = function(){
          index--;
          if(index == -1){
              index =allMusic.length-1;
          }
          MusicPlayFn();
       }

   </script>
</body>
</html>