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
: 媒体时长,数值, 单位sended
: 是否完成播放,布尔值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倍速度播放。
<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上查资料
8.2 MDN
地址: https://developer.mozilla.org...
8.3 wikipedia
地址:https://en.wikipedia.org/wiki...
9 参考资料
- W3C: the-audio-element
- wikipedia: HTML5 Audio
- W3C: HTML/Elements/audio
- Native Audio in the browser
- HTMLMediaElement.playbackRate
- 使用 HTML5 音频和视频
Audio: 如果你愿意一层一层剥开我的心相关推荐
- Synchronized解析——如果你愿意一层一层剥开我的心
前言 synchronized,是解决并发情况下数据同步访问问题的一把利刃.那么synchronized的底层原理是什么呢?下面我们来一层一层剥开它的心,就像剥洋葱一样,看个究竟. (想自学习编程的小 ...
- synchronized同步机制——如果你愿意一层一层剥开我的心
前言 synchronized,是解决并发情况下数据同步访问问题的一把利刃.那么synchronized的底层原理是什么呢?下面我们来一层一层剥开它的心,就像剥洋葱一样,看个究竟. Synchroni ...
- CNN剖析:如果你愿意一层一层剥开CNN的心
机器不学习 www.jqbxx.com : 深度聚合机器学习.深度学习算法及技术实战 如果你愿意一层一层剥开CNN的心--你会明白它究竟在做什么 一直以来,卷积神经网络对人们来说都是一个黑箱,我们只知 ...
- Synchronized解析——一层一层剥开洋葱的心
Synchronized解析--一层一层剥开洋葱的心 引入:https://juejin.im/post/5d5374076fb9a06ac76da894#heading-9 前言 synchroni ...
- 生活就像个洋葱,一层一层剥开它,总有一层让你流泪
Life is like an onion; you peel it off one layer at a time, and sometimes you weep. 生活就像个洋葱,一层一层剥开它, ...
- C语言《C Primer Plus 》 演示递归,递归就像洋葱,假设一个洋葱横切,从外面一层一层打开,每一层都调用一次函数
<C Primer Plus >例题解析 程序清单 9.6 recur.c 程序 #define _CRT_SECURE_NO_WARNINGS 1 #include<stdio.h ...
- PAT甲级1127 ZigZagging on a Tree (30分):[C++题解]之字形层次遍历树bfs实现一层一层读入
文章目录 题目分析 题目链接 题目分析 分析 给定中序遍历和后序遍历,先建树: 后面就是写一个bfs,层序遍历稍微改改即可. bfs要做的修改是如何一层一层的读入.令根结点是第一层,本题的之字形遍历就 ...
- JSON:如果你愿意一层一层剥开我的心,你会发现...这里水很深——深入理解JSON...
2019独角兽企业重金招聘Python工程师标准>>> 我们先来看一个JS中常见的JS对象序列化成JSON字符串的问题,请问,以下JS对象通过JSON.stringify后的字符串是 ...
- 多层select,一定要仔细从里到外一层一层的剥开
今天修改客户反馈的一个bug,客户描述为,选择相关联系人有时候会提示为空,而正常情况为上次的选择记录. 首先在一堆的js里面梳理,确认存储记录没有问题,而且在只有一条数据时没有问题,当出现第二条数据时 ...
最新文章
- ROS中Remap标签详解
- Lync Server 2010移动功能部署PART B:外部篇
- Sql Server 得到当月第一天
- 【数据平台】sqoop支持hive和mysql互导的基本语句格式
- 各自用一句话来概括MVC、MVP、MVVM的差异特点
- JVM内存结构 VS Java内存模型 VS Java对象模型
- 桶排序算法c语言10个数组,桶排序算法
- Task 6.1 校友聊之NABCD模型分析
- [争什么! 掺在一起做撒尿牛丸啊! 笨蛋]ASP.NET Core 2.0 + EF6 + Linux +MySql混搭
- java中this用法
- 炫酷的2022网页特效网站源码
- SSD(ECCV 2016)
- 什么是光时域反射仪,OTDR的工作原理是什么
- 欢迎使通过网页免费下载全网歌曲【转载】
- 人民币小写转大写算法
- 全栈修炼:如何从Web前端迈向全栈开发
- 蜂蜜梨文案:销售水果蜂蜜梨文案,朋友圈水果文案蜂蜜梨
- 如何判断程序的复杂程度:时间和空间复杂度
- ai人工智能在手机的应用_常识在人工智能中仍然不常见
- 用matlab实现理查森外推算法,Matlab数值积分(2)