demo完整代码，可在本项目上进行测试，或者提取组件到自己的项目中。
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
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
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 也返回给你。
duration
返回当前音频的长度（秒数）。
如果未设置音频，则返回 NaN。如果媒体数据可用但长度未知，则此值为NaN。 如果媒体流式传输且没有预定义长度，则值为Inf。
document.querySelector('audio').duration // 257.645714
ended
用于检查音频播放是否结束。
console.log(document.querySelector('audio').ended) // true or false
loop
设置或返回音频是否应该在结束时重新播放当前音频。可以通过标签属性直接设置，也可以通过js设置。
<audio src="audioSrc" loop></audio>
document.querySelector('audio').loop = true
console.log(document.querySelector('audio').loop) // true
muted
设置或返回音频是否应该被静音（关闭声音）。可以通过标签属性或者直接通过js进行操作。
<audio src="audioSrc" muted></audio>
document.querySelector('audio').muted = false
console.log(document.querySelector('audio').muted) // false
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 相同。
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比较好，让用户知道已经切换了音频，并且不会缓冲也不消耗流量。
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"）
volume
设置或返回音频的当前音量。
document.querySelector('audio').volume = 0.2
console.log(document.querySelector('audio').volume)
属性值为 0.0 与 1.0 之间的数字。
