HTML4作为早期的前端标记语言，本身并没有提供原生的音频播放支持能力，开发者如果需要在HTML4页面中实现音频播放，通常需要借助Flash、RealPlayer等第三方插件，不仅开发流程复杂，还存在插件兼容性差、移动端支持不足等问题。而HTML5规范中新增的audio标签，让网页原生支持音频播放成为可能，不需要依赖额外插件就能实现音乐的嵌入和播放控制。
HTML4的音频支持情况
HTML4的核心规范中仅定义了文本、图片、链接等基础内容的标记方式，没有针对音频、视频等多媒体内容的原生标签。如果要在HTML4页面中播放音频，常见的方式有两种：
- 使用
<object>或者<embed>标签调用第三方插件，比如Flash播放器，需要用户浏览器安装对应插件才能正常运行。 - 提供音频文件的下载链接，让用户自行下载到本地用播放器打开，无法实现页面内直接播放。
这两种方式都存在明显的局限性，因此HTML4时代网页音频体验一直不够理想。
HTML5 audio标签基础用法
HTML5的audio标签是原生多媒体标签，支持直接在页面中嵌入音频文件，基础语法非常简单：
<audio src="music.mp3" controls> 您的浏览器不支持audio标签，请升级浏览器 </audio>
上面的代码中，src属性指定音频文件的路径，controls属性表示显示默认的播放控制面板，包括播放/暂停、进度条、音量调节等按钮。如果浏览器不支持audio标签，会显示标签内部的提示文本。
audio标签的常用属性
除了基础的src和controls，audio标签还有很多实用的属性，可以根据需求灵活配置：
| 属性名 | 说明 |
|---|---|
| autoplay | 布尔属性，设置后页面加载完成自动播放音频，部分浏览器为了用户体验会限制自动播放，需要配合muted属性使用 |
| loop | 布尔属性，设置后音频播放结束后自动循环播放 |
| muted | 布尔属性，设置后音频默认静音 |
| preload | 设置音频的预加载策略，可选值有none（不预加载）、metadata（仅预加载元数据）、auto（预加载全部音频） |
| volume | 设置音频音量，取值范围是0到1，0表示静音，1表示最大音量 |
多格式音频兼容处理
不同浏览器支持的音频格式存在差异，比如部分浏览器不支持mp3格式，有的不支持ogg格式，因此实际开发中通常会提供多种格式的音频文件，让浏览器自动选择支持的格式播放：
<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>
浏览器会按照source标签的顺序依次检查，选择第一个支持的格式进行播放，如果所有格式都不支持，就显示内部的提示文本。
通过JavaScript控制audio播放
除了使用默认的controls面板，我们还可以通过JavaScript调用audio标签的原生方法，实现自定义的播放控制逻辑：
// 获取audio元素
const audioElement = document.querySelector('audio');
// 播放音频
function playMusic() {
audioElement.play();
}
// 暂停音频
function pauseMusic() {
audioElement.pause();
}
// 跳转到10秒位置播放
function seekMusic() {
audioElement.currentTime = 10;
}
// 设置音量为50%
function setVolume() {
audioElement.volume = 0.5;
}
audio标签还有很多其他可用的属性和事件，比如currentTime可以获取或设置当前播放位置，duration可以获取音频总时长，ended事件可以在音频播放结束时触发回调，开发者可以根据实际需求灵活使用。
注意事项
- 音频文件的路径要正确，相对路径和绝对路径的使用要符合项目结构规范。
- 移动端浏览器大多禁止自动播放音频，即使设置了autoplay属性也可能无效，需要用户主动触发交互后才能播放。
- 如果音频文件放在ipipp.com等外部域名下，要注意跨域问题，避免音频无法加载。