hidden="true"无法隐藏audio标签且导致播放失败，应使用position: absolute等CSS方式移出视口；autoplay+muted是自动播放必要条件；audio必须为body直接子元素且preload="auto"。
hidden="true" 不能隐藏 audio 标签，且会导致播放失败
HTML 的 hidden 属性对 <audio> 标签无效——它等价于 display: none，而现代浏览器（Chrome、Firefox、iOS Safari）在该状态下会直接暂停或拒绝加载音频。这不是兼容性问题，而是明确的行为规范。
-
hidden="true"和style="display:none"效果一致：音频无法 autoplay，iOS 下甚至不触发加载 -
hidden是全局布尔属性，写成hidden="false"也无意义，只要存在即生效 - 若目标是“不显示控件但保持可播放”，必须用其他 CSS 方式隐藏视觉元素，同时确保 DOM 可访问、未被裁剪或脱离渲染流
真正可用的隐藏方案：CSS 定位 + 无障碍保留
要让 <audio> 静默运行又不干扰布局，推荐用绝对定位移出视口，而非隐藏。关键是让它“可见但不可见”——DOM 存在、可脚本调用、不阻塞音频生命周期。
- 正确写法：
style="position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden;" - 避免
left: -9999px：某些 Safari 版本对超大负值坐标有渲染异常，opacity: 0更稳妥 - 必须确保
<audio>是<body>的直接子节点：iOS Safari 会拒绝播放嵌套在display: none或visibility: hidden容器内的 audio - 不要包裹在
<div style="opacity: 0">里——父级透明度会影响子元素的媒体策略判定
autoplay + muted 是自动播放的最低可行组合
仅靠 hidden 或 CSS 隐藏无法绕过浏览器自动播放策略；真正起效的是 autoplay 和 muted 的协同。没有 muted，哪怕用户已交互，Chrome 也会静音并阻止首次 play() 调用。
- 基础标签必须包含：
<audio autoplay muted loop preload="auto"> -
preload="auto"很关键：提前解码音频帧，避免用户点击后首次播放卡顿 - 不要依赖
autostart="true"：这是旧版<embed>或 IE<bgsound>的非标准属性，HTML5 中无效 - 如果后续需取消静音，必须在用户手势（如
click或touchstart）回调中执行：audio.muted = false; audio.play();，且不能有任何setTimeout延迟
iOS Safari 的特殊限制：DOM 位置和加载时机都不能错
iOS 对 background audio 的审查最严——哪怕你写了 autoplay muted，只要 <audio> 不在 <body> 直接子级、或 JS 在 DOMContentLoaded 后才 append，就大概率失败。
- 必须将
<audio>写死在 HTML 的<body>开头或结尾，不要用 JavaScript 动态创建后插入 - 避免通过
document.body.appendChild()添加：iOS 会判定为“非初始渲染内容”，拒绝 autoplay - 不要用 Web Components 或 Shadow DOM 包裹 audio：iOS 不识别其上下文，直接禁播
- 验证是否生效：打开 Safari 开发者工具 → Elements → 检查 audio 元素是否处于
readyState === 4且paused === false
