最简音频播放写法是，controls属性必加才能显示控件；autoplay在移动端无效，需用户手势触发；JS调play()须捕获Promise拒绝并监听加载事件。
用 controls
浏览器原生支持音频播放，不用 JS 也能点开就播——前提是标签写对。最简写法是：
<audio src="music.mp3" controls></audio>
其中 controls 是关键：没它，页面上啥也不显示，更没法点击；加上后才出现播放/暂停/音量等按钮。注意 src 路径必须能被浏览器正确加载（本地测试时建议用 HTTP 服务起页面，否则 Chrome 会因安全策略拒绝加载 file:// 下的音频）。
autoplay 在移动端基本失效，别依赖它自动播
加了 autoplay 属性本意是“一打开就放”，但 iOS Safari 和 Android Chrome 都强制要求用户手势触发（比如点击）才能开始播放音频。强行加 autoplay 不仅无效，还可能被浏览器静音或报错 DOMException: play() failed because the user didn't interact with the document first。所以真要“点一下就播”，老实用 controls，或者用 JS 绑定 click 事件调 play() 方法。
JS 控制播放时，play() 可能抛异常，得处理 Promise 拒绝
现代浏览器要求 play() 返回 Promise，失败时会 reject，不 catch 就报红字错误。常见写法：
document.querySelector('button').addEventListener('click', () => {<br> const audio = document.querySelector('audio');<br> audio.play().catch(e => console.warn('播放失败:', e.message));<br>});
容易踩的坑包括：
-
audio元素还没加载完就调play()→ 加loadedmetadata或canplay事件监听 - 音频格式不兼容（比如 Safari 不支持
.wav编码）→ 推荐同时提供.mp3和.ogg，用 - 重复点击触发多次
play()→ 检查audio.paused状态再执行
路径和 MIME 类型不匹配会导致静音或加载失败
服务器返回的响应头 Content-Type 必须和实际音频格式一致，否则 Chrome 会静音、Firefox 可能直接不加载。比如 music.mp3 文件若被服务器当成 text/plain 发出， 就无法解析。本地开发用 Python 起服务可临时解决：
python3 -m http.server 8000
它默认对常见音频后缀返回正确类型；Node.js 用户可用 serve 包。另外，绝对路径写法如 /assets/song.mp3 比相对路径 ./song.mp3 更少出路径歧义问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
