最简画外音方案是使用带controls属性的audio标签，src需为可访问URL，禁用autoplay，通过用户点击触发play()并捕获Promise错误，多段语音复用同一Audio实例并调用load()更新资源。
audio 标签加 controls 是最简画外音方案
直接插入 <audio></audio> 并显示控件，就是网页画外音最稳妥的落地方式。它不依赖 JS，不触发 autoplay 限制，用户点一下就播，适合教学页、产品说明页这类需要人工触发讲解的场景。
关键点：必须带 controls 属性，否则用户看不到播放按钮；src 必须是可访问的 URL（不能是 C:\xxx\voice.mp3 这种本地路径）；建议用相对路径，比如 ./assets/guide.mp3。
- 不要写
autoplay—— 现代浏览器基本会静默拦截，还可能让控制台报DOMException: play() failed because the user didn't interact with the document first - 如果音频较短（preload="metadata"，让时长尽快显示出来，提升操作反馈感
- 避免把
<audio></audio>放在display: none或visibility: hidden的容器里，部分浏览器会暂停/丢弃音频资源
JS 控制播放需绑定在用户交互事件里
想实现“点击文字/图片自动播放对应讲解”，就得用 JS 调 play()，但这个调用必须发生在用户真实操作的回调中，比如 click、touchstart，不能放在 DOMContentLoaded 或定时器里。
常见错误写法：document.addEventListener('DOMContentLoaded', () => audio.play()) —— 这几乎必失败；正确姿势是监听按钮点击后立刻调用：
const btn = document.getElementById('step1');
const audio = document.getElementById('voice1');
btn.addEventListener('click', () => {
audio.currentTime = 0; // 重置到开头
audio.play().catch(e => console.warn('play failed:', e));
});
-
play()返回 Promise，失败时会 reject，务必用.catch()捕获，否则控制台报错但你不自知 - 移动端 Safari 对首次交互更敏感，建议用
touchstart替代click（尤其在 iOS 上） - 别在
setTimeout里调play()，哪怕只延迟 1ms，也大概率被判定为“非即时响应”，直接拒绝
多段画外音切换要复用同一个 Audio 实例
一个页面有 10 个步骤，每个配一段讲解？别为每段新建 new Audio(src)，容易触发内存泄漏或音频冲突。统一用一个 <audio id="narrator"></audio>，通过 JS 切换 src 和播放状态更可靠。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
注意：改 src 后必须手动调 load()，否则旧音频可能继续播，新地址不会加载：
const narrator = document.getElementById('narrator');
function playVoice(src) {
narrator.src = src;
narrator.load(); // 关键！否则 src 变更不生效
narrator.play().catch(() => {});
}
- 切换前建议先
narrator.pause()，防止上一段还在播 - 如果语音文件大小差异大，
preload="none"更省流量；若都小于 200KB，preload="metadata"可提前读取时长，方便做进度条 - 别用
innerHTML动态插入<audio></audio>标签再调play()—— DOM 插入和资源加载不同步，极易失败
画外音听不见？优先排查 muted、CORS 和 MIME 类型
代码看着没问题，但就是没声音，90% 是环境或服务配置问题，不是 JS 写错了。
检查顺序建议：
- 系统音量是否为 0？浏览器标签页是否被静音（右键标签页可查看）？
- 音频文件 URL 是否返回 200？用浏览器开发者工具 Network 面板看请求状态
- 服务器是否返回了正确的
Content-Type？MP3 必须是audio/mpeg，OGG 是audio/ogg，错成text/plain或application/octet-stream会导致 Chrome 拒绝加载 - 如果是跨域资源（比如从 CDN 加载），确认服务器开了
Access-Control-Allow-Origin，否则canplaythrough事件根本不会触发 - 不要依赖
loadeddata判断“能播了”，它只表示第一帧就绪；真正可用信号是canplaythrough，但弱网下可能超时，建议加 8 秒兜底
最易忽略的是：iOS Safari 在页面未获得焦点（比如后台标签页）时，即使 muted=false，play() 也可能静默失败 —— 所以画外音类功能，别强求“自动开始”，老老实实让用户点一下。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
