audio标签必须带controls属性才能触发加载和交互，否则浏览器不会初始化音频解码器；需用双格式source（mp3+ogg）并精确指定type，autoplay已失效，必须由用户点击事件触发play()。

audio 标签必须带 controls 才能触发加载和交互

不加 controls 属性，浏览器大概率不会加载音频资源，更别说播放——哪怕你写了 autoplay 或后续用 JS 调 play()。这不是样式问题，是规范行为：没有控件，就没有用户交互上下文，现代浏览器直接跳过初始化音频解码器。

常见错误包括：

• 只写 ，漏掉 controls
• 误写成 control="true"（无效属性名）或 controls="false"（布尔属性不接受值）
• 用 CSS 把 audio 设为 display: none 后，忘记它仍需存在并被 JS 引用

双格式 source 是兼容性底线，不是可选项

MP3 单格式在 Firefox、部分 Linux 浏览器、旧版 Safari 上会静默失败。原因不是路径错，而是解码器缺失。type 属性必须精确匹配 MIME 类型，且顺序影响回退逻辑：

• 必须放第一
• 放第二（ffmpeg -i bgm.mp3 -c:a libvorbis bgm.ogg 可免费生成）
• type="audio/mp3" 是无效值，会被忽略

结尾的提示文字（如“您的浏览器不支持 audio 元素”）不是摆设——它是所有 source 都加载失败时的最终降级内容。

autoplay 已失效，用户点击才是唯一可靠入口

Chrome、Safari、Firefox 从 2018 年起统一拦截无交互的有声自动播放。autoplay 单独存在只会报错：DOMException: play() failed because the user didn't interact with the document first。

librosa Python 音频与音乐分析库

librosa 是一个用于音频和音乐分析的 Python 库。它提供了特征提取、频谱分析、节拍跟踪、起始检测和音频可视化的工具，基于 NumPy 和 SciPy 构建，用于科学音频计算。

下载

可行做法只有：

• 绑定真实用户点击事件（button、div、甚至 body），在回调里调 audio.play().catch(e => console.warn('播放被拒:', e))
• 避免用 setTimeout 包裹 play()，会丢失交互上下文
• 移动端更严：iOS Safari 要求首次 play() 必须带 muted=true，之后再 muted=false 才可能成功

音量、循环、状态记忆得靠 JS 补全

loop 和 volume 属性虽可写在 HTML 里，但实际生效依赖 JS 控制时机。比如 volume=0.3 写在标签里可能被忽略，因为音频还没加载完成。

建议初始化后手动设置：

• audio.volume = 0.2（范围 0–1）
• audio.loop = true
• 用 localStorage 记住开关状态：localStorage.getItem('bgmEnabled') === 'true'，页面重载后恢复上次选择
• 注意：audio.paused 是判断是否在播的唯一可靠方式，别依赖 audio.ended 或定时轮询

最易被忽略的是：音频元素一旦被移除或 src 被清空，就彻底失去上下文，下次 play() 必须重新走用户点击流程——所以不要动态删 audio 标签，用 pause() + muted=true 更稳妥。