必须添加controls属性才能显示音频控件，使用source标签提供MP3/OGG/WAV多格式回退，autoplay需配合muted才可在移动端静音自动播放，JS操作需监听loadedmetadata事件确保元数据加载完成。
标签本身就能插入音频，但直接写 默认不显示控件、不自动播放、在部分浏览器可能根本不动——关键不是“能不能放”，而是“怎么让它按你预期工作”。
必须加 controls 属性才能看到播放器
没加 controls 的 是个隐形元素，DOM 里存在，但用户看不见也点不了。这是最常被忽略的一点。
正确写法：
<audio controls src="music.mp3"> 您的浏览器不支持 audio 元素。 </audio>
说明：
-
controls是布尔属性，写上即生效，不需要controls="true" - 备用文本（即
标签内的文字）只在浏览器完全不支持时显示，不是提示语 - 如果用 JS 控制播放，可以不加
controls，但得自己实现 UI，否则用户无交互入口
多个格式源要配合 source 标签，不能只靠 src
不同浏览器对音频编码支持不一：MP3 在 Safari/Chrome 行，OGG 在 Firefox 更稳，WAV 通用但体积大。单靠 src 属性无法 fallback。
正确做法是用
<audio controls><source src="music.mp3" type="audio/mpeg"><source src="music.ogg" type="audio/ogg"><source src="music.wav" type="audio/wav"> 您的浏览器不支持 audio 元素。 </source></source></source></audio>
说明：
- 浏览器按
-
type属性非必需，但加上能帮浏览器跳过明显不支持的格式，提升加载效率 - 不要在
上再写src，否则会优先用它，绕过所有
autoplay 和 muted 是移动端能否自动播放的硬性条件
Chrome、Safari（尤其是 iOS）默认禁止带声音的自动播放。即使写了 autoplay，只要没静音，大概率被拦截，控制台还可能报 DOMException: play() failed because the user didn't interact with the document first。
解决路径很明确：
- 加
muted+autoplay：可静音自动播（比如背景氛围音） - 不加
muted：必须等用户首次触摸/点击页面后，才能调用play()方法 -
preload="auto"只是预加载，不影响 autoplay 是否生效
示例（静音自动播）：
<audio controls autoplay muted src="intro.mp3"></audio>
JS 操作 audio 元素要注意 loadedmetadata 时机
想用 JS 获取时长（duration）、设置播放位置（currentTime）、监听播放结束（ended），别在 DOM 加载完就操作。音频元数据（如时长、尺寸）是异步加载的，过早读 duration 会得 NaN。
可靠做法是监听 loadedmetadata 事件：
const audio = document.querySelector('audio');
audio.addEventListener('loadedmetadata', () => {
console.log('真实时长：', audio.duration); // 这里才安全
});
其他常见陷阱：
-
play()返回 Promise，失败时需catch，不能只靠 try/catch 同步捕获 -
loop属性设为true才循环，不是"loop"字符串 - iOS Safari 中，
audio元素必须有controls或由用户手势触发，否则play()一定失败
真正麻烦的从来不是语法对不对，而是每个浏览器对“自动播放”“格式支持”“用户交互要求”的规则差异——先按 controls + loadedmetadata 这三板斧搭好架子，再根据具体场景微调 autoplay 或 JS 控制逻辑，比一上来就堆属性靠谱得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
