Audio: 如果你愿意一层一层剥开我的心

wangjuntytl 发布于2019-08-20 17:14 / 2354人阅读

摘要：基本用法属性目前只支持你可以看出他们在里表现的差异关于标签支持的音频类型，可以参考常用属性音频流文件就绪后是否自动播放无需预加载只需要加载元数据，例如音频时长，文件大小等。

我觉得DOM就好像是元素周期表里的元素，JS就好像是实验器材，通过各种化学反应，产生各种魔术。

1 Audio

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

2 基本用法

1 




2 




// controlsList属性目前只支持 chrome 58+
3 




4

你可以看出他们在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: 是否静音，设置该属性可以静音

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倍速度播放。

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 音频和视频

云服务器 GPU云服务器第一层更上一层楼在哪一层负载均衡数据仓库一般在那一层

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83425.html

JSON：如果你愿意一层一层剥开我的心，你会发现...这里水很深——深入理解JSON

摘要：说句玩笑话，如果是基于的，可能就叫了，形式可能就是这样的了，如果这样，那么可能现在是和比较密切了。此外，还有一个函数，我们较少看到，但是它会影响。我们先来看一个JS中常见的JS对象序列化成JSON字符串的问题，请问，以下JS对象通过JSON.stringify后的字符串是怎样的？先不要急着复制粘贴到控制台，先自己打开一个代码编辑器或者纸，写写看，写完再去仔细对比你的控制台输出，如果有...

Baaaan 2019-08-21 15:29 评论0 收藏0
Vue+ElementUI: 手把手教你做一个audio组件

摘要：不显示下载不显示静音不显示音量条不显示进度条只能播放一个不要快进按钮例如父组件这样回雪月花青春一点点语法大多数时候，我们希望页面上播放一个音频时，其他音频可以暂停。可以把一个类数组转化成数组，这个是我常用的。 showImg(https://segmentfault.com/img/remote/1460000016177005?w=619&h=343); 目的本项目的目的是教你如...

U2FsdGVkX1x 2019-08-22 11:19 评论0 收藏0
JS或Jquery

摘要：大潮来袭前端开发能做些什么去年谷歌和火狐针对提出了的标准，顾名思义，即的体验方式，我们可以戴着头显享受沉浸式的网页，新的标准让我们可以使用语言来开发。 VR 大潮来袭 --- 前端开发能做些什么去年谷歌和火狐针对 WebVR 提出了 WebVR API 的标准，顾名思义，WebVR 即 web + VR 的体验方式，我们可以戴着头显享受沉浸式的网页，新的 API 标准让我们可以使用 ...

CatalpaFlat 2019-08-22 11:17 评论0 收藏0
原理解释 - 收藏集 - 掘金

摘要：巧前端基础进阶全方位解读前端掘金我们在学习的过程中，由于对一些概念理解得不是很清楚，但是又想要通过一些方式把它记下来，于是就很容易草率的给这些概念定下一些方便自己记忆的有偏差的结论。计算机程序的思维逻辑 (83) - 并发总结 - 掘金从65节到82节，我们用了18篇文章讨论并发，本节进行简要总结。多线程开发有两个核心问题，一个是竞争，另一个是协作。竞争会出现线程安全问题，所以，本...

AlphaGooo 2019-08-21 11:41 评论0 收藏0