零基础无法仅用HTML实现音频歌词同步，必须结合JavaScript监听timeupdate事件，读取audio.currentTime，匹配data-time属性定位并高亮当前歌词，再滚动到可视区域。
零基础没法直接“学会”音频歌词同步——这不是一个 HTML 单独能搞定的功能，必须配合 JavaScript 才能实现时间轴驱动的高亮滚动。纯 HTML <audio> 标签只能播放，不能读取当前播放时间，更无法触发 DOM 更新。
为什么 <audio> 自带的 currentTime 必须用 JS 读取
HTML 的 <audio> 元素暴露了 currentTime 属性，但它只读、不可绑定，也不能响应式监听。浏览器不会自动把播放进度“推给”页面，你得主动轮询或监听事件。
-
timeupdate事件是唯一可靠方式：它在播放过程中高频触发（约每 200–250ms 一次），比setInterval更精准且省资源 - 直接读
audio.currentTime而不是依赖duration计算百分比——因为音频可能未加载完成，duration初值为NaN - 首次监听前要确保
audio.readyState >= 2（至少有元数据），否则currentTime可能为 0 或报错
歌词格式怎么写才方便 JS 匹配时间点
别用纯文本段落。推荐用带 data-time 的 <p> 或 <div>，每个块对应一句歌词和起始时间（单位：秒，支持小数）。
<div id="lyrics"> <p data-time="0.00">从前的日色变得慢</p> <p data-time="2.45">车，马，邮件都慢</p> <p data-time="4.82">一生只够爱一个人</p> </div>
- 时间戳必须按升序排列，JS 才能用
Array.prototype.find()快速定位当前句 - 避免用
<li>套<ul>：默认有 margin 和 list-style，干扰行高对齐；用<p>更轻量、易重置 - 不要把时间写成
"00:02.45"格式——JS 解析麻烦，容易出错；统一用浮点数秒值
核心 JS 同步逻辑怎么写（30 行内可跑通）
监听 timeupdate，遍历歌词节点，找到最后一个 data-time ≤ audio.currentTime 的元素并加 class；其余移除。
立即学习“前端免费学习笔记（深入）”；
const audio = document.querySelector('audio');
const lyrics = document.querySelectorAll('#lyrics p');
audio.addEventListener('timeupdate', () => {
const t = audio.currentTime;
let active = null;
for (const p of lyrics) {
const time = parseFloat(p.dataset.time);
if (time <= t) active = p;
else break; // 利用升序提前退出
}
lyrics.forEach(p => p.classList.toggle('active', p === active));
});
- 用
dataset.time读取属性比getAttribute('data-time')更安全，自动转字符串为数字 - 不用
Math.floor或四舍五入——歌词时间点本身是离散锚点，直接比较即可 - 如果歌词含空行或无
data-time，加个if (!time) continue防错，但最好从源头保证格式干净
滚动到当前歌词行的兼容写法
仅靠 CSS scrollIntoView 在 iOS Safari 和旧版 Android 上容易失效或抖动。稳妥做法是手动计算并设置 scrollTop。
- 先用
element.offsetTop获取目标<p>相对于父容器顶部的距离 - 减去父容器
offsetTop（避免被外层定位影响），再减去半屏高度做居中 - 用
el.parentElement.scrollTo({ top, behavior: 'smooth' })，不支持smooth的老浏览器 fallback 为直接赋值scrollTop - 别在每次
timeupdate都调用——加个防抖（如 300ms 内只执行最后一次），否则滚动会卡顿
真正难的不是写几行代码，而是处理音频加载延迟、时间精度漂移、移动端自动播放策略限制、以及歌词时间轴手工校准误差。这些细节没补上，页面看起来就“不同步”。
