HTML audio 标签使用指南：网页音频插入方法详解
在网页开发中，插入音频内容可以丰富页面交互体验，HTML5 提供的 <audio> 标签是实现这一功能的核心元素，无需依赖第三方插件即可在主流浏览器中播放音频。本文将详细介绍 <audio> 标签的使用方法、属性配置以及兼容性处理方案。
一、audio 标签基本语法
<audio> 标签用于定义网页中的音频内容，最基础的用法如下：
<audio src="audio/demo.mp3" controls> 您的浏览器不支持 audio 标签，无法播放音频 </audio>
上述代码中，<audio> 标签内部的内容仅在浏览器不支持该标签时才会显示，作为降级提示。需要注意 src 属性指向的音频文件路径需要正确，否则无法加载音频。
二、常用属性说明
<audio> 标签支持多个属性，用于控制音频的播放行为和显示效果，常用属性如下：
| 属性名 | 属性值 | 说明 |
|---|---|---|
| src | 音频文件路径 | 指定要播放的音频文件的 URL，支持相对路径和绝对路径，例如 https://www.ipipp.com/audio/demo.mp3 |
| controls | 布尔属性 | 添加该属性后，浏览器会显示默认的音频控制面板，包含播放/暂停、音量调节、进度条等控件 |
| autoplay | 布尔属性 | 添加后页面加载完成会自动播放音频，但多数浏览器会限制自动播放行为，通常仅允许静音自动播放 |
| loop | 布尔属性 | 添加后音频播放结束会自动重新开始播放 |
| muted | 布尔属性 | 添加后音频默认处于静音状态 |
| preload | none/metadata/auto | 指定音频的预加载策略：none 不预加载，metadata 仅预加载元数据（时长、尺寸等），auto 尽可能预加载完整音频 |
三、多格式音频兼容配置
不同浏览器支持的音频格式存在差异，为了保证所有用户都能正常播放音频，通常需要使用 <source> 标签提供多种格式的音频文件，浏览器会按顺序选择第一个支持的格式进行播放：
<audio controls> <source src="audio/demo.mp3" type="audio/mpeg"> <source src="audio/demo.ogg" type="audio/ogg"> <source src="audio/demo.wav" type="audio/wav"> 您的浏览器不支持 audio 标签，无法播放音频 </audio>
上述代码中，浏览器会先尝试加载 MP3 格式文件，如果不支持则尝试 OGG 格式，再不支持则尝试 WAV 格式，都失败则显示降级提示文本。其中 type 属性用于指定音频的 MIME 类型，帮助浏览器快速判断是否支持该格式。
四、JavaScript 控制音频播放
除了使用默认的 controls 控件，还可以通过 JavaScript 调用 <audio> 标签的 API 实现自定义播放控制，常用方法如下：
// 获取 audio 元素
const audioElement = document.querySelector('audio');
// 播放音频
function playAudio() {
audioElement.play();
}
// 暂停音频
function pauseAudio() {
audioElement.pause();
}
// 设置音量为 50%（取值范围 0-1）
function setVolume() {
audioElement.volume = 0.5;
}
// 跳转到音频 10 秒位置
function seekAudio() {
audioElement.currentTime = 10;
}常用的音频属性也可通过 JavaScript 动态修改，例如 audioElement.muted = true 可设置静音，audioElement.loop = true 可开启循环播放。
五、注意事项
音频文件大小会影响页面加载速度，建议对音频进行适当压缩，优先使用 MP3、OGG 等压缩格式。
自动播放功能受浏览器策略限制，若需要自动播放，建议同时开启 muted 属性，用户交互后再取消静音。
如果需要兼容非常老旧的浏览器（不支持 HTML5），可以考虑搭配第三方音频播放库作为降级方案，但多数现代场景已无需处理此类兼容问题。
音频文件路径需确保可访问，若使用外部链接，需要替换为合法可访问的地址，例如 https://www.ipipp.com/audio/demo.mp3 这类示例地址。