vue实现歌词效果
实现歌词滚动效果
使用Vue实现歌词滚动效果需要结合音频播放和歌词同步。以下是核心实现步骤：
准备歌词数据 歌词通常需要解析为时间戳和文本的格式，例如：
const lyrics = [
{ time: 0.5, text: "第一句歌词" },
{ time: 3.2, text: "第二句歌词" },
// ...
];监听音频时间 通过audio元素的timeupdate事件获取当前播放时间：
<audio ref="audio" @timeupdate="handleTimeUpdate"></audio>
methods: {
handleTimeUpdate() {
this.currentTime = this.$refs.audio.currentTime;
}
}高亮当前歌词 计算当前应该显示的歌词行：
computed: {
currentLyricIndex() {
return this.lyrics.findIndex(
(item, index) =>
this.currentTime >= item.time &&
(index === this.lyrics.length - 1 || this.currentTime < this.lyrics[index + 1].time)
);
}
}歌词滚动动画实现
CSS样式设置 为歌词容器和当前行添加样式：
.lyric-container {
height: 300px;
overflow-y: scroll;
transition: transform 0.3s ease;
}
.current-line {
color: #ff0000;
font-size: 1.2em;
}动态滚动控制 使用transform实现平滑滚动：
watch: {
currentLyricIndex(newVal) {
const lineHeight = 30; // 每行歌词高度
const container = this.$refs.lyricContainer;
container.style.transform = `translateY(${-newVal * lineHeight}px)`;
}
}歌词文件解析
LRC格式解析 将LRC文件转换为可用数据结构：
function parseLRC(lrcText) {
const lines = lrcText.split('\n');
return lines.map(line => {
const timeMatch = line.match(/\[(\d+):(\d+\.\d+)\]/);
if (!timeMatch) return null;
const minutes = parseFloat(timeMatch[1]);
const seconds = parseFloat(timeMatch[2]);
return {
time: minutes * 60 + seconds,
text: line.replace(/\[\d+:\d+\.\d+\]/, '').trim()
};
}).filter(Boolean);
}完整组件示例
LyricPlayer组件
<template>
<div class="player">
<audio ref="audio" :src="audioSrc" @timeupdate="updateCurrentTime"></audio>
<div class="lyric-container" ref="lyricContainer">
<div
v-for="(line, index) in lyrics"
:key="index"
:class="{ 'current-line': index === currentLyricIndex }"
>
{{ line.text }}
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
currentTime: 0,
lyrics: []
};
},
props: {
audioSrc: String,
lrcText: String
},
created() {
this.lyrics = this.parseLRC(this.lrcText);
},
computed: {
currentLyricIndex() {
// 计算逻辑同上
}
},
methods: {
parseLRC,
updateCurrentTime() {
this.currentTime = this.$refs.audio.currentTime;
}
}
};
</script>性能优化建议
虚拟滚动技术 对于长歌词列表，考虑使用虚拟滚动：
import { VirtualScroller } from 'vue-virtual-scroller';
components: {
VirtualScroller
}节流处理 对频繁的timeupdate事件进行节流：
import { throttle } from 'lodash';
methods: {
updateCurrentTime: throttle(function() {
this.currentTime = this.$refs.audio.currentTime;
}, 300)
}Web Worker解析 将歌词解析放在Web Worker中：
const worker = new Worker('./lrc-parser.js');
worker.postMessage(lrcText);
worker.onmessage = (e) => {
this.lyrics = e.data;
};
