VUE移动端音乐APP学习【十二】：播放器播放时间获取和更新

播放器播放时间的dom结构:

 <div class="progress-wrapper">
    <span class="time time-l"></span>
　　 <div class="progress-bar-wrapper">
     </div>
     <span class="time time-r"></span>
 </div>

data里需要有个变量表示当前时间 currentTime​

 

data() {
    return {
      songReady: false,
      currentTime: 0,
    };
  },

 

有了变量之后如何修改呢？当歌曲播放的时候，audio标签会派发一个事件timeupdate,这个事件的回调函数起名为updateTime。

然后在method里定义这个updateTime,它的参数是一个event对象，它的target就是audio标签。audio标签有一个叫currentTime的属性,表示的是audio当前播放的时间，是一个可读写的属性。将audio的currentTime赋值给data里的currentTime

 

updateTime(e) {
      this.currentTime = e.target.currentTime;
    },

 

有了currentTime以后，如果直接把它写到上dom上的话，它是一串数字，也就是时间戳。需要把它转化成分和秒的形式

写一个函数来完成时间戳格式化：

 

format(interval) {
      // 向下取整，想等于Math.floor()
      interval |= 0;
      // 获取分的部分
      const minute = interval / 60 | 0;
      // 获取秒的部分
      const second = this._pad(interval % 60);
      return `${minute}:${second}`;
    },

 

然后在插值里调用这个函数,总时长也需要调用这个函数

 

 

          <div class="progress-wrapper">
            <span class="time time-l">{{format(currentTime)}}</span>
            <div class="progress-bar-wrapper">
            </div>
            <span class="time time-r">{{format(currentSong.duration)}}</span>
          </div>

 

这里有个小小的问题 秒为个位数时它也显示个位数，需要补零

 

 

_pad(num, n = 2) {
      // 这个函数的功能就是补到几位，用0去补位
      let len = num.toString().length;
      while (len < n) {
        num = `0${num}`;
        len++;
      }
      return num;
    },

 

运行效果：

currentTime是不断变化的，因为audio会调用timeupdate事件，这个事件里又去设置了currentTime，这个currentTime映射到dom上，所以它是个不断变化的过程。