1. 犀牛前端部落首页
  2. Html5百科

HTML audio标签

介绍HTML audio 标签的基本知识

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 />

谷歌浏览器中显示效果如下:

HTML audio标签

添加多个源

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

可以使用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

原创文章,作者:犀牛前端部落,如若转载,请注明出处:https://www.pipipi.net/3298.html

发表评论

登录后才能评论