1.监听audio的timeupdate事件

1  <audio ref="audio" :src="currentSong.url"  @play="ready" @error="error" @timeupdate="updateTime"
2            @ended="end"></audio>

2.事件方法:

1   updateTime(e) {
2         this.currentTime = e.target.currentTime
3       },

3.格式化时间显示:

1     format(interval) {
2         interval = interval | 0
3         const minute = interval / 60 | 0
4         const second = this._pad(interval % 60)
5         return `${minute}:${second}`
6       },

4.页面显示:

1 //已经播放时间
2 <span class="time time-l">{{format(currentTime)}}</span>
3 //总播放时间
4  <span class="time time-r">{{format(currentSong.duration)}}</span>

 

相关文章:

  • 2021-04-20
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-05-04
  • 2021-10-15
  • 2022-01-12
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2022-01-05
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案