微信音频播放需分场景处理：ios微信要求用户手势触发play()，android较宽松；推荐用wx.createinneraudiocontext()替代原生，并预激活、监听oncanplay、及时destroy。
微信内置页面的音频播放不是“加个 autoplay 就能播”，而是必须分场景、分平台、分 API 类型处理——iOS 微信和 Android 微信行为完全不同，且原生 <audio></audio> 和微信小程序 wx.createInnerAudioContext() 两套机制不能混用。
为什么 <audio></audio> 在 iOS 微信里大概率静音或失败
iOS 微信 WebView（基于 WKWebView）沿用 Safari 策略：即使加了 muted，首次 play() 也必须由用户可信手势触发（如 click 或 touchstart），否则抛出 DOMException: play() failed because the user didn't interact with the document first。它不认 DOMContentLoaded、load，也不吃 setTimeout 延迟。
- Android 微信相对宽松，
<audio muted autoplay></audio>多数情况能响（但声音仍可能被系统静音策略压制） - iOS 微信对每个
<audio></audio>实例单独校验手势上下文——播了一个，不代表另一个能自动播 - 微信 8.0.33+ 开始，部分机型会忽略
autoplay+muted组合，必须显式调用play()
用 wx.createInnerAudioContext() 替代原生 <audio></audio>
这是目前最可控、兼容性最强的方案，专为微信环境设计，绕过浏览器策略限制，且支持 mixWithOther、obeyMuteSwitch 等关键选项。
- 必须在
WeixinJSBridgeReady或ready后创建实例，不能早于微信 JS-SDK 初始化 - 调用
play()前确保src已赋值，且最好监听onCanPlay事件再触发 - 记得在页面卸载前调用
destroy()，否则内存泄漏；多个实例要分别销毁 - 若需后台播放（如切到微信聊天页仍继续播），需设置
mixWithOther: true，但注意：扬声器模式（speakerOn: true）下该选项会被强制忽略
如何让“点击播放”真正生效且不卡顿
用户点一次按钮就播不了？常见原因是资源未加载完成或上下文未激活。别只绑 click 后直接 play()。
- 对
<audio></audio>：监听loadedmetadata事件，确保元数据就绪后再play() - 对
InnerAudioContext：监听onCanPlay，而非onLoad（后者不保证可播放） - 在用户第一次交互后，立即对所有音频实例执行一次
play().then(pause())预激活（尤其 iOS），后续再play()才不会被拦截 - 加
.catch(e => console.warn('play blocked:', e))，方便区分是策略拦截、404 还是格式不支持
音频格式与 fallback 容量别省
微信内核（X5）对格式支持不统一：Android 支持 MP3、AAC、WAV；iOS 微信仅稳定支持 MP3 和 M4A（AAC-LC），OGG 基本不认。
- MP3 是必选格式，码率建议 ≤128kbps，避免高码率导致加载慢或解码失败
- 不要只提供一种格式，
<source></source>标签顺序很重要：把最兼容的放前面，例如先 MP3 再 M4A - 如果用 Web Audio API 做可视化或变声，注意
AudioContext必须在用户交互后调用resume()，否则createBufferSource()会静默失败
真正容易被忽略的是：同一页面多个音频源（比如背景乐 + 按钮音效 + 语音播报）必须各自预激活、各自监听就绪事件、各自管理生命周期。微信不会帮你做跨实例的状态同步，靠一个 play() 全局唤醒只是幻觉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
