脚本宝典收集整理的这篇文章主要介绍了vue-music:歌词的其他功能，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

由于歌词的播放需要歌曲播放，切换歌曲，歌曲的播放模式等等有关联，因此，需要在这几处处理相关问题

1.循环播放回不到开始位置

loop() {
    //重置播放时间：0
    this.$refs.audio.currentTime = 0
    //开始播放
    this.$refs.audio.play()
    //vuex提交播放状态
    this.setPlayingstate(true)
    if (this.currentLyric) {
    //单曲循环的时候，歌词循环播放
    this.currentLyric.seek(0)
  }
},

2.切换歌曲的时候，歌词跳动

这是因为在new Lyric中定时器，所以切换歌曲的时候，清除定时器

this.currentLyric = new Lyric(lyric, this.handleLyric)

3.歌词和音乐同步

当暂停歌曲的时候，歌词暂停
当播放歌曲的时候，歌词播放

togglePlaying() {
  ···
  if (this.currentLyric) {
    //歌曲暂停时，歌词暂停播放
    this.currentLyric.togglePlay()
  }
},

4.拖动PRogressBar时候，歌词随之拖动

onProgressBArchange(PErcent) {
  const currentTime = this.currentSong.duration * percent
  this.currentTime = this.$refs.audio.currentTime = currentTime
  if (!this.playing) {
    this.togglePlaying()
  }
  if (this.currentLyric) {
    //拖动进度条，歌词联动
    this.currentLyric.seek(currentTime * 1000)
  }
},

脚本宝典总结

以上是脚本宝典为你收集整理的vue-music:歌词的其他功能全部内容，希望文章能够帮你解决vue-music:歌词的其他功能所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。