HTML的`audio`标签audio 标签允许你在你的HTML页面中嵌入音频内容。这个元素可以流传音频，也许是使用麦

audio 标签允许你在你的HTML页面中嵌入音频内容。

这个元素可以流传音频，也许是使用麦克风通过 getUserMedia()，或者它可以播放一个你用src 属性引用的音频源。

默认情况下，浏览器不显示这个元素的任何控制。这意味着音频只有在设置为自动播放的情况下才会播放（后面会有更多介绍），而用户看不到如何停止它，或控制音量或在轨道中移动。

要显示内置控件，你可以添加controls 属性。

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

控件可以有一个自定义的皮肤。

你可以用type 属性指定音频文件的MIME类型。如果没有设置，浏览器将尝试自动确定。

<audio src="file.mp3" controls type="audio/mpeg" />

默认情况下，一个音频文件不会自动播放。添加autoplay 属性来自动播放音频。

<audio src="file.mp3" controls autoplay />

注意：移动浏览器不允许自动播放

如果设置了loop 属性，就会在0:00重新开始播放音频，否则如果不存在，音频就会在文件的末尾停止。

<audio src="file.mp3" controls autoplay loop />

你也可以使用muted 属性静音播放音频文件（不确定这有什么用）。

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

CORS

音频受CORS限制，除非你在服务器端允许，否则音频文件不能跨源播放。

预加载音频

如果你不设置autoplay ，规范说浏览器只会下载音频元数据（例如找出长度）而不会下载音频本身。

你可以用以下方法强制预装音频

<audio src="song.mp3" preload="auto" />

在不支持`audio` 的情况下显示内容

audio 标签被很好地支持，直到IE9，所以现在应该不需要有一个占位符文本，但我们有这个选择。你只需添加一个关闭标签，并在开头和结束标签之间插入文本。

<audio src="song.mp3">Audio tag not supported</audio>

添加本地控件

你可以选择要求浏览器显示一组控件，而不是在后台自动播放音频，让用户在他们想要的时候播放音频，对长度有一些指示，设置音量，并让他们对轨道进行导航。

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

这是在Chrome浏览器中的样子。

Audio element

你可以用CSS来设计控件，尽管这不在本介绍的范围之内。

添加多个音源

浏览器可以实现一种音频编解码器，但不能实现另一种。也许你想使用一个较新的标准，将文件大小减半，但你仍然想支持旧的浏览器。

你可以用source 标签这样做。

<audio controls>
 <source src="song.opus" type="audio/ogg; codecs=opus"/>
 <source src="song.ogg" type="audio/ogg; codecs=vorbis"/>
 <source src="song.mp3" type="audio/mpeg"/>
</audio>

利用音频事件工作

我们可以使用JavaScript监听每个audio 元素的事件，以创建有趣的项目和界面。有很多不同的事件可以玩。

当音频播放开始时，play 事件被触发。

document.querySelector('video').addEventListener('play', () => {
  alert('Audio is playing!!!')
})

你也可以直接使用HTML元素上的on<event> 属性直接添加这个事件（和其他事件一样）。

<audio src="song.mp3" controls onplay="playing()" />

const playing = () => {
  alert('Audio is playing!!!')
}

这些是你可以监听的几个事件。

play 音频开始播放
pause 音频被暂停
ended 音频播放完成
timeupdate 用户与播放时间线互动，并向前/向后移动
volumechange 用户改变了音量

还有很多与音频加载有关的事件，你可以在MDN上找到完整的列表。

HTML的`audio`标签