其他分享
首页 > 其他分享> > VUE移动端音乐APP学习【十二】:播放器播放时间获取和更新

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上,所以它是个不断变化的过程。

 

标签:播放器,VUE,return,currentTime,APP,interval,num,format,audio
来源: https://www.cnblogs.com/Small-Windmill/p/14695487.html