HTML 音频标签

介绍了 HTML 音频标签

的基础知识

音频标签允许将音频内容嵌入到 HTML 页面中。

此元素可以流式传输音频，可能使用 getUserMedia() 的麦克风，或者播放可使用 src 属性引用的声源：

<audio src="file.mp3" />

默认情况下，浏览器不显示该元素的控件。这意味着音频仅在设置为自动播放时才会播放（稍后会详细介绍），并且用户无法看到如何停止它、控制音量或在轨道上移动。

要显示内置控件，请添加控件属性：

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

控件可以具有自定义外观。

音频文件的MIME类型可以通过type属性指定。如果未设置，浏览器将尝试自动确定：

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

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

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

注意：移动浏览器不支持自动播放。

如果设置了循环属性，音频将在 0:00 再次开始播放，否则，如果不存在，音频将停在文件末尾：

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

还可以使用静音属性来播放静音的音频文件（没人会播放静音的音频文件吧？）：

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

CORS

音频受 CORS 约束，除非服务器允许，否则音频文件无法在源之间播放。

预载音频素材

如果您未设置自动播放，则说明中表示浏览器将仅下载音频元数据，而不是音频本身。

您可以使用

强制预加载声音

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

与

兼容

音频标签在IE9之前得到了很好的支持，所以现在不需要不兼容提示，但我们有选择。您只需添加结束标记并在开始和结束标记之间插入文本：

<audio src="song.mp3">不兼容audio标签</audio>

添加控件

您可以将浏览器设置为显示控件，以便用户在需要时播放音频、指示长度、调整音量并让他们导航，而不是在后台自动播放音频。配乐：

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

Google Chrome显示效果如下：

添加更多资源

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

您可以使用解决方案的源代码。

<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 来监视各个声音元素上的事件。

音频播放开始时触发播放事件：

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

您可以使用 HTML 元素的 on 属性直接添加此事件（与其他事件一样）：

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

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

常见监控事件有：

音频已开始播放

完整的监控事件列表（￣ω￣朋友可以看MDN。