原生JS实现小小的音乐播放器(2)

日期：2020-05-12 栏目：程序人生浏览：次

//图片旋转，每30毫米旋转5度
  function rotate(){
    var deg=0;
    flag=1;
    timer=setInterval(function(){
    image.style.transform="rotate("+deg+"deg)";
      deg+=5;
       if(deg>360){
        deg=0;
        }
    },30);
 }

上述是图片转动的函数，当音乐播放的时候调用rotate（）函数，就可以实现图片的旋转！

同样清除定时器的函数，当音乐暂停的时候调用imagePause()，图片旋转的定时器被清除掉：

function imagePause(){
    clearInterval(timer);
    flag=0;
 }

这样图片旋转的功能我们就已经实现了~

进度条

先定义两个宽度长度大小一样颜色不同的两个div，利用currenttime属性来过去当前的播放的时间，设一个div一开始的长度为零，然后通过当前播放的事件来调整div长度大小就能实现滚动条的效果了。

function jindutiao(){
   //获取当前歌曲的歌长
   var lenth=play[index].duration;
    timer1=setInterval(function(){
    cur=play[index].currentTime;//获取当前的播放时间
     fillbar.style.width=""+parseFloat(cur/lenth)*300+"px";
      },50)
}

这样，进度条就完成啦~

播放时间

音乐的播放时间也是利用currenttime来随时改变，不过应该注意currenttime的计时单位为秒。

//播放时间
   function addtime(){
      timer2=setInterval(function(){
       cur=parseInt(play[index].currentTime);//秒数
        var temp=cur;
       minute=parseInt(temp/60);
       if(cur%60<10){
       time.innerHTML=""+minute+":0"+cur%60+"";
        }else{
            time.innerHTML=""+minute+":"+cur%60+"";
         }
      },1000);
}

2切歌
我做了两种方式实现切歌：

①点击上一曲、下一曲按钮实现切歌；

 //上一曲
  function reduce(){
          qingkong();
          reducejindutiao();
          pauseall();
          index--;
          if(index==-1){
            index=play.length-1;
          }
          start();
        }
        //下一曲
        function add(){
          qingkong();
          reducejindutiao();
          pauseall();
          index++;
          if(index>play.length-1){
            index=0;
          }
          start();
        }

②点击歌名，实现歌曲的切换；

 //点击文字切歌
        function change(e){
          var musicName=e.target;
          //先清空所有的
          for (var i=0;i<audioall.length;i++) {
            audioall[i].style.color="white";
            if(audioall[i]==musicName){
              musicName.style.color="red";
              qingkong();
              reducejindutiao();
              pauseall();
              index=i;
              start();
            }
          }
        }

转载注明出处：http://www.heiqu.com/1323.html

原生JS实现小小的音乐播放器(2)

相关推荐