HTML怎么做语音合成_html SpeechSynthesis语音合成【总结】-html教程-PHP中文网

speechsynthesis语音合成需用户手势触发、显式指定中文voice、手动管理播放状态。必须在click等交互回调中调用speak()，等待onvoiceschanged后筛选zh-cn语音，通过cancel()/pause()/resume()控制流程，并做好降级处理。

html怎么做语音合成_html speechsynthesis语音合成【总结】

HTML 里用 SpeechSynthesis 做语音合成，不是加个标签就能响——它依赖浏览器原生 API，不支持自动播放、不能跨域加载语音资源、且多数浏览器默认静音策略下必须由用户手势（如点击）触发，否则直接静默失败。

SpeechSynthesis 必须手动触发，且仅响应用户手势

几乎所有现代浏览器（Chrome/Firefox/Edge）都要求 speechSynthesis.speak() 调用发生在用户真实交互回调内，比如 onclick、oninput 或 addEventListener('click', ...)。在页面加载时直接调用、或在定时器（setTimeout）、fetch 回调里调用，都会被忽略，且不报错——只是一声不吭。

✅ 正确：按钮点击后立即调用 speechSynthesis.speak(utterance)
❌ 错误：在 window.onload 或 fetch().then(...) 中调用
⚠️ 注意：即使已调用过一次，后续若离开页面再返回，仍需重新由用户手势激活（部分浏览器会重置权限状态）

中文发音不准？先检查 voice 属性是否显式指定

SpeechSynthesis 默认 voice 不稳定：Chrome 在中文系统可能选英文 voice，Safari 可能根本没中文字体；不设 utterance.voice 就等于听天由命。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

必须先等 speechSynthesis.onvoiceschanged 触发，再调用 speechSynthesis.getVoices()
遍历 voices 找 lang 包含 'zh-CN' 或 'zh' 的 voice，优先选 name 含 “Chinese”、“TTS” 或系统自带名称（如 macOS 的 “Ting-Ting”）
设置 utterance.voice = selectedVoice，别依赖默认值

示例片段：

speechSynthesis.onvoiceschanged = () => {
  const zhVoice = speechSynthesis.getVoices().find(v => v.lang.includes('zh-CN'));
  if (zhVoice) utterance.voice = zhVoice;
};