HTML5引入了原生的<audio>标签，让开发者可以直接在网页中嵌入音频文件，不需要再使用Flash等第三方插件，大大简化了音频功能的实现流程。
HTML5音频标签基本语法
<audio>标签是HTML5新增的语义化标签，用于定义声音内容，基本结构如下：
<audio src="music.mp3" controls> 您的浏览器不支持audio标签，请升级浏览器 </audio>
上面的代码中，src属性用于指定音频文件的路径，可以是本地相对路径，也可以是线上绝对路径。controls属性用于显示浏览器默认的音频控制面板，包含播放、暂停、音量调节等按钮。如果浏览器不支持<audio>标签，会显示标签内部的提示文本。
常用属性介绍
<audio>标签还有很多实用的属性，可以根据需求灵活配置，常用属性如下：
| 属性名 | 取值 | 说明 |
|---|---|---|
| autoplay | autoplay | 页面加载完成后自动播放音频，目前大部分浏览器限制了无用户交互的自动播放 |
| loop | loop | 音频播放结束后自动循环播放 |
| muted | muted | 默认静音播放音频 |
| preload | none/metadata/auto | 设置音频的预加载策略，none表示不预加载，metadata表示只加载元数据，auto表示尽可能预加载 |
多格式音频兼容处理
不同浏览器支持的音频格式存在差异，常见的音频格式有MP3、OGG、WAV，为了保证所有浏览器都能正常播放，可以使用<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属性很多时候不会生效，常见的解决方案如下：
1. 静音自动播放
大部分浏览器允许静音状态下的自动播放，设置muted和autoplay属性即可实现页面加载后自动播放，用户后续可以手动取消静音：
<audio src="music.mp3" autoplay muted loop> 您的浏览器不支持audio标签，请升级浏览器 </audio>
2. 用户交互后播放
可以在用户点击按钮等交互操作后触发音频播放，这种方式兼容性最好：
<audio id="myAudio" src="music.mp3"></audio>
<button onclick="playAudio()">点击播放音乐</button>
<script>
function playAudio() {
var audio = document.getElementById("myAudio");
// 调用play方法播放音频
audio.play().then(function() {
console.log("音频播放成功");
}).catch(function(err) {
console.log("音频播放失败：" + err);
});
}
</script>
上面的代码中，play()方法返回一个Promise对象，如果播放成功会执行then回调，失败则执行catch回调，方便我们处理播放异常的情况。
JavaScript控制音频播放
除了使用标签属性，还可以通过JavaScript动态控制音频的播放、暂停、音量调节等操作，常用的属性和方法如下：
audio.play()：播放音频audio.pause()：暂停音频audio.currentTime：获取或设置当前播放的时间点，单位为秒audio.volume：获取或设置音量，取值范围为0到1audio.muted：获取或设置是否静音，值为布尔类型
下面是一个动态控制音频的示例：
<audio id="audioDemo" src="music.mp3"></audio>
<div>
<button onclick="play()">播放</button>
<button onclick="pause()">暂停</button>
<button onclick="setVolume(0.5)">设置音量50%</button>
</div>
<script>
var audio = document.getElementById("audioDemo");
function play() {
audio.play();
}
function pause() {
audio.pause();
}
function setVolume(vol) {
audio.volume = vol;
}
</script>
注意事项
需要注意，音频文件的路径必须正确，否则无法加载播放。如果是线上音频文件，要确保服务器配置了正确的MIME类型，否则浏览器可能无法识别音频格式。另外，移动端浏览器对自动播放的限制更严格，大部分情况下必须依赖用户交互才能触发音频播放。
HTML5_audio音频标签自动播放设置音乐添加修改时间：2026-07-20 07:36:38