HTML audio 标签

🌙
手机阅读
本文目录结构
axihe

HTML <audio> 简介

HTML <audio> 元素用于在文档中表示音频内容。

<audio> 元素可以包含多个音频资源, 这些音频资源可以使用 src 属性或者 <source> 元素来进行描述; 浏览器将会选择最合适的一个来使用

因为这个标签是 HTML5 引入的,是 HTML5 中的新属性

对于不支持 <audio> 元素的浏览器,<audio> 元素也可以作为浏览器不识别的内容加入到文档中。

除了 HTML 以外,你还可以使用 JavaScript 直接生成和控制音频流,具体详情参见 JavaScript 音频 API

本页介绍的内容,源码托管在 Github 上:https://github.com/axihe/api-html/blob/master/audio-video/tag-audio.html

提示和注释

提示:可以在 <audio></audio> 之间放置文本内容,这些文本信息将会被显示在那些不支持 <audio> 标签的浏览器中。

HTML <audio> 标签功能

<audio> 标签定义声音,比如音乐或其他音频流。

目前,<audio> 元素支持的 3 种文件格式:MP3、Wav、Ogg。

浏览器MP3WavOgg
Internet ExplorerYESNONO
ChromeYESYESYES
FirefoxYESYESYES
SafariYESYESNO
OperaYESYESYES

HTML <audio> 使用上下文

  • 内容类别

流内容,短语内容,嵌入内容。

如果具有控件属性:交互内容和可触知的内容。

  • 允许内容

如果元素包含 src 属性:零个或多个 <track> 元素,其后紧跟不包含 <audio> 或者 <video>媒体元素的透明内容。

或者:零个或多个 <source> 元素,其后紧跟零个或多个 <track> 元素,其后紧跟不包含 <audio> 或者 <video>媒体元素的透明内容。

  • 标签是否可省略

不允许,开始标签和结束标签都不能省略。

  • 允许的父级元素

任何接受嵌入内容的元素。

  • Permitted ARIA roles

application

  • DOM 接口

HTMLAudioElement

HTML <audio> 标签用法

基本用法

  <!-- 演示内容开始 -->
  <audio src="axihe.mp3" autoplay controls="controls">
    老铁,你的浏览器不支持 <code>audio</code> 元素.
  </audio>
  <!-- 演示内容结束 -->

https://a.axihe.com/api/html/Code_4N3t6txsxO.png

上图的代码和 MP3 资源放在了 Github 上:https://github.com/axihe/api-html/blob/master/audio-video/tag-audio.html

使用 source 元素的 audio 元素

<audio controls="controls">
  Your browser does not support the <code>audio</code> element.
  <source src="horse.ogv" type="audio/wav">
  <source src="axihe.mp3" type="audio/mpeg">
  您的浏览器不支持 audio 元素。
</audio>

这个如果支持ogv, 播放第一个,不支持就使用第二个 Mp3;

https://a.axihe.com/api/html/iexplore_ECIGF0Ya6Q.png

注意;上面的代码在 IE9 下跑是播放第二个axihe.mp3格式的资源,而不是第一个horse.ogv

如果我们把代码放到 IE9 以下的模式来运行,发现是不能正常跑的;这时候我们设置的文字就有效果了;

如下图

https://a.axihe.com/api/html/iexplore_fAEf4Purd6.png

浏览器支持

IE 9+、Firefox、Opera、Chrome 和 Safari 都支持 <audio> 标签。

注释: IE 8 或更早版本的 IE 浏览器不支持 <audio> 标签。


HTML4 与 HTML5 之间的差异

<audio> 标签是 HTML5 的新标签。

属性

New :HTML5 中的新属性。

属性描述
autoplayNewautoplay如果出现该属性,则音频在就绪后马上播放。
autobuffer废弃false/true如果指定,音频将会自动开始加载,即使没有设置自动播放。
buffered该属性包含一个 TimeRanges 对象你可以通过该属性获取已缓冲的资源的时间段信息
controlsNewcontrols如果出现该属性,则向用户显示音频控件(比如播放 / 暂停按钮)。
loopNewloop如果出现该属性,则每当音频结束时重新开始播放。
mozCurrentSampleOffset数值在音频播放时,表示相对于音频开始处的偏移量的一个数值。
mutedNewmuted如果出现该属性,则音频输出为静音。
played一个 TimeRanges 对象表示所有已播放的音频片段。
preloadNewauto
metadata
none
规定当网页加载时,音频是否默认被加载以及如何被加载。
srcNewURL规定音频文件的 URL。
volume值从 0.0 (无声) 到 1.0 (最大声)音频播放的音量。

autoplay

布尔属性;如果指定(默认值为”false”!);指定后,音频会马上自动开始播放,不会停下来等着数据载入结束。

autobuffer

已废弃 Gecko 2.0

布尔属性;如果指定,音频将会自动开始加载。即使没有设置自动播放。直到媒体缓存满了或者全部音频文件加载完毕,即使是在首次进入时。该属性应该仅仅用在用户可能会选择播放的音频上;例如用户通过“播放音频”链接来到的一个页面。该属性已在 Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) 中移除,使用 preload 属性取而代之

buffered

你可以通过该属性获取已缓冲的资源的时间段信息。该属性包含一个 TimeRanges 对象。

controls

如果设置了该属性,浏览器将提供一个包含声音,播放进度,播放暂停的控制面板,让用户可以控制音频的播放。

loop

布尔属性;如果指定,将循环播放音频。

mozCurrentSampleOffset

在音频播放时,表示相对于音频开始处的偏移量的一个数值。

muted

表示是否静音的布尔值。默认值为 false,表示有声音。

played

一个 TimeRanges 对象,表示所有已播放的音频片段。

preload

枚举属性,让开发者自行思考来示意浏览器使用何种加载方式以达到最好的用户体验。可以是以下属性之一:

  • none: 示意用户可能不会播放该音频,或者服务器希望节省带宽;换句话说,该音频不会被缓存;
  • metadata: 示意即使用户可能不会播放该音频,但获取元数据 (例如音频长度) 还是有必要的。
  • auto: 示意用户可能会播放音频;换句话说,如果有必要,整个音频都将被加载,即使用户不期望使用。
  • 空字符串 : 等效于 auto 属性。

假如不设置,默认值就是浏览器定义的了(不同浏览器会选择自己的默认值), 即使规范建议设置为 metadata.

使用备注

  • autoplay 属性优先于 preload 假如用户想自动播放视频,那么很明显浏览器需要下载视频。同时设置 autoplaypreload 属性在规范里是允许的。
  • 规范没有强制浏览器去遵循该属性的值;这仅仅只是个提示。

src

嵌入的音频的 URL。 该 URL 应遵从 HTTP access controls. 这是一个可选属性;

你可以在 audio 元素中使用 <source> 元素来替代该属性指定嵌入的音频。

volume

音频播放的音量。值从 0.0 (无声) 到 1.0 (最大声).

时间偏移量目前是指定为 float 类型的值,表示偏移的秒数。

阿 西 河 提 示: HTML 5 规范中,时间偏移量值的定义还没有完成,有可能会变更。

全局属性

<audio> 标签支持 HTML 全局属性


事件属性

<audio> 标签支持 HTML 事件属性


AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili 和抖音。

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang