HTML5的audio标签为网页音频播放提供了原生支持，开发者无需再依赖第三方插件就能实现完整的音频播放功能，大幅降低了代码复杂度和维护成本。这种方式不仅兼容性好，还能更好地适配移动端设备的音频播放需求。
audio标签的基础用法
audio标签是HTML5新增的语义化标签，专门用于嵌入音频资源，基础语法非常简洁，只需要指定音频文件的路径即可实现基础播放功能。
<audio src="music.mp3" controls> 您的浏览器不支持audio标签，无法播放音频 </audio>
上面的代码中，<audio>标签的src属性指定了音频文件的路径，controls属性会显示浏览器默认的音频控制面板，包含播放、暂停、音量调节等按钮。如果浏览器不支持audio标签，会显示标签内部的提示文本。
audio标签的常用属性
除了基础的src和controls属性，audio标签还提供了多个实用属性，可以满足不同的播放需求，具体属性说明如下：
| 属性名 | 属性值 | 说明 |
|---|---|---|
| autoplay | 布尔值 | 设置音频是否在页面加载完成后自动播放，多数浏览器为了用户体验会限制自动播放，通常需要配合muted属性使用 |
| loop | 布尔值 | 设置音频播放结束后是否自动循环播放 |
| muted | 布尔值 | 设置音频是否默认静音 |
| preload | none/metadata/auto | 设置音频的预加载策略，none表示不预加载，metadata表示只预加载元数据，auto表示尽可能预加载全部内容 |
多格式音频适配
不同浏览器支持的音频格式存在差异，为了保证所有用户都能正常播放音频，可以使用<source>标签为audio标签提供多种格式的音频资源，浏览器会自动选择第一个支持的格式进行加载。
<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>
通过JavaScript控制音频播放
除了使用默认的controls面板，还可以通过JavaScript调用audio标签的API实现自定义控制，常见的控制方法如下：
// 获取audio元素
const audioElement = document.querySelector('audio');
// 播放音频
function playAudio() {
audioElement.play();
}
// 暂停音频
function pauseAudio() {
audioElement.pause();
}
// 设置播放位置到10秒处
function seekAudio() {
audioElement.currentTime = 10;
}
// 设置音量为50%
function setVolume() {
audioElement.volume = 0.5;
}
// 监听音频播放结束事件
audioElement.addEventListener('ended', function() {
console.log('音频播放结束');
});
兼容性处理方案
虽然主流现代浏览器都已经支持audio标签，但如果需要兼容非常旧的浏览器版本，可以添加降级处理方案，比如提示用户升级浏览器，或者提供Flash播放的兜底方案。
<audio controls>
<source src="music.mp3" type="audio/mpeg">
<!-- 降级提示 -->
<p>
您的浏览器不支持HTML5音频播放，请升级浏览器，或者<a href="music.mp3">点击此处下载音频文件</a>
</p>
</audio>
需要注意的是，这里的<a>标签位于<audio>标签内部，属于代码块内的内容，是符合规则的。通过上述方式，就可以用audio标签实现完整、简洁的HTML5化音频播放功能，替代传统复杂的实现方案。
HTML5_audio音频播放audio标签前端开发修改时间：2026-06-18 00:45:35