阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      HTML audio 标签

      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 事件属性

      目录
      目录