Audio: 若是你愿意一层一层剥开个人心

时间 2019-11-05

标签 audio 若是愿意一层剥开个人繁體版

原文原文链接

我以为DOM就好像是元素周期表里的元素，JS就好像是实验器材，经过各类化学反应，产生各类魔术。

1 Audio

经过打开谷歌浏览器的dev tools -> Settings -> Elements -> Show user agent shadow DOM, 你能够看到其实Audio标签也是由经常使用的 input标签和div等标签合成的。html

2 基本用法

1 <audio src="http://65.ierge.cn/12/186/372266.mp3">
Your browser does not support the audio element.
</audio>

<br>

2 <audio src="http://65.ierge.cn/12/186/372266.mp3" controls="controls">
Your browser does not support the audio element.
</audio>

<br>

// controlsList属性目前只支持 chrome 58+
3 <audio src="http://65.ierge.cn/12/186/372266.mp3" controls="controls" controlsList="nodownload"> 
Your browser does not support the audio element.
</audio>

<br>

4 <audio controls="controls">
<source src="http://65.ierge.cn/12/186/372266.mp3" type='audio/mp3' />
</audio>

你能够看出他们在Chrome里表现的差别html5

关于audio标签支持的音频类型，能够参考Audio#Supported_audio_coding_formatsgit

3 经常使用属性

autoplay: 音频流文件就绪后是否自动播放
preload: "none" | "metadata" | "auto" | ""github
- "none": 无需预加载
- "metadata": 只须要加载元数据，例如音频时长，文件大小等。
- "auto": 自动优化下载整个流文件
controls： "controls" | "" 是否须要显示控件
loop： "loop" or "" 是否循环播放
mediagroup： string 多个视频或者音频流是否合并
src：音频地址

4 API(重点)

load(): 加载资源
play(): 播放
pause(): 暂停
canPlayType()：询问浏览器以肯定是否能够播放给定的MIME类型
buffered()：指定文件的缓冲部分的开始和结束时间

5 经常使用事件：Media Events(重点)

事件名	什么时候触发
loadstart	开始加载
progress	正在加载
suspend	用户代理有意没法获取媒体数据，没法获取整个文件
abort	主动终端下载资源并非因为发生错误
error	获取资源时发生错误
play	开始播放
pause	播放暂停
loadedmetadata	刚获取完元数据
loadeddata	第一次渲染元数据
waiting	等待中
playing	正在播放
canplay	用户代理能够恢复播放媒体数据，可是估计若是如今开始播放，则媒体资源不能以当前播放速率直到其结束呈现，而没必要中止进一步缓冲内容。
canplaythrough	用户代理估计，若是如今开始播放，则媒体资源能够以当前播放速率一直呈现到其结束，而没必要中止进一步的缓冲。
timeupdate	当前播放位置做为正常播放的一部分而改变，或者以特别有趣的方式，例如不连续地改变。
ended	播放结束
ratechange	媒体播放速度改变
durationchange	媒体时长改变
volumechange	媒体声音大小改变

6 Audio DOM 属性(重点)

6.1 只读属性

duration：媒体时长，数值，单位s
ended: 是否完成播放，布尔值
paused: 是否播放暂停，布尔值

6.2 其余可读写属性(重点)

playbackRate：播放速度，大多数浏览器支持0.5-4， 1表示正常速度，设置该属性能够修改播放速度
volume：0.0-1.0之间，设置该属性能够修改声音大小
muted: 是否静音，设置该属性能够静音
currentTime：指定播放位置的秒数

// 你可使用元素的属性seekable来决定媒体目前能查找的范围。它返回一个你能够查找的TimeRanges 时间对象。
var mediaElement = document.getElementById('mediaElementID');
mediaElement.seekable.start();  // 返回开始时间 (in seconds)
mediaElement.seekable.end();    // 返回结束时间 (in seconds)
mediaElement.currentTime = 122; // 设定在 122 seconds
mediaElement.played.end();      // 返回浏览器播放的秒数

如下方法可使音频以2倍速度播放。chrome

<audio id="wdd" src="http://65.ierge.cn/12/186/372266.mp3" controls="controls">
Your browser does not support the audio element.
</audio>

<script>
    var myAudio = document.getElementById('wdd');
    myAudio.playbackRate = 2;
</script>

7 常见问题及解决方法

录音没法拖动，播放一端就自动中止： https://wenjs.me/p/about-mp3p...
如何隐藏Audio的下载按钮：https://segmentfault.com/a/11...
想找一个简单的录音播放插件： https://github.com/kolber/aud...

8 题外话：在什么地方查权威资料?

8.1 W3C

地址： https://www.w3.org/
国内也有叫：w3school，可是资料实在匮乏，只适合初学者。最好仍是能够在w3.org上查资料segmentfault