如何用HTML中ruby标签实现字音同步显示-html教程-PHP中文网

标签仅用于语义化标注汉字与拼音，不支持自动语音播放或字音同步；需用javascript结合web speech api实现点击逐字朗读，或通过时间轴驱动视觉高亮以达成精确同步。

如何用html中ruby标签实现字音同步显示

ruby 标签本身不支持字音同步播放

直接用 <ruby></ruby> 无法触发语音朗读或控制发音时机——它只是语义化标记，浏览器不会自动调用 TTS 或对齐音频。所谓“字音同步”，必须靠 JavaScript 配合音频时间轴手动控制，<ruby></ruby> 只负责把汉字和注音（如拼音）在视觉上绑定。

先用 ruby + rt 正确标记单字拼音

确保结构符合规范，否则屏幕阅读器可能跳过或误读：

<ruby>
  你<rt>nǐ</rt>
  好<rt>hǎo</rt></ruby>

注意：<rt></rt> 必须是 <ruby></ruby> 的直接子元素；不能嵌套其他标签；拼音建议用纯文本（不加声调符号也可，但会影响 TTS 准确性）；多音字需按上下文选音，<ruby></ruby> 不会自动判断。

用 Web Speech API 实现点击逐字朗读

真正实现“同步”，得监听点击/悬停，再用 SpeechSynthesis 按字触发发音：

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

先遍历每个 <ruby></ruby> 内的汉字（用 childNodes 过滤文本节点）
为每个汉字绑定 click 事件，调用 speechSynthesis.speak()，传入对应 <rt></rt> 的文本
避免连续点击导致语音堆积：每次调用前执行 speechSynthesis.cancel()
部分浏览器（如 Safari）不支持中文 TTS 引擎，需降级提示或 fallback 到音频文件

示例逻辑片段：

document.querySelectorAll('ruby').forEach(ruby => {
  const char = ruby.firstChild.textContent.trim();
  const pinyin = ruby.querySelector('rt')?.textContent || '';
  ruby.addEventListener('click', () => {
    speechSynthesis.cancel();
    const utterance = new SpeechSynthesisUtterance(pinyin);
    utterance.lang = 'zh-CN';
    speechSynthesis.speak(utterance);
  });
});

用 audio + 时间轴做精确音画同步

如果需要严格匹配预录音频（比如教学场景），<ruby></ruby> 仅作定位参考，核心靠 <audio></audio> 的 timeupdate 事件驱动高亮：

把整句拼音转成带时间戳的 JSON，例如 [{"char":"你","pinyin":"nǐ","start":0.2,"end":0.6},{"char":"好","pinyin":"hǎo","start":0.7,"end":1.1}]
监听 audio.currentTime，比对当前时间落在哪个区间，动态给对应 <ruby></ruby> 添加 class="active"
CSS 控制 .active rt { color: red; } 即可实现视觉同步
音频必须是单声道、无背景音，否则时间轴易偏移

关键点：ruby 不参与播放逻辑，只作为 DOM 锚点；时间戳需实测校准，不同设备解码延迟可能差 ±50ms。

真正难的不是写 <ruby></ruby>，而是让声音和字形在毫秒级对齐——Web Speech API 延迟不可控，预录音频又依赖人工打轴。多数项目到第二步（点击朗读）就足够，强行追求“同步”反而增加维护成本。