• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • <audio>

    版本:HTML5

    HTML <audio>元素用于在文档中表示音频内容。<audio>元素可以包含多个音频资源,这些音频资源可以使用 src 属性或者<source>元素来进行描述;浏览器将会选择最合适的一个来使用。对于不支持<audio>元素的浏览器,<audio>元素也可以作为浏览器不识别的内容加入到文档中。

    浏览器支持

    IE 9+、Firefox、Opera、Chrome 和 Safari 都支持<audio>标签。
    注释:IE 8 或更早版本的 IE 浏览器不支持<audio>标签。

    示例

    <audio src="someaudio.wav">您的浏览器不支持 audio 标签。</audio>
    

    标签定义及使用说明

    • <audio>标签定义声音,比如音乐或其他音频流。
    • 目前,<audio>元素支持的3种文件格式:MP3、Wav、Ogg。
    • 可以在<audio></audio>之间放置文本内容,这些文本信息将会被显示在那些不支持<audio>标签的浏览器中。

    使用上下文

    Content categories流式内容元素,段落内容元素, embedded content. If it has acontrolsattribute:交互内容元素 and 段落内容元素.
    允许内容(Permitted content)如果元素包含src属性:零个或多个<track>元素,其后紧跟不包含<audio>或者<video>媒体元素的透明内容。
    或者:零个或多个<source>元素,其后紧跟零个或多个<track>元素,其后紧跟不包含<audio>或者<video>媒体元素的透明内容。
    标记省略(Tag omission)不允许,开始标签和结束标签都不能省略。
    允许的父级元素(Permitted parents)任何接受嵌入内容的元素。
    Permitted ARIA rolesapplication
    DOM 接口(DOM接口)HTMLAudioElement

    属性

    该元素包含全局属性。

    • autoplay布尔属性;如果指定(默认值为"false"!);指定后,音频会马上自动开始播放,不会停下来等着数据载入结束。
    • autobufferTHML5中废弃
      布尔属性;如果指定,音频将会自动开始加载。即使没有设置自动播放。直到媒体缓存满了或者全部音频文件加载完毕,即使是在首次进入时。该属性应该仅仅用在用户可能会选择播放的音频上;例如用户通过“播放音频”链接来到的一个页面。该属性已在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类型的值,表示偏移的秒数。

    备注:HTML5 规范中,时间偏移量值的定义还没有完成,有可能会变更。

    你也可以使用Gecko特有的更加强大的audio API特性在JavaScript 代码中直接生成和控制音频流。详情参见Introducing the audio API extension。

    文件格式

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

    浏览器MP3WavOgg
    Internet ExplorerYESNONO
    ChromeYESYESYES
    FirefoxYESYESYES
    SafariYESYESNO
    OperaYESYESYES

    属性

    属性描述
    autoplaytrue | false如果是 true,则音频在就绪后马上播放。
    controlstrue | false如果是 true,则向用户显示控件,比如播放按钮。
    endnumeric value定义播放器在音频流中的何处停止播放。默认地,声音会播放到结尾。
    loopendnumeric value定义在音频流中循环播放停止的位置,默认是 end 属性的值。
    loopstartnumeric value定义在音频流中循环播放的开始位置。默认是 start 属性的值。
    playcountnumeric value定义音频片断播放多少次。默认是 1。
    srcurl所播放音频的 url。
    startnumeric value定义播放器在音频流中开始播放的位置。默认地,声音在开头进行播放。

    HTML 4.01 与 HTML 5 之间的差异

    <audio>标签是 HTML 5 的新标签。

    全局属性

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

    事件属性

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

    实例

    播放声音:

    <audio controls>
    <source src="horse.ogg" type="audio/ogg">
    <source src="horse.mp3" type="audio/mpeg">
    您的浏览器不支持 audio 元素。
    </audio>

    例子

    基本用法

    <!-- simple audio playback -->
    <audio src="http://developer.mozilla.org/@api/deki/files/2926/=audiotest_(1).ogg" autoplay>
      your browser does not support the <code>audio</code> element.
    </audio>
    
    <!-- audio playback with captions -->
    <audio src="foo.ogg">
      <track kind="captions" src="foo.en.vtt" srclang="en" label="english">
      <track kind="captions" src="foo.sv.vtt" srclang="sv" label="svenska">
    </audio> 
    

    使用<source>元素的<audio>元素

    <audio controls="controls">
      your browser does not support the <code>audio</code> element.
      <source src="foo.wav" type="audio/wav">
    </audio>
    

    上篇:<area>

    下篇:<img>