在网页开发中，使用HTML插入背景音乐是常见的需求，核心是通过<audio>标签实现音频的嵌入与播放控制，配合对应属性可以完成自动播放、循环播放等功能配置。
HTML音频标签基础用法
HTML5新增的<audio>标签是插入背景音乐的核心元素，它支持多种音频格式，基本语法结构如下：
<audio src="music.mp3" controls> 您的浏览器不支持音频播放 </audio>
上述代码中，<audio>标签的src属性用于指定音频文件的路径，可以是相对路径也可以是绝对路径；标签内部的文本是浏览器不支持该标签时的 fallback 提示内容。
常用音频格式支持
不同浏览器对音频格式的支持存在差异，常见的兼容格式如下：
| 音频格式 | 支持浏览器 |
|---|---|
| MP3 | 所有主流浏览器 |
| WAV | Chrome、Firefox、Safari等 |
| OGG | Chrome、Firefox、Opera等 |
为了提升兼容性，可以使用多个<source>子标签指定不同格式的音频文件，浏览器会按顺序选择第一个支持的格式播放：
<audio controls> <source src="music.mp3" type="audio/mpeg"> <source src="music.ogg" type="audio/ogg"> <source src="music.wav" type="audio/wav"> 您的浏览器不支持音频播放 </audio>
背景音乐相关属性配置
要实现背景音乐的效果，需要合理配置<audio>标签的属性，常用的属性如下：
- autoplay：设置音频加载完成后自动播放，属性值为布尔值，添加该属性即表示开启自动播放。
- loop：设置音频循环播放，添加该属性后音频播放结束后会自动重新开始播放。
- muted：设置音频默认静音，添加该属性后音频初始状态为静音，用户可手动开启音量。
- controls：显示音频播放控制面板，包含播放暂停按钮、音量调节、进度条等，背景音乐场景通常需要隐藏该面板。
基础背景音乐实现
如果不需要显示控制面板，同时需要循环播放，可以这样配置：
<audio src="bg_music.mp3" autoplay loop> 您的浏览器不支持音频播放 </audio>
自动播放设置与限制说明
很多开发者会发现添加了autoplay属性后音频依然无法自动播放，这是因为现代浏览器为了避免打扰用户，对音频自动播放做了限制：
大部分浏览器规定，音频自动播放必须满足以下条件之一：音频处于静音状态，或者用户已经和页面有过交互行为（比如点击、触摸页面）。
静音自动播放方案
如果需要页面加载后直接自动播放背景音乐，可以结合muted属性实现，后续允许用户手动开启音量：
<audio id="bgAudio" src="bg_music.mp3" autoplay loop muted>
您的浏览器不支持音频播放
</audio>
<button onclick="document.getElementById('bgAudio').muted = false">开启音量</button>
用户交互后自动播放方案
如果不需要初始静音，可以在用户和页面交互后再触发音频播放，示例代码如下：
<audio id="bgAudio" src="bg_music.mp3" loop>
您的浏览器不支持音频播放
</audio>
<script>
// 监听页面点击事件，用户点击后播放音频
document.addEventListener('click', function() {
const audio = document.getElementById('bgAudio');
// 如果音频处于暂停状态则播放
if (audio.paused) {
audio.play().catch(err => {
console.log('音频播放失败：', err);
});
}
});
</script>
上述代码中使用了play()方法的Promise返回值，捕获播放失败的错误，避免控制台出现未处理的异常提示。
注意事项
在实际使用背景音乐时，还需要注意以下几点：
- 音频文件大小尽量控制在合理范围，避免加载过慢影响页面性能，建议背景音乐时长不要太长，或者做好音频压缩。
- 不要强制自动播放有声音乐，避免引起用户反感，最好提供明显的关闭或暂停背景音乐的按钮。
- 移动端浏览器对自动播放的限制更严格，测试时需要覆盖移动端场景，确保功能符合预期。