vue3之网易云音乐歌词滚动

1.歌词处理

未处理之前为文本格式:

 

处理后：

  const getWord = async (id) => {

    let res = await getSongWordAPI(id)

    const { lrc } = res.data

    store.state.playStatus.word = lrc.lyric

    console.log(lrc.lyric)

    let arr = lrc.lyric.split(/\n/gi)

    arr.length = arr.length - 1 // 处理最后一次换行为空

    let songWord = arr.map((v) => {

      let idx = v.indexOf(']')

      let time1 = v.slice(1, idx).trim().split(':')

      let time = Number((Number(time1[0]) * 60 + Number(time1[1])).toFixed(3))

      let msg = v.slice(idx + 1).trim()

      return {

        time1: v.slice(1, idx).trim(),

        time,

        msg

      }

    })

    songWord.forEach((v, i, arr) => { // 处理歌词为空

      if (v.msg === '') {

        arr.splice(i, 1)

      }

    })

    store.state.playStatus.word = songWord

    console.log(songWord)

  }

 

 

2.页面处理：

1：html

        <div class="word_box" ref="songBox">

          <p v-for="(v, i) in playStatus.word" :class="[lyricIndex === i ? 'active':'']" :key="i">{{ v.msg }}</p>

        </div>

2：script:

    // 歌词滚动

    let lyricIndex = ref(0) // 歌词初始位置

    const songBox = ref(null)

    let currentTime = computed(() => store.state.currentTime)

    const duration = playStatus.value.duration

    console.log(duration)

    console.dir(songBox.value)

    watch(currentTime, (v) => { // 歌词滚动和声音匹配

      for (let i = 0; i < playStatus.value.word.length; i++) {

        console.log(v, playStatus.value.word[i].time)

        if (parseInt(v) === parseInt(playStatus.value.word[i].time)) {

          lyricIndex.value = i

          songBox.value.style.transform = `translateY(-${30 * i / 37.5}rem)`

          songBox.value.style.transition = 'all 1s'

        }

      }

    })