当前位置：首页 > VUE

vue歌词滚动实现

2026-01-14 04:38:03VUE

实现 Vue 歌词滚动的核心思路

歌词滚动的核心逻辑是通过监听音频播放时间，动态匹配并高亮当前播放的歌词行，同时控制歌词容器的滚动位置。Vue 的响应式特性和计算属性非常适合此类场景。

歌词数据结构

歌词通常以时间戳和文本组合的形式存储，例如：

lyrics: [
  { time: 0.5, text: "第一句歌词" },
  { time: 5.2, text: "第二句歌词" },
  // ...
]

关键实现步骤

监听音频时间更新

<audio ref="audio" @timeupdate="handleTimeUpdate"></audio>

methods: {
  handleTimeUpdate() {
    this.currentTime = this.$refs.audio.currentTime;
  }
}

计算当前应高亮的歌词行

computed: {
  currentLineIndex() {
    for (let i = 0; i < this.lyrics.length; i++) {
      if (this.currentTime < this.lyrics[i].time) {
        return i - 1;
      }
    }
    return this.lyrics.length - 1;
  }
}

歌词容器滚动控制

watch: {
  currentLineIndex(newVal) {
    const container = this.$refs.lyricsContainer;
    const activeLine = this.$refs[`line_${newVal}`][0];
    container.scrollTop = activeLine.offsetTop - container.offsetHeight / 2;
  }
}

完整组件示例

<template>
  <div class="player">
    <audio ref="audio" src="song.mp3" @timeupdate="handleTimeUpdate"></audio>
    <div class="lyrics-container" ref="lyricsContainer">
      <div 
        v-for="(line, index) in lyrics" 
        :key="index" 
        :ref="`line_${index}`"
        :class="{ 'active': index === currentLineIndex }"
      >
        {{ line.text }}
      </div>
    </div>
    <button @click="$refs.audio.play()">播放</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentTime: 0,
      lyrics: [
        { time: 0.5, text: "第一句歌词" },
        { time: 5.2, text: "第二句歌词" },
        // ...
      ]
    };
  },
  computed: {
    currentLineIndex() {
      // 计算逻辑同上
    }
  },
  methods: {
    handleTimeUpdate() {
      this.currentTime = this.$refs.audio.currentTime;
    }
  },
  watch: {
    currentLineIndex(newVal) {
      // 滚动逻辑同上
    }
  }
};
</script>

<style>
.lyrics-container {
  height: 300px;
  overflow-y: auto;
}
.active {
  color: red;
  font-weight: bold;
}
</style>

性能优化建议

对于长歌词列表，可以考虑虚拟滚动技术，只渲染可视区域内的歌词行。可以使用第三方库如 vue-virtual-scroller 实现。

vue歌词滚动实现

import { RecycleScroller } from 'vue-virtual-scroller';

// 在模板中替换为
<RecycleScroller 
  class="scroller" 
  :items="lyrics"
  :item-size="50"
  key-field="id"
  v-slot="{ item, index }"
>
  <div :class="{ 'active': index === currentLineIndex }">
    {{ item.text }}
  </div>
</RecycleScroller>