浏览器 speechSynthesis 无法自动识别多音字，因其不解析语义、无词性分析与上下文判读能力；需依赖外部词典或拼音库（如 pinyin-pro）先判定读音，再用 标签动态标注。
直接用 speechSynthesis + SpeechSynthesisUtterance 触发朗读，无法自动识别或标注多音字——浏览器语音合成 API 不解析语义，只按字面读。
为什么不能靠 speechSynthesis.speak() 自动标多音字
浏览器的语音合成引擎（如 Chrome 的 ChromeVox、Safari 的 NSSpeechSynthesizer）不带中文词性分析或上下文判读能力。输入“行”就按默认读音 "háng" 或 "xíng"（取决于系统语音包），不会因为上下文是“银行”还是“行走”而切换。它不查词典，也不调用 NLP 模型。
- 你传入
new SpeechSynthesisUtterance("银行")，引擎只看到两个汉字，不理解这是个名词 - 即使你手动设
utterance.lang = "zh-CN"，也只影响语音库选择，不改变读音逻辑 - 所有主流浏览器都这样——这不是 bug，是设计边界
真正可行的多音字标注：得先做“读音判定”，再套 HTML 结构
交互触发标注，本质是两步：① 用户点击/悬停某字 → ② 显示该字在此语境下的正确读音。这必须依赖外部词典或规则判断，不能靠浏览器原生 API。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 最轻量方案：用预置 JSON 词典匹配短语，例如
{"银行": "yín háng", "行走": "xíng zǒu"}，点击时查表返回 - 进阶方案：集成开源拼音库（如
pinyin-pro或chinese-conv），调用其convertToPinyin()并开启多音字模式，传入上下文分词结果 - 注意：这些库仍需你提供分词依据，纯靠单字无法准确判断；比如“长”在“长度”里读
cháng，在“生长”里读zhǎng，必须知道前后字
HTML 层怎么呈现标注效果（带交互）
用 标签是唯一语义正确、可访问性合规的方式，配合 JS 动态插入 内容：
<p id="sentence">他正在银<span class="polyphone" data-word="银行">行</span></p>
<script>
document.querySelector('.polyphone').addEventListener('click', function() {
const word = this.dataset.word;
// 这里应调用你的多音字查询函数，比如 getPolyphonePinyin(word)
this.innerHTML = `行<ruby><rt>yín háng`;
});
</script>
- 别用
或 CSS 伪元素模拟拼音——屏幕阅读器无法识别，不符合 WCAG -
在 Chrome/Firefox/Edge 中渲染稳定，Safari 对嵌套支持稍弱，但基础标注没问题 - 如果要高亮点击反馈，给
.polyphone加cursor: pointer和:hover变色即可，别覆盖默认 focus 样式
真正难的不是“怎么标”，而是“标对”。同一个字在不同语境下读音不同，没有上下文感知的词典或模型，光靠前端交互点几下，永远只是静态映射。所以优先检查你用的拼音库是否支持 mode: 'polyphone' 或提供 lookupWithContext() 类方法——这才是多音字标注能否落地的关键分水岭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
