文章の目录
- 1、audio是什么了
- 2、属性
- 2.1、autoplay
- 2.2、controls
- 2.3、loop
- 2.4、src
- 2.5、muted
- 2.6、preload
- 2.7、duration 只读
- 2.8、disableRemotePlayback
- 2.9、currentTime
- 2.10、crossorigin
- 3、注意点
- 4、source
- 4.1、属性
- 4.1.1、media
- 4.1.2、sizes
- 4.1.3、src
- 4.1.4、srcset
- 4.1.5、type
- 4.2、注意点
- 4.3、audio支持的类型
- 5、示例
- 写在最后
1、audio是什么了
<audio> 元素用于在文档中嵌入音频内容。<audio> 元素可以包含一个或多个音频资源，这些音频资源可以使用 src 属性或者 <source> 元素来进行描述：浏览器将会选择最合适的一个来使用。也可以使用 MediaStream 将这个元素用于流式媒体。
2、属性
该元素包含全局属性。
2.1、autoplay
布尔值属性；声明该属性，音频会尽快自动播放，不会等待整个音频文件下载完成。
2.2、controls
如果声明了该属性，浏览器将提供一个包含声音，播放进度，播放暂停的控制面板，让用户可以控制音频的播放。
2.3、loop
布尔属性；如果声明该属性，将循环播放音频。
2.4、src
嵌入的音频的URL。你可以在audio元素中使用 <source> 元素来替代该属性指定嵌入的音频。
2.5、muted
表示是否静音的布尔值。默认值为 false，表示有声音。
2.6、preload
枚举属性，让开发者自行思考来示意浏览器使用何种加载方式以达到最好的用户体验。可以是以下属性之一：
- none：示意用户可能不会播放该音频，或者服务器希望节省带宽；换句话说，该音频不会被缓存；
- metadata：示意即使用户可能不会播放该音频，但获取元数据 (例如音频长度) 还是有必要的；
- auto：示意用户可能会播放音频；换句话说，如果有必要，整个音频都将被加载，即使用户不期望使用；
- 空字符串：等效于auto属性；
不同浏览器会有自己的默认值，规范建议的默认值为 metadata。
2.7、duration 只读
这是一个双精度浮点数，指明了音频在时间轴中的持续时间（总长度），以秒为单位。如果元素上没有媒体，或者媒体是不可用的，那么会返回 NaN。如果媒体找不到确切的结尾（比如不确定长度的直播流，网络电台，或者是通过 WebRTC 连接的流），那么这个值将返回 +Infinity。
2.8、disableRemotePlayback
这是一个布尔值，用来禁用在远程设备上进行进度控制的能力。这些设备通过有线（比如 HDMI, DVI）或无线技术（比如Miracast，Chromecast，DLNA，AirPlay）来与 web 连接。
在 Safari 中，你能使用 x-webkit-airplay=“deny” 作为兜底方案。
2.9、currentTime
读取 currentTime 属性将返回一个双精度浮点值，用以标明以秒为单位的当前音频的播放位置。如果音频的元数据暂时无法访问——这意味着你无法的知道媒体的开始或持续时间。这时，currentTime 相对应的，能够被用于改变重播的时间。否则，设置 currentTime 将设置当前的播放位置，并且会自动搜寻到媒体的那个位置，如果媒体目前已经被加载的话。
如果音频是以流的形式加载的，并且数据超出了媒体的缓冲区（buffer），user agent 可能无法获取资源的某些部分。另一些音频的时间轴可能并非从 0 秒开始，所以设置 currentTime 到一个开始时间之前的时间可能会失败。举个例子，如果音频媒体的时间轴从 12 小时开始，把 currentTime 设置到 3600 将会尝试把当前播放位置设置到媒体的开始位置之前，从而导致错误。getStartDate() 方法能够用于确定媒体时间轴的开始位置。
2.10、crossorigin
枚举属性 展示音频资源是否可以通过 CORS 加载。支持CORS的资源 可以被 <canvas> 元素复用而不污染。可选值如下：
- anonymous
在发送跨域请求时不携带验证信息。换句话说，浏览器在发送 Origin: HTTP 请求首部时将不携带 cookie、 X.509 安全令牌、也不会执行任何 HTTP 基本认证。如果服务器没有给予源站信任（也就是说没有设置 Access-Control-Allow-Origin: 响应首部），那么图片就被认为是污染的，它就会被限制使用。
- use-credentials
在发送跨域请求时携带验证信息。换句话说，在发送 Origin: HTTP 请求首部时将携带 cookie、安全令牌、并且执行 HTTP 基本认证。如果服务器没有给予源站信任（通过设置Access-Control-Allow-Credentials: 响应首部）那么图片就被认为是污染的，它就会被限制使用。
在未指定时，资源将不通过 CORS 请求来获取（也就是不发送 Origin: 请求首部），以保护 <canvas> 元素中未污染的内容。如果验证失败，它会表现的好像 anonymous 选项是选中的。
3、注意点
- 在浏览器不支持该元素时，会显示
<audio></audio>标签之间的内容作为回退； - 自动播放音频（或有声视频）可能会破坏用户体验，所以应该尽可能避免。如果你一定要提供自动播放功能，你应该加入开关（让用户主动打开自动播放）；
- autoplay 属性的优先级高于 preload。如果 autoplay 被指定，浏览器将显式地开始下载媒体以供播放；
- 浏览器并不被强制遵循preload属性的规范，该属性只是一个建议与提示。
- 浏览器对文件类型和音频编码的支持各有不同，你可以使用内嵌的
<source>元素提供不同的播放源。浏览器会使用第一个它支持的播放源； - audio 开始标签和结束标签都不能省略；
- 谷歌浏览器把音频标签的自动播放禁止了；
4、source
<source> 元素为 <picture>，<audio> 或者 <video> 元素指定多个媒体资源。这是一个空元素。它通常用于以不同浏览器支持的多种格式提供相同的媒体内容。
4.1、属性
该元素包含全局属性。
4.1.1、media
媒体资源的查询媒体查询计划
4.1.2、sizes
源大小列表，描述由源表示的图像最终呈现宽度。每个源大小由逗号分隔的媒体 condition-length 对组成。在布局页面之前，浏览器使用这些信息来确定要使用srcset中定义的图像。请注意，只有在为宽度尺寸描述符提供srcset而不是像素比率值时，大小才会起作用。
这个属性只有在source是picture元素的直接孩子才起作用。
4.1.3、src
请求对于 audio 和video的资源地址。当source为picture的孩子时，这个值被忽略。
4.1.4、srcset
一个或多个字符串由逗号分隔的列表显示一组可能的图像由浏览器使用的源代码。
每个字符串的组成为 url + 一个宽度描述符（300 w) + 一个像素密度描述符（1x）
注意：
- 列表中的每个字符串必须有一个宽度描述符或者一个像素密度描述符时才是有效的；
4.1.5、type
MIME媒体类型的资源，与编解码器可选参数。
4.2、注意点
- source是一个空元素；
- source 必须有开始标签，但是不一定有结束标签；
4.3、audio支持的类型
5、示例
<audio autoplay controls>
<source src="./陆虎-雪落下的声音.mp3" type="audio/mpeg">
</audio>
