75. audio 标签：音频播放

本节目标：学会用 audio 标签在网页中嵌入音频，掌握常用属性，能做多源兼容播放。

以前想在网页上播放音乐，得靠 Flash 这类插件。现在 HTML5 提供了原生的 <audio> 标签，不需要任何插件就能放声音。

最简用法

只需要一行代码，就能在页面上显示一个带控制条的音频播放器。

<audio src="music.mp3" controls></audio>

controls 属性告诉浏览器显示播放、暂停、音量这些控制按钮。不加这个属性，音频就会”藏”在页面里，用户看不到也操作不了。

常用属性一览

<audio> 有几个实用的属性，按需添加即可。

属性	作用
`controls`	显示播放控件
`autoplay`	自动播放（多数浏览器已禁用）
`loop`	循环播放
`muted`	默认静音
`preload`	预加载策略（auto/metadata/none）

<audio src="music.mp3" controls loop muted></audio>

Tip

autoplay 在现代浏览器中基本被禁用了。浏览器希望用户自己决定是否播放声音，避免”打开网页就炸耳朵”的体验。

多源兼容写法

不同浏览器支持的音频格式不一样。MP3 最通用，兼容性最好。为了保证所有用户都能听到声音，可以提供多个源文件。

<audio controls>
  <source src="music.mp3" type="audio/mpeg">
  <source src="music.ogg" type="audio/ogg">
  你的浏览器不支持音频播放，请下载文件直接收听。
</audio>

浏览器会按顺序检查，用第一个能播放的文件。最后的文字是兜底提示，当浏览器完全不支持 <audio> 标签时显示。

常见音频格式

格式	MIME 类型	兼容性
MP3	audio/mpeg	现代浏览器全支持
OGG	audio/ogg	Chrome、Firefox、Edge
WAV	audio/wav	文件较大，适合短音效

Note

实际项目中，提供 MP3 + OGG 两种格式基本能覆盖所有现代浏览器。

JavaScript 控制播放

<audio> 标签本质是一个 DOM 元素，可以用 JavaScript 控制它。

<audio id="myAudio" src="music.mp3"></audio>
<button onclick="document.getElementById('myAudio').play()">播放</button>
<button onclick="document.getElementById('myAudio').pause()">暂停</button>

play() 和 pause() 是最常用的两个方法。还能监听 ended 事件，在音频播放完后执行操作。

const audio = document.getElementById('myAudio');
audio.addEventListener('ended', () => {
  console.log('播放结束');
});

小结

<audio> 标签是 HTML5 原生音频方案，无需插件
controls 属性显示播放控件
用 <source> 提供多个源文件做兼容
可以通过 JavaScript 的 play()、pause() 控制播放