vue-music:歌词高亮滚动

2024年3月16日 300次阅读 来源: 云深不知处

需求：获取歌词后，按照UI设计，歌词高亮滚动，同时，当滚动到index=5的时候，不再向下滚动，直接高亮

1.html部分

  1. 歌词滚动：scroll组件
  2. 高亮显示当前歌词：currentLineNum设置一个class
<scroll class="middle-r" 
        ref="lyricList" 
        :data="currentLyric && currentLyric.lines">
    <div class="lyric-wrapper">
      <div v-if="currentLyric">
        <p ref="lyricLine"
          class="text"
          :class="{'current': currentLineNum === index}"
          v-for="(line, index) in currentLyric.lines"
          :key="line.time">{{line.txt}}</p>
      </div>
    </div>
</scroll>

2. 功能

歌词的分析使用了js-lyric插件,从而生成我们需要的数据结构

//获取歌词的时候，实例化
getLyric() {
  this.currentSong.getLyric().then((lyric) => {
    //利用第三方库: js-lyric ，解析我们的歌词，生成方便操作的对象
    this.currentLyric = new Lyric(lyric, this.handleLyric)
    ···
  })
}

回调函数

  • 实例化歌词的回调函数
  • 当前歌词索引:lineNum 歌词内容：txt
   
    handleLyric({lineNum, txt}) {
      this.currentLineNum = lineNum
      if (lineNum > 5) {
        //v-for循环，所以this.$refs.lyricLine是一个数组，从而获取相应DOM
        let lyricEl = this.$refs.lyricLine[lineNum - 5]
        //调用scroll组件API
        this.$refs.lyricList.scrollToElement(lyricEl, 1000)
      } else {
        //如果小于5，则滚动制顶部
        this.$refs.lyricList.scrollTo(0, 0, 1000)
      }
      this.playingLyric = txt
    },
    原文作者：云深不知处
    原文地址: https://segmentfault.com/a/1190000016691605
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞