编程笔记 html5&css&js 030 HTML音频

编程笔记 html5&css&js 030 HTML音频

• 一、`<audio>`元素
• 二、属性
• 三、事件
• [三、使用 CSS 设置样式](#三、使用 CSS 设置样式)
• 练习
• 小结

有时候网页上也需要嵌入音频。比如播放歌曲或老师讲课的音频等。

一、<audio>元素

<audio> HTML 元素用于在文档中嵌入音频内容。<audio> 元素可以包含一个或多个音频资源，这些音频资源可以使用 src 属性或者 <source> 元素来进行描述：浏览器将会选择最合适的一个来使用。也可以使用 MediaStream 将这个元素用于流式媒体。

二、属性

该元素包含全局属性。
autoplay

布尔值属性；声明该属性，音频会尽快自动播放，不会等待整个音频文件下载完成。

备注： 自动播放音频（或有声视频）可能会破坏用户体验，所以应该尽可能避免。如果你一定要提供自动播放功能，你应该加入开关（让用户主动打开自动播放）。然而，如果需要创建一些媒体元素，其播放源由用户在稍后设置，自动播放就会很有用。想了解如果正确使用自动播放，可参见我们的自动播放指南。
controls

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

枚举属性 展示音频资源是否可以通过 CORS 加载。支持 CORS 的资源可以被 元素复用而不污染。可选值如下：
anonymous

在发送跨域请求时不携带验证信息。换句话说，浏览器在发送Origin: HTTP 请求首部时将不携带 cookie、X.509 安全令牌、也不会执行任何 HTTP 基本认证。如果服务器没有给予源站信任（也就是说没有设置 Access-Control-Allow-Origin: 响应首部），那么图片就被认为是污染的，它就会被限制使用。
use-credentials

在发送跨域请求时携带验证信息。换句话说，在发送Origin: HTTP 请求首部时将携带 cookie、安全令牌、并且执行 HTTP 基本认证。如果服务器没有给予源站信任（通过设置Access-Control-Allow-Credentials: 响应首部）那么图片就被认为是污染的，它就会被限制使用。在未指定时，资源将不通过 CORS 请求来获取（也就是不发送 Origin:请求首部），以保护 元素中未污染的内容。如果验证失败，它会表现的好像 anonymous 选项是选中的。查看 CORS settings attributes (en-US) 来获取更多信息。
currentTime

读取 currentTime 属性将返回一个双精度浮点值，用以标明以秒为单位的当前音频的播放位置。如果音频的元数据暂时无法访问------这意味着你无法的知道媒体的开始或持续时间。这时，currentTime 相对应的，能够被用于改变重播的时间。否则，设置 currentTime 将设置当前的播放位置，并且会自动搜寻到媒体的那个位置，如果媒体目前已经被加载的话。如果音频是以流的形式加载的，并且数据超出了媒体的缓冲区（buffer），user agent 可能无法获取资源的某些部分。另一些音频的时间轴可能并非从 0 秒开始，所以设置 currentTime 到一个开始时间之前的时间可能会失败。举个例子，如果音频媒体的时间轴从 12 小时开始，把 currentTime 设置到 3600 将会尝试把当前播放位置设置到媒体的开始位置之前，从而导致错误。getStartDate() 方法能够用于确定媒体时间轴的开始位置。
disableRemotePlayback 实验性

这是一个布尔值，用来禁用在远程设备上进行进度控制的能力。这些设备通过有线（比如 HDMI, DVI）或无线技术（比如 Miracast, Chromecast, DLNA, AirPlay,）来与 web 连接。请参考 this proposed specification 来获取更多信息。

备注： 在 Safari 中，你能使用 x-webkit-airplay="deny" 作为兜底方案。
duration 只读

这是一个双精度浮点数，指明了音频在时间轴中的持续时间（总长度），以秒为单位。如果元素上没有媒体，或者媒体是不可用的，那么会返回 NaN。如果媒体找不到确切的结尾（比如不确定长度的直播流，网络电台，或者是通过 WebRTC 连接的流），那么这个值将返回 +Infinity。
loop

布尔属性；如果声明该属性，将循环播放音频。
muted

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

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

none: 示意用户可能不会播放该音频，或者服务器希望节省带宽；换句话说，该音频不会被缓存；

metadata: 示意即使用户可能不会播放该音频，但获取元数据 (例如音频长度) 还是有必要的。

auto: 示意用户可能会播放音频；换句话说，如果有必要，整个音频都将被加载，即使用户不期望使用。

空字符串 : 等效于auto属性。不同浏览器会有自己的默认值，规范建议的默认值为 metadata。

备注： autoplay 属性的优先级高于 preload。如果 autoplay 被指定，浏览器将显式地开始下载媒体以供播放。

浏览器并不被强制遵循该属性的规范，该属性只是一个建议与提示。
src

嵌入的音频的 URL。该 URL 应遵从 HTTP access controls (en-US). 这是一个可选属性；你可以在 audio 元素中使用 元素来替代该属性指定嵌入的音频。

三、事件

事件名称	触发时机
audioprocess (en-US)	一个 ScriptProcessorNode 的输入缓冲区已经准备开始处理。
canplay	浏览器已经可以播放媒体，但是预测已加载的数据不足以在不暂停的情况下顺利将其播放到结尾（即预测会在播放时暂停以获取更多的缓冲区内容）
canplaythrough	浏览器预测已经可以在不暂停的前提下将媒体播放到结束。
complete	一个 OfflineAudioContext 的渲染已经中止。
durationchange	duration 属性发生了变化。
emptied (en-US)	媒体置空。举个例子，当一个媒体已经加载（或部分加载）的情况下话调用 load() 方法，这个事件就将被触发。
ended	播放到媒体的结束位置，播放停止。
loadeddata	媒体的第一帧加载完成。
loadedmetadata	元数据加载完成。
pause	播放暂停。
play	播放开始。
playing	因为缺少数据而暂停或延迟的状态结束，播放准备开始。
ratechange (en-US)	播放速度变化。
seeked (en-US)	一次获取 操作结束。
seeking (en-US)	一次获取 操作开始。
stalled (en-US)	用户代理试图获取媒体数据，但数据意外地没有进入。
suspend (en-US)	媒体加载挂起。
timeupdate	由 currentTime 指定的时间更新。
volumechange (en-US)	音量变化。
waiting (en-US)	因为暂时性缺少数据，播放暂停。

使用说明

浏览器对 文件类型 和 音频编码 (en-US) 的支持各有不同，你可以使用内嵌的 元素提供不同的播放源。浏览器会使用第一个它支持的播放源：

<audio controls>
  <source src="myAudio.mp3" type="audio/mpeg" />
  <source src="myAudio.ogg" type="audio/ogg" />
  <p>
    Your browser doesn't support HTML5 audio. Here is a
    <a href="myAudio.mp4">link to the audio</a> instead.
  </p>
</audio>

其他使用说明：

如果你没有声明 controls 属性，音频播放器不会包含浏览器的默认控件。但你可以使用 JavaScript 和 HTMLMediaElement API 创建自己的自定义控件。

为了更精确地控制你的音频内容，HTMLMediaElement 会触发多种不同的 事件 (en-US)。这也提供了一个查看音频获取过程的方式，你可以查看错误或检测什么时候可以开始播放或操作。

你还可以使用 Web Audio API 以从 JavaScript 代码直接生成和操纵音频流，而非流式播放已存在的音频文件。
<audio> 元素不能像 <video> 元素一样附加副标题（subtitle）或说明标题（caption）。更多有用的信息和解决方法参见 Ian Devlin 的 WebVTT and Audio。

三、使用 CSS 设置样式

<audio> 元素没有自带的固有视觉样式，除非如果声明了 controls 属性，则会显示浏览器的默认控件。

默认控件的 display 的默认值为 inline。将该值设为 block 通常会对定位和布局有好处，除非你想将控件放在文本块或类似元素中。你可以使用作用于整个控件的属性来为其设置样式。例如可用 border、border-radius、padding, margin 等等。但你不能设置音频播放器中的单个组件（如改变按钮大小、改变图标或字体等）。控件在不同的浏览器中也有所不同。

如果在跨浏览器中得到一致的外观和体验，你需要创建自定义控件；自定义控件可以根据你的需求任意设置样式，还可以使用 JavaScript 和 HTMLMediaElement API 来设置更多功能。

视频播放器样式基础 (en-US) 提供了一些有用的样式技术，这篇文章围绕 <video> 而写，但大部分都可以用于 <audio>。

练习

<!DOCTYPE html>
<html lang="zh-cn">
    <title>编程笔记 html5&css&js HTML音频</title>
    <meta charset="utf-8" />
    <style>
        body {
            color: cyan;
            background-color: teal;
        }
        .container {
            width: 500px; /* 设置容器的宽度 */
            margin: 0 auto; /* 将左右边距设置为自动 */
            line-height: 2;
        }
    </style>
    <body>
        <div class="container">
            <h1>约翰施特劳斯:蓝色的多瑙河</h1>
            <p>HTML5</p>
            <audio controls="controls">
                <source src="mp3/TRACK3-蓝色的多瑙河.MP3" type="audio/mpeg" />
            </audio>
        </div>
    </body>
</html>

小结

直接使用<autdio>元素可能不太满足实际需要，实际使用时还要详细配置或使用第三方提供的插件。