HTML5 <audio> 标签通过 src 和 controls 属性实现基础播放，用 <source> 提供多格式兼容，需配合 muted 实现自动播放，JavaScript 可控制播放、跳转及监听事件。
HTML5 的 <audio> 标签让网页直接播放音频变得简单、原生且无需插件。核心就是用好几个关键属性和结构，再配合一点 JavaScript 就能应对大多数场景。
基础播放：src + controls 是标配
最简可用写法就是指定音频路径并显示控件：
<audio src="music.mp3" controls></audio>-
src指向 MP3、OGG 或 WAV 文件，支持相对路径（如"./audio/intro.wav"）或网络地址（如"https://cdn.example.com/sound.mp3"） -
controls是布尔属性，加了才出现播放按钮、进度条、音量滑块——没它，音频就“隐形”了 - 确保服务器正确返回音频 MIME 类型（如
audio/mpeg），否则可能加载失败
多格式兼容：用 <source> 应对浏览器差异
不同浏览器支持的编码格式不一致，单靠 MP3 可能在 Firefox 或旧版 Safari 失败。推荐同时提供 MP3 和 OGG：
- 写法示例：
<source src="music.mp3" type="audio/mpeg">
<source src="music.ogg" type="audio/ogg">
您的浏览器不支持音频播放。
</audio>
- 浏览器按
<source>顺序尝试，加载第一个它能解码的格式 - 末尾的文本是降级提示，仅在完全不支持
<audio>的老浏览器中显示
自动播放与静音策略必须配合
现代浏览器普遍禁止有声自动播放，但允许静音状态下启动：
立即学习“前端免费学习笔记（深入）”；
- 正确写法：
<audio src="bgm.mp3" autoplay muted controls></audio> - 单独写
autoplay很可能被忽略；加上muted才大概率生效 - 移动端更严格，即使静音，部分设备仍要求用户首次点击后才能播放（可结合按钮触发
.play()）
JavaScript 控制实现自定义交互
想做进度条、倍速、音量调节或响应播放完成？离不开 JS API：
- 先给标签加
id，比如<audio id="player" src="talk.mp3" controls></audio> - 获取元素：
const audio = document.getElementById('player'); - 常用操作：
audio.play()、audio.pause()、audio.currentTime = 120（跳到第 120 秒） - 监听关键事件：
audio.addEventListener('ended', () => { console.log('播完了'); });，或'timeupdate'更新进度条 - 注意：
play()返回 Promise，失败时需.catch(e => console.warn(e))处理静音拦截等异常
