HTML5 audio标签是原生、语义化、跨浏览器的标准音频播放方案，需通过src/controls声明源与控件，用source提供多格式兼容，autoplay必须搭配muted且依赖用户交互才能解除静音。
用 HTML 的 audio 标签播放声音文件，核心是正确声明音频源、控制行为，并适配浏览器限制。它不是“插件”或旧式标签，而是 HTML5 原生、语义清晰、跨浏览器支持的标准方案。
基础写法：让音频可播放、可操作
最简可用结构需包含 src（指定文件）和 controls（显示播放控件）：
-
<audio src="music.mp3" controls></audio>—— 直接加载单个 MP3 文件，用户能看到播放/暂停、进度条、音量调节 - 若想兼容更多浏览器，推荐用
<source>提供多格式，例如 MP3 + OGG：
<audio controls>
<source src="bgm.mp3" type="audio/mpeg">
<source src="bgm.ogg" type="audio/ogg">
您的浏览器不支持音频播放。
</audio>
浏览器会按顺序尝试加载，选第一个能解码的格式；末尾文字是降级提示，对不支持的环境友好。
自动播放背景音乐：必须静音 + 用户触发
现代浏览器禁止有声自动播放，但允许静音状态下自动启动。要实现“进入即播”的背景音乐效果：
立即学习“前端免费学习笔记（深入）”；
- 加
autoplay muted属性，确保初始静音播放 - 用 CSS 隐藏控件：
style="display:none;"或position: absolute; left: -9999px; - 若需后续恢复声音，必须由用户点击等交互触发：
audioElement.muted = false; audioElement.play();
不能在页面加载完成时直接取消静音并播放——这会被浏览器拦截。
常用控制属性与实用组合
这些布尔属性无需赋值，存在即生效：
-
loop：循环播放，适合背景音乐或提示音 -
preload="metadata"：只预加载时长、封面等信息，节省带宽；auto（默认）可能提前下载全部音频 -
muted：默认静音，配合autoplay是绕过策略的关键
注意：autoplay 单独使用基本无效，muted 是必要搭档；移动端尤其严格，部分设备即使静音也不触发自动播放。
用 JavaScript 动态控制更灵活
给 <audio> 加 id，就能用脚本精确干预：
-
document.getElementById('myAudio').play()启动播放 -
audio.volume = 0.7调节音量（0.0–1.0） -
audio.currentTime = 15跳转到第 15 秒 - 监听
ended事件做播放完成后的处理，比如切换下一首
所有操作都依赖用户已与页面发生交互（如点击按钮），这是浏览器强制的安全要求。
