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'         }       }     })  

标签：网易,console,歌词,arr,value,let,playStatus,vue3,word
来源： https://www.cnblogs.com/jiahsaohui/p/16124458.html