白噪音音频需加muted+autoplay才能静默启动，用户首次交互后解除静音并立即play()；iOS需手动重置currentTime=0续播，且须注意路径、MIME类型及HTTP服务部署。
audio 标签必须加 muted 才可能“静默启动”
白噪音本质仍是音频，浏览器不会因它是“无旋律”的就放宽 autoplay 策略。不加 muted 属性，autoplay 在 Chrome、Safari（含 iOS）、Edge 中 100% 被拦截，控制台报错 DOMException: play() failed because the user didn't interact with the document first。
正确做法是：先用 muted + autoplay 让音频进入“已加载可播放”状态，再在用户首次交互后解除静音。这不是绕过策略，而是符合规范的合法路径。
-
<audio id="bgm" src="rain.mp3" muted autoplay loop preload="metadata"></audio>——preload="metadata"比"auto"更轻量，只加载时长/格式等元信息，避免阻塞首屏 - 不要用
volume=0替代muted：iOS Safari 仍判定为“有声流”，无法触发 autoplay - 双格式兜底仍有必要：
<source src="rain.mp3" type="audio/mpeg"><source src="rain.ogg" type="audio/ogg">，尤其在 Firefox 或旧 Android WebView 中
用户第一次点击后才 unmute，且必须 catch 错误
解除静音不是简单设 audio.muted = false 就完事。必须紧跟一次 play() 调用，且该调用必须发生在用户手势事件回调内（click、touchend），否则依然被拒。
常见错误是把 unmute 和 play() 拆开、或包在 setTimeout 里——这会丢失用户激活上下文，导致静音解除但无声。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
const audio = document.getElementById('bgm'); document.body.addEventListener('click', () => { audio.muted = false; audio.play().catch(e => console.warn('unmute play failed:', e.name)); }, { once: true }); - 按钮文案建议写成“开始专注”或“播放白噪音”，比“开启音乐”更契合场景，降低用户心理抵触
- 如果页面已有其他可点击元素（如导航、卡片），可复用其事件，不必强加独立按钮——但需确保该事件是用户真实主动触发，非自动 dispatch
iOS Safari 上 audio 元素不能靠 loop 自动续播
即使设置了 loop，iOS Safari 在白噪音循环到末尾时大概率卡住，ended 事件不触发，或触发后 play() 失败。这不是 bug，是 WebKit 对后台音频的保守限制。
真正稳定的做法是手动重置并重播，且每次重播都必须走“用户手势授权后”的路径——但用户不可能每分钟点一次。所以得用变通方案：
- 监听
ended后立即currentTime = 0，再立刻play()；虽然没新手势，但在 iOS 上只要首次已授权，后续同源play()通常放行（非 100%，需降级） - 加降级逻辑：若
play().catch触发，改用audio.load()+ 再次play()，模拟重新加载 - 更稳妥的长期方案：用
AudioContext+createMediaElementSource接入，把白噪音当“持续音频流”处理，但需注意 MP3 文件必须完整加载完毕才能解码，延迟高，不适合大文件
路径和 MIME 类型错误会导致“按钮点了没反应”
很多调试失败其实卡在资源层：文件 404、路径大小写错误、服务器没配对 audio MIME 类型。此时控制台报 net::ERR_FILE_NOT_FOUND 或 ERR_FAILED，但开发者常误以为是 JS 逻辑问题。
- 本地测试务必用 HTTP 服务启动（如
python3 -m http.server 8000），双击 HTML 用file://协议时 Chrome/Firefox 会直接拒绝加载音频 - 确认服务器返回的响应头含
Content-Type: audio/mpeg（MP3）或audio/ogg（OGG），Nginx/Apache 需手动配置，否则 Safari 可能静默失败 - 路径写相对路径时，注意 HTML 文件与音频文件的目录关系；推荐统一放在
/assets/audio/下，引用为src="./assets/audio/rain.mp3"
play()，背后连着的是用户手指落下的毫秒级时机、音频元数据加载完成的异步状态、以及浏览器内核对“是否构成干扰”的主观判断。 
