Audio: 如果你愿意一层一层剥开我的心
栏目: JavaScript · 发布时间: 7年前
内容简介:Audio: 如果你愿意一层一层剥开我的心
我觉得DOM就好像是元素周期表里的元素,JS就好像是实验器材,通过各种化学反应,产生各种魔术。
1 Audio
通过打开谷歌浏览器的dev tools -> Settings -> Elements -> Show user agent shadow DOM, 你可以看到其实Audio标签也是由常用的 input标签和div等标签合成的。
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里表现的差异
关于audio标签支持的音频类型,可以参考 Audio#Supported_audio_coding_formats
3 常用属性
-
autoplay: 音频流文件就绪后是否自动播放
-
preload: "none" | "metadata" | "auto" | ""
-
"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: 是否静音
以下方法可以使音频以2倍速度播放。
<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 参考资料
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
WebKit技术内幕
朱永盛 / 电子工业出版社 / 2014-6 / 79.00元
《WebKit技术内幕》从炙手可热的HTML5 的基础知识入手,重点阐述目前应用最广的渲染引擎项目——WebKit。不仅着眼于系统描述WebKit 内部渲染HTML 网页的原理,并基于Chromium 的实现,阐明渲染引擎如何高效地利用硬件和最新技术,而且试图通过对原理的剖析,向读者传授实现高性能Web 前端开发所需的宝贵经验。 《WebKit技术内幕》首先从总体上描述WebKit 架构和组......一起来看看 《WebKit技术内幕》 这本书的介绍吧!