vue实现歌词滚动

• 请求回来的歌词文件是下面的形式

‘[00:00.000] 作词 : 林夕↵[00:01.000] 作曲 : Robert Lay↵[00:14.310]如果 兄妹相称太多↵[00:19.610]醒不起喜欢我’

• 1 先处理歌词

    // 处理歌词，转化成key为时间，value为歌词的对象
    let lyricArr = data.lrc.lyric.split('[').slice(1); // 先以[进行分割
     let lrcObj = {};
     lyricArr.forEach(item => {
         let arr = item.split(']');	// 再分割右括号
         // 时间换算成秒
         let m = parseInt(arr[0].split(':')[0])
         let s = parseInt(arr[0].split(':')[1])
         arr[0] = m*60 + s;
         if (arr[1] != '\n') { // 去除歌词中的换行符
             lrcObj[arr[0]] = arr[1];
         }
     })
     // 存储数据
     this.currentMUsicLyric = lrcObj;
 })

处理后的歌词

• 2 循环渲染

	// lyricIndex为当前歌曲播放的进度在歌词中的位置，进而改变正在播放的歌词的样式
    <ul class="lyric" v-show="isShowMusicList" ref="lyric">
        <li :class="{each:true, choose: (index==lyricIndex)}" v-for="(item, key, index) in currentMUsicLyric" :key="key">{{item}}</li>
    </ul>

• 3 scss

.lyric {
        width: 400px;
        height: 300px;
        position: absolute;
        top: -312px;
        left: 774px;
        background-color: #333;
        // 滚动条
        overflow: auto;
        color: #ddd;
        font-size: 10px;
        font-weight: normal;
        padding: 5px 10px;
        border: 1px solid #000;
        border-left: none;
        .each {
        height: 30px;
        // border: 1px solid #000;
        line-height: 30px;
        text-align: center;
        }
        .choose {
            height: 30px;
            line-height: 30px;
            font-size: 20px;
        }
        // 修改滚动条样式
        &::-webkit-scrollbar {
            width: 3px;
            height: 1px;
        }
        // 滑块部分
        &::-webkit-scrollbar-thumb {
            background-color: #eee;
        }
        // 轨道部分
        &::-webkit-scrollbar-track {
            background-color: #333;
        }
    }

• 4 js

        // 使用watch监听当前歌曲进度value的变化处理歌词位置
        value() {
            let i = 0
            // 循环歌词对象
            for (let key in this.currentMUsicLyric) {
            // key表示歌词对象中的时间，如果key等于歌曲进度value，改变当前歌词进度		lyricIndex
                if (+key == this.value) {
                    this.lyricIndex = i;
                    // 当歌词进度大于5，即播放到了第5句歌词，开始滚动
                    if (i > 5) {
                        this.$refs.lyric.scrollTop = 30 * (i - 5);
                    }
                }
                i++;
            }
        }

效果展示