HTML5中audio.play()需用户手势触发且满足三条件：readyState为4、networkState为1、未被暂停；动态插入需load()并监听canplay，移动端更严格。
HTML5 中没有叫 play 的独立“函数”，真正能播放音频的是 HTMLMediaElement.play() 方法，它属于 元素的实例方法。直接调用 play() 失败，绝大多数情况是因为浏览器策略或元素状态问题，不是写法错了。
为什么 audio.play() 突然不工作了？
现代浏览器（Chrome、Edge、Safari）强制要求：音频/视频的自动播放（autoplay）必须由用户手势（如 click、touchstart）触发，否则会抛出 DOMException: play() failed because the user didn't interact with the document first. 错误。
- 页面一加载就执行
audio.play()→ 必然失败 - 在
setTimeout里延迟调用 → 依然失败（没用户交互） - 在
click回调里调用 → 成功（前提是已加载完成） - Safari 还额外要求：音频需设置
muted才允许静音 autoplay，哪怕你后续再取消静音
play() 调用前必须检查的三件事
别只写 audio.play() 就完事。以下任一条件不满足，都会静默失败或抛异常：
-
audio.readyState === 4（即HAVE_ENOUGH_DATA），否则可能报InvalidStateError -
audio.networkState === 1（NETWORK_LOADED），确保资源已加载而非还在NETWORK_LOADING - 音频未被其他标签或脚本暂停/中断（比如另一个
正在播放且设置了preload="none"）
稳妥写法示例：
立即学习“前端免费学习笔记（深入）”；
const audio = document.querySelector('audio');
audio.addEventListener('canplay', () => {
audio.play().catch(e => console.warn('Play failed:', e));
});
常见错误写法与修复对照
这些代码看着像能播，实际大概率失败：
-
document.querySelector('audio').play()→ 缺少事件监听和错误捕获，也不等加载 -
audio.src = 'sound.mp3'; audio.play();→src设置后需等canplay或loadeddata再播 -
audio.load(); audio.play();→load()是异步，不能保证立即就绪；应监听loadeddata - 用
async函数包装但没awaitplay()返回的 Promise → 错误被吞掉，调试困难
移动端和 Safari 的特殊坑
iOS Safari 和 Android Chrome 对音频控制更严格：
- 即使有用户点击，如果
是动态插入 DOM 的（比如用innerHTML或appendChild创建），首次播放仍可能失败 —— 需要在插入后手动调用audio.load()并等待canplay - 某些安卓 WebView 不支持
play()返回 Promise，要用传统try/catch+onerror双保险 - 音频文件若为远程 URL，务必确认服务器返回了正确的
Content-Type: audio/mpeg，否则 iOS 可能拒绝解码
最易忽略的一点：音频元素必须在 HTML 中存在（哪怕 display: none），不能纯靠 JS 创建后立刻播 —— Safari 会认为它“不可交互”。
