属性篇
audioTracks
返回表示可用音频轨道的 AudioTrackList 对象。但是这个属性所有主流浏览器都不支持，也没法测试效果。
document.querySelector('audio').audioTracks
autoplay
我们可以通过js设置元素 autoplay 属性来设置是否自动播放，或者直接在标签上添加 autoplay 属性。
<audio src="audioSrc" autoplay></audio>
// 启用自动播放
document.querySelector('audio').autoplay = true
// 禁止自动播放
document.querySelector('audio').autoplay = false
返回是否在加载完成之后随即播放音频。
console.log(document.querySelector('audio').autoplay) // true or false
buffered
此属性返回一个 TimeRanges 对象，这个对象表示用户音频缓冲范围（缓冲范围指的是已缓冲音频的时间范围。如果用户在音频中跳跃播放，会得到多个缓冲范围）。
TimeRanges 对象，包含一个 length 属性，表示总共有几个缓冲范围。
我们第一次点击某个链接播放音频的时候，会缓冲一次，可以看到缓冲进度条。此时访问 buffered 属性可以看到 lenghth 为1。
注意： 当我们设置了 preload 为 none时是不会进行缓冲的。
console.log(document.querySelector('audio').buffered) // {length: 1}
如果音频时间过长不会一次性缓冲完，当我们点击没有缓冲的地方进行播放，则会开始第二次缓冲，此时的 buffered.length 为2。
console.log(document.querySelector('audio').buffered) // {length: 2}
我们可以访问 TimeRanges 对象原型上的 start 和 end 方法，这两个方法需要传递参数。参数为第几个缓冲范围，第一次缓冲为0。
// 假设此时的 buffered.length = 2
const TimeRanges = document.querySelector('audio').buffered
console.log(`第一段缓冲范围是：${TimeRanges.start(0)}-${TimeRanges.end(0)}`)
// 第一段缓冲范围是：0-202.959
console.log(`第二段缓冲范围是：${TimeRanges.start(1)}-${TimeRanges.end(1)}`)
// 第二段缓冲范围是：231.394-254.152
controller
返回音频的当前媒体控制器，所有主流浏览器都不支持该属性。该属性返回一个 MediaController 对象。
console.log(document.querySelector('audio').controller)
controls
我们可以通过js设置元素 controls 属性来设置是否显示标准的音频控件，或者直接在标签上添加 controls 属性。
<audio src="audioSrc" controls></audio>
// 启用控件
document.querySelector('audio').controls = true
// 禁用控件
document.querySelector('audio').controls = false
返回是否显示标准的音频控件。
console.log(document.querySelector('audio').controls) // true or false
crossOrigin
设置或返回音频/视频的 CORS 设置，这应该是跨域相关的配置，但是我没用过。
<audio src="audioSrc" crossorigin=""></audio>
console.log(document.querySelector('audio').crossOrigin)
currentSrc
返回当前音频的 URL。如果未设置则返回空字符串。
console.log(document.querySelector('audio').currentSrc)
currentTime
设置音频播放位置（传入秒），设置之后会跳转到指定位置。
如果 audio 标签 src 属性为空，设置 currentTime 可以看到控件上的时间发生变化，例如我们修改 currentTime 为 120秒，控件时间显示为 2:00 / 0:00。此时指定音频路径后，音频也跳转到两分钟的位置如果音频时长为五分钟，那么此时控件上我们看到就是 2:00 / 5:00 这样 。
设置的 currentTime 并不会修改当前播放状态，如果处于未播放状态，修改 currentTime 后会跳转到指定位置，但不会进行播放。如果处于播放状态修改之后会跳转到指定位置后继续播放。
如果设置的时间超过音频时长则会直接跳转至结束位置。
// 跳转到 1分20秒
document.querySelector('audio').currentTime = 80
访问 audio 标签的 currentTime 属性可以获取当前播放位置，返回一个浮点数
console.log(document.querySelector('audio').currentTime) // 42.090776
有些时候我们需要一直获取当前播放位置，手动获取 currentTime 当然不是理想操作，在事件篇里我们将介绍 timeupdate 方法，这个方法会在 currentTime 改变的时候就通知你并将当前的 currentTime 也返回给你。
defaultMuted
设置或返回音频是否默认静音，只有 Chrome 和 Safari 6 支持 defaultMuted 属性。
设置该属性仅会改变默认的静音状态，而不是当前的，你设不设置好像和你播放音频时是否静音没有什么关系，也可能是我测试方法不对。要改变为静音状态，请使用 muted 属性。
document.querySelector('audio').defaultMuted = true
console.log(document.querySelector('audio').defaultMuted) // true
defaultPlaybackRate
设置或者返回音频默认播放速度。这个属性修改的是默认播放速度，而不是当前的。
只有在没有指定 audio 标签 src 属性值的时候设置，然后再指定音频 URL 才会生效。所以通常使用 playbackRate
只有 Internet Explorer 10、Firefox 和 Chrome 支持 defaultPlaybackRate 属性。
注意： Safari、Opera 或 Internet Explorer 9 及之前的版本不支持 defaultPlaybackRate 属性。
function changeRate() {
const audio = document.querySelector('audio')
audio.defaultPlaybackRate = 0.25
audio.src = '音频URL'
audio.play()
console.log(audio.defaultPlaybackRate) // 0.25
}
defaultPlaybackRate 可选值如下，默认为1。
0.25 | 0.5 | 0.75 | 1 | 1.25 | 1.5 | 1.75 | 2
将 playbackRate 设为负值不可以实现倒播。
duration
返回当前音频的长度（秒数）。
如果未设置音频，则返回 NaN。如果媒体数据可用但长度未知，则此值为NaN。 如果媒体流式传输且没有预定义长度，则值为Inf。
document.querySelector('audio').duration // 257.645714
ended
用于检查音频播放是否结束。
console.log(document.querySelector('audio').ended) // true or false
error
获得音频错误状态，返回一个 MediaError 对象。MediaError 对象的 code 属性包含了音频/视频的错误状态。
只有 Internet Explorer 9 支持 error 属性。
console.log(document.querySelector('aduio').error.code)
返回值
- 1 = 'MEDIA_ERR_ABORTED' // 取回过程被用户中止
- 2 = 'MEDIA_ERR_NETWORK' // 当下载时发生错误
- 3 = 'MEDIA_ERR_DECODE' // 当解码时发生错误
- 4 = 'MEDIA_ERR_SRC_NOT_SUPPORTED' // 不支持音频/视频
loop
设置或返回音频是否应该在结束时重新播放当前音频。可以通过标签属性直接设置，也可以通过js设置。
<audio src="audioSrc" loop></audio>
document.querySelector('audio').loop = true
console.log(document.querySelector('audio').loop) // true
mediaGroup
设置或返回音频所属的媒体组合的名称。
媒体组合允许两个或更多音频元素保持同步。
具体媒体组合的作用是什么？能不能在不同播放位置下的媒体组合设置一个播放位置，然后都从这个位置开始播放？我不会搞。
const audio1 = document.querySelector('.audio1')
const audio2 = document.querySelector('.audio2')
audio1.mediaGroup = 'test'
audio2.mediaGroup = 'test'
console.log(audio1.mediaGroup, audio2.mediaGroup) // test test
muted
设置或返回音频是否应该被静音（关闭声音）。可以通过标签属性或者直接通过js进行操作。
<audio src="audioSrc" muted></audio>
document.querySelector('audio').muted = false
console.log(document.querySelector('audio').muted) // false
networkState
返回音频的当前网络状态（activity）。
console.log(document.querySelector('audio').networkState)
返回值
- 0 = 'NETWORK_EMPTY' // 还没有数据。并且 readyState 的值是 HAVE_NOTHING。
- 1 = 'NETWORK_IDLE' // 音频是活动的且已选取资源，但并未使用网络
- 2 = 'NETWORK_LOADING' // 浏览器正在下载数据
- 3 = 'NETWORK_NO_SOURCE' // 未找到音频/视频来源
paused
返回音频是否已暂停。
console.log(document.querySelector('audio').paused) // true or false
playbackRate
设置或返回音频/视频的当前播放速度。播放过程中设置立即生效。
document.querySelector('audio').playbackRate = 0.5
console.log(document.querySelector('audio').playbackRate) // 0.5
属性值与 defaultPlaybackRate 相同。
played
返回 TimeRanges 对象，与 buffered 相同。不过 played 表示已经播放的音频范围。
// 假设此时的 played.length = 2
const TimeRanges = document.querySelector('audio').played
console.log(`第一段播放范围是：${TimeRanges.start(0)}-${TimeRanges.end(0)}`)
// 第一段播放范围是：0-202.959
console.log(`第二段播放范围是：${TimeRanges.start(1)}-${TimeRanges.end(1)}`)
// 第二段播放范围是：231.394-254.152
preload
设置或返回是否在页面加载后立即加载音频。可以设置标签属性或者通过js来设置。
<audio src="audioSrc" preload="auto"></audio>
document.querySelector('audio').preload = 'auto'
console.log(document.querySelector('audio').preload)
属性值
- auto：一旦页面加载，则开始加载音频。实际效果为一旦为 audio 指定 src就获取音频数据可以看到控件已经有了时长显示，并且可以看到缓冲条已经加载。
- metadata： 当页面加载后仅加载音频的元数据。只能看到控件上时长变化，并不会缓冲。
- none：页面加载后不应加载音频。控件上时间也不会变化还是00:00，并且也不会进行缓冲，只有当点击播放按钮之后，才会显示时长并且进行缓冲。
个人感觉设置成metadata比较好，让用户知道已经切换了音频，并且不会缓冲也不消耗流量。
readyState
返回音频当前就绪状态。
console.log(document.querySelector('.audio').readyState)
返回值
- 0 = HAVE_NOTHING - 没有关于音频是否就绪的信息
- 1 = HAVE_METADATA - 关于音频就绪的元数据
- 2 = HAVE_CURRENT_DATA - 关于当前播放位置的数据是可用的，但没有足够的数据来播放下一帧/毫秒
- 3 = HAVE_FUTURE_DATA - 当前及至少下一帧的数据是可用的
- 4 = HAVE_ENOUGH_DATA - 可用数据足以开始播放
seekable
返回 TimeRanges 对象。
TimeRanges 对象表示音频中用户可寻址的范围（指的是用户在音频中可寻址（移动播放位置）的时间范围）。一般的范围就是从0到音频总时长的秒数
const timeRanges = document.querySelector('audio').seekable
console.log(timeRanges.start(0), timeRanges.end(0)) // 0 221.23102
seeking
返回用户目前是否正在音频中寻址。
寻址中（Seeking）指的是用户在音频/视频中移动/跳跃到新的位置。最简单的实践就是点击或拖动来改变播放位置。
<audio src="audioSrc"></audio>
<script>
const audio = document.querySelector('audio')
audio.addEventListener('timeupdate', function(e) {
console.log(this.seeking)
})
</script>
src
设置或返回音频/视频的当前来源。直接通过设置标签属性或者通过js来指定。
<audio src="audioSrc"></audio>
document.querySelector('audio').src = 'audioSrc'
console.log(document.querySelector('audio').src)
属性值
- 绝对 URL - 指向另一个网站（比如 src="www.example.com/test.mp3"）
- 相对 URL - 指向网站内的一个文件（比如 src="test.mp3"）
startDate
返回 Date 对象，表示音频的当前时间线偏移。
startDate 属性用于获得经由因特网的精确的音频流同步。
所有主流浏览器都不支持。
console.log(document.querySelector('audio').startDate)
textTracks
获得可用文本轨道的数量，返回 TextTrackList 对象。
Internet Explorer 10、Opera、Chrome 和 Safari 6 支持 textTracks 属性。
注意： Internet Explorer 9 及之前的版本不支持 textTracks 属性。
volume
设置或返回音频的当前音量。
document.querySelector('audio').volume = 0.2
console.log(document.querySelector('audio').volume)
属性值为 0.0 与 1.0 之间的数字。
事件篇
待更新。。。
