介绍HTML audio 标签的基本知识
audio标签允许您在HTML页面中嵌入音频内容。
这个元素可以流音频，可能使用麦克风通过getUserMedia()，或者它可以播放音频源，您可以使用src属性引用:
<audio src="file.mp3" />默认情况下，浏览器不显示此元素的任何控件。这意味着音频只有在设置为自动播放时才会播放(稍后详细介绍)，而用户无法看到如何停止它，或控制音量或在音轨中移动。
要显示内置控件，可以添加controls属性:
<audio src="file.mp3" controls />控件可以具有自定义外观。
可以使用type属性指定音频文件的MIME类型。如果未设置，浏览器会尝试自动确定:
<audio src="file.mp3" controls type="audio/mpeg" />音频文件在默认情况下不会自动播放。添加自动播放属性自动播放音频:
<audio src="file.mp3" controls autoplay />注意:移动浏览器不支持自动播放。
如果设置loop属性，将在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 />谷歌浏览器中显示效果如下：
添加多个源
浏览器可以实现一个音频编解码器，但不能实现另一个。也许您想要使用一个新的标准，将文件大小减少一半，但您仍然想要支持旧的浏览器。
可以使用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监听每个音频元素上的事件。
播放事件在音频播放开始时触发:
document.querySelector('video').addEventListener('play', () => {
alert('Audio is playing!!!')
})你也可以直接在HTML元素上使用on属性添加这个事件(和其他事件一样):
<audio src="song.mp3" controls onplay="playing()" />
const playing = () => {
alert('Audio is playing!!!')
}常见的监听事件如下：
- play 音频开始播放
- pause 音频被暂停
- ended 音频播放完成
- timeupdate 用户与回放时间线交互并前进/后退
- volumechange 用户改变了音量
完整的监听事件列表，(￣ω￣小伙伴们可以查看MDN。
