标签：网易 console 歌词 arr value let playStatus vue3 word

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。