网页背景音乐控制器 - 静默自动播放尝试

现代浏览器（Chrome、Safari、Firefox等）从2018年起陆续实施了自动播放策略，主要原因是：

① 用户体验：防止网页在用户不知情的情况下突然播放声音，造成困扰；
② 节省带宽：避免自动加载大体积音频文件消耗用户流量；
③ 隐私保护：阻止恶意网站通过音频自动播放进行指纹识别。

目前，Chrome允许在满足以下条件之一时自动播放：用户已与页面交互、用户已将网站加入桌面端允许列表、或音频以静音状态播放。

静默自动播放是本工具的核心功能，采用多层级策略尝试在后台启动音频：

策略一：以静音（muted）状态尝试自动播放HTML5 Audio元素，浏览器对此限制较宽松；
策略二：创建Web Audio API的AudioContext，尝试自动resume；
策略三：监听用户首次交互事件（click/touch/scroll/keydown），在交互瞬间启动音频；
策略四：使用页面可见性变化（visibilitychange）作为触发时机；
策略五：渐进式音量提升——从0逐步增加到目标音量，实现"淡入"效果。

本工具会实时展示每种策略的执行结果，帮助开发者理解浏览器自动播放机制。

HTML5 Audio：简单易用，适合播放音轨和背景音乐，支持src属性直接加载音频文件，提供play()/pause()等基础方法。

Web Audio API：更底层的音频处理接口，支持：实时音频合成、多重音轨混合、滤波器和音效处理、精确的时序控制、音频可视化数据获取。

本工具同时使用两种技术：HTML5 Audio用于加载自定义URL音频，Web Audio API用于生成内置环境音（白噪音、雨声、海浪等）。

移动端的音频自动播放限制更为严格：

① iOS Safari：完全禁止无用户手势的音频播放，必须在用户交互（如点击、触摸）的回调中调用play()；
② Android Chrome：与桌面端策略类似，但更倾向于阻止自动播放；
③ 最佳实践：在页面上提供醒目的播放按钮，引导用户主动点击；同时监听touchstart事件作为AudioContext的resume触发点。

本工具在移动端会自动调整UI布局，增大按钮尺寸，并优化触摸交互体验。

白噪音（White Noise）：所有频率能量均等分布，声音类似老式电视机的"沙沙"声。适合掩盖突发的环境噪音，帮助集中注意力。

粉红噪音（Pink Noise）：低频能量更高，声音更柔和自然，类似雨声或瀑布声。研究表明有助于改善深度睡眠质量。

棕噪音（Brown Noise）：低频能量进一步增强，声音深沉浑厚，类似远处的雷声或强劲的海浪。对缓解耳鸣和焦虑有帮助。

本工具内置了以上三种噪音的模拟生成，使用Web Audio API实时合成，无需加载任何外部音频文件。

选择网页背景音乐的建议：

① 音量适中：建议设置在20%-40%，不要盖过用户的其他操作声音；
② 循环无缝：选择能够无缝循环的音频，避免明显的断点；
③ 风格匹配：音乐风格应与网站主题相符（如咖啡店网站可选爵士乐，冥想应用可选环境音）；
④ 文件大小：优先使用压缩格式（AAC/OGG），控制文件在1MB以内，保证加载速度；
⑤ 尊重用户：始终提供明显的暂停/静音按钮，并记住用户的选择偏好。