audio标签必须带controls属性才能触发加载和交互，否则浏览器不会初始化音频解码器；需用双格式source（mp3+ogg）并精确指定type，autoplay已失效，必须由用户点击事件触发play()。
audio 标签必须带 controls 才能触发加载和交互
不加 controls 属性，浏览器大概率不会加载音频资源，更别说播放——哪怕你写了 autoplay 或后续用 JS 调 play()。这不是样式问题，是规范行为：没有控件，就没有用户交互上下文，现代浏览器直接跳过初始化音频解码器。
常见错误包括：
- 只写
<audio src="bgm.mp3"></audio>，漏掉controls - 误写成
control="true"（无效属性名）或controls="false"（布尔属性不接受值） - 用 CSS 把
audio设为display: none后，忘记它仍需存在并被 JS 引用
双格式 source 是兼容性底线，不是可选项
MP3 单格式在 Firefox、部分 Linux 浏览器、旧版 Safari 上会静默失败。原因不是路径错，而是解码器缺失。type 属性必须精确匹配 MIME 类型，且顺序影响回退逻辑：
-
<source src="bgm.mp3" type="audio/mpeg"></source>必须放第一 -
<source src="bgm.ogg" type="audio/ogg"></source>放第二（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 更稳妥。
