加controls属性即可显示原生播放按钮；不显示主因是src路径错误、mime类型未正确返回或file://协议被浏览器拦截，而非语法问题。
怎么用 <audio></audio> 标签加播放按钮？
浏览器原生支持，不用 JS 也能实现基础播放控制——关键在 controls 属性。加上它，浏览器自动渲染播放/暂停、进度条、音量等 UI。
最简可用写法：
<audio controls><source src="music.mp3" type="audio/mpeg"><source src="music.ogg" type="audio/ogg"> Your browser does not support the audio element. </source></source></audio>
-
src可直接写在<audio></audio>标签上，但用<source></source>更利于多格式兼容（如 MP3 + OGG） - 多个
<source></source>会按顺序尝试加载，第一个能播的就用它 - 不加
controls就是静默加载，必须靠 JS 调用play()才能响
点击按钮触发播放，为什么 play() 常报错？
现代浏览器（Chrome/Firefox/Safari）强制要求：音频首次播放必须由用户手势（如 click、touchstart）触发，否则抛出 DOMException: play() failed because the user didn't interact with the document first。
- 不能在
DOMContentLoaded或setTimeout里直接调play() - 按钮的
onclick回调里调用是安全的，但必须确保该回调是同步响应用户动作的 - 如果用
addEventListener，注意别把play()包在异步逻辑里（比如先fetch再播放）
正确示例：
<button id="playBtn">播放</button>
<audio id="myAudio"><source src="bgm.mp3"></source></audio><script>
const btn = document.getElementById('playBtn');
const audio = document.getElementById('myAudio');
btn.addEventListener('click', () => {
audio.play().catch(e => console.warn('播放被阻止:', e));
});
</script>
autoplay 属性为什么经常失效？
它不是“一打开就响”，而是“尝试自动播放”——实际是否生效，取决于浏览器策略和用户设置。
- Chrome 要求页面有「高参与度」（比如用户之前点过播放），否则静音 autoplay 才允许（
autoplay+muted） - 移动端 Safari 默认禁用所有
autoplay，无论是否静音 - 即使成功，也只触发一次；刷新页面后仍需用户交互才能再次自动播
- 若真要“无感启动”，可改用
muted autoplay+ 用户点击后立即unmute()，但成功率不稳定
如何让播放按钮状态实时同步（播放中显示“暂停”，暂停时显示“播放”）？
靠监听 play、pause、ended 事件，再手动更新按钮文案或 class。
- 不要只监听
click，因为用户也可能用空格键、快捷键或右键菜单控制 -
audio.paused是实时属性，比查 DOM 状态更可靠 - 推荐用 class 切换样式，而非反复改
innerText（避免中文/英文切换时布局抖动）
小技巧：
btn.addEventListener('click', () => {
if (audio.paused) {
audio.play();
} else {
audio.pause();
}
});
audio.addEventListener('play', () => btn.classList.add('playing'));
audio.addEventListener('pause', () => btn.classList.remove('playing'));
audio.addEventListener('ended', () => btn.classList.remove('playing'));
音频加载时机、跨域资源、iOS 的 click 延迟、Web Audio API 的精细控制……这些都可能在真实项目里突然冒出来，但只要记住：**用户手势是起点，controls 是捷径，play() 的 promise 拒绝必须处理**。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
