vue慕课网音乐项目手记：36-歌词其他功能的实现

原创于 2018-05-23 12:21:01 发布 · 645 阅读

CC 4.0 BY-SA版权

61 篇文章

订阅专栏

本文介绍了音乐播放器中歌词同步的关键技术，包括解决歌词不断跳动、与音乐同步播放、循环播放回到开头等问题的方法，并提供了DOM元素实现歌词显示的具体方案。

1、解决歌词不断跳动：实际上就是清空lyric中的timer计时器

**if (this.currentLyric) {
        this.currentLyric.stop()
      }**

2、解决歌词和音乐同步播放：

this.setPlayingState(!this.playing)
      if (this.currentLyric) {
        this.currentLyric.togglePlay()
      }

3、解决循环播放不会到一开始的问题，在loop的代码如下：

if (this.currentLyric) {
          this.currentLyric.seek(0)
        }

4、拖动bar的时候，歌词跟着滚动：

5、播放页歌词的实现：

添加dom

<div class="playing-lyric-wrapper">
    <div class="playing-lyric">{{playingLyric}}</div>
</div>

维护一个playLric

然后：在lyric回调的时候设置playingLric