使用timeupdate事件监听视频播放时间，结合倒序遍历带时间戳的歌词数组，实时匹配并高亮当前歌词行；需在loadedmetadata后绑定事件，确保currenttime有效。
使用 HTML5 <video></video> 标签的 timeupdate 事件实现视频进度与歌词同步，核心是监听视频当前播放时间（currentTime），并实时匹配对应时间点的歌词行，高亮或滚动显示。
监听 timeupdate 事件并获取当前时间
`timeupdate` 事件会在视频播放过程中**频繁触发**（通常每200–250ms一次），适合做实时同步。需确保视频元素已加载元数据（`loadedmetadata`）后再绑定事件，避免初始 `currentTime` 为 NaN 或 0 导致误匹配：
const video = document.getElementById('myVideo');
const lyricsContainer = document.getElementById('lyrics');
<p>video.addEventListener('loadedmetadata', () => {
video.addEventListener('timeupdate', handleTimeUpdate);
});</p><p>function handleTimeUpdate() {
const currentTime = video.currentTime; // 单位：秒，精确到毫秒级
updateLyrics(currentTime);
}</p>
准备带时间戳的歌词数据结构
歌词需按时间顺序组织，每行包含起始时间（单位：秒）和文本。推荐使用数组+对象格式，便于二分查找或线性遍历：
const lyrics = [
{ time: 0.00, text: "开始之前，深呼吸" },
{ time: 8.25, text: "阳光洒在窗台，像一封未拆的信" },
{ time: 15.60, text: "我们笑着，却不敢说再见" },
{ time: 22.40, text: "旋律渐远，心还在原地盘旋" }
];
注意：时间戳建议统一用小数秒（如 15.60 而非 00:15.60），避免字符串解析开销；首行时间可为 0，表示视频开头。
实时匹配当前歌词行
在 `handleTimeUpdate` 中，遍历或查找最接近且不大于 `currentTime` 的歌词项。对几十行歌词，线性倒序遍历足够高效（从后往前找第一个 ≤ 当前时间的）：
function updateLyrics(currentTime) {
let activeIndex = -1;
// 倒序查找：取最后一个 time ≤ currentTime 的索引
for (let i = lyrics.length - 1; i >= 0; i--) {
if (lyrics[i].time // 清空旧高亮，渲染新歌词（示例：只显示当前行）
lyricsContainer.innerHTML = activeIndex >= 0
? <code><div class="lyric-active">${lyrics[activeIndex].text}</div></code>
: '';<p>// 若需滚动容器到当前行，可调用 scrollIntoView
const activeEl = lyricsContainer.querySelector('.lyric-active');
if (activeEl) activeEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
}</p>
优化体验的小技巧
- 防抖处理：若发现高亮闪烁，可在 `timeupdate` 内加简单节流（如用 `requestAnimationFrame` 替代直接操作 DOM）
- 支持区间歌词：扩展歌词对象为
{ start: 8.25, end: 12.30, text: "..." }，匹配时判断start ≤ currentTime - 暂停/拖拽后重同步：`timeupdate` 在用户拖动进度条后仍会触发，无需额外监听 `seeked` —— 但可监听 `seeking` 显示加载态
- 字幕样式建议：用 CSS 控制 `.lyric-active` 的颜色、大小、过渡动画，提升视觉连贯性
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
