【Web Audio API】 — 那些年的 web audio
转 TAT.Jdo:【Web Audio API】 — 那些年的 web audio
这主题主要是早期对 web audio api的一些尝试,这里整理一下以便以后翻阅,如有错误,诚请指正。
在这之前,先回顾一下那些年我们一起走过的web audio:
<bgsound>
在我印象当中,bgsound是个很古老的东西,接触互联网之后,那时兴起的个人blog都有一个增加小组件或者背景音乐的功能,就是允许你贴入一段代码来实现,那是我最早接触bgsound的时候;当然那时也只是会ctrl+c/v ~~
网上翻来些资料,大概是这样的:
早在1996年,IE3.0定义了<bgsound>的标签,这应该web最早的一个能播放音频的标签;但它却从未成为标准,由始至终只有IE支持该标签;提供的功能比较有限,简单的后台自动播放,支持.wav|.mid|.ua格式音频;
<embed>
IE推出bgsound之后没多久,作为当年浏览器厂商的大哥 – NetScape同年即推出了功能类似的标签<embed>;
个人觉得<embed>早期相对于<bgsound>而言,最大的两个特色:
1.有界面交互,可以让用户控制播放/暂停(该属性可选);
2.不止能播放音频格式文件,还能播放当时比较高端的VRML Live3D图形动画。
以浏览器厂商老大的身份,很快IE3V2+, 以及后续的 safari, opare, firefox均支持了<embed>。
<object>
随着web的快速发展,标准变得越来越重要,这时就有了W3C存在的理由,1997年伴随着HTML4的到来,W3C引入了<object>标签,囊括了图片、音频、视频等格式文件,可以说非常彪悍;作为第一款可以跨浏览器间播放音频的标签,基本能满足我们当时对嵌入媒体的欲望,但<object>同样存在自己的弊端,例如标签臃肿,依赖插件,SEO困难等;
<audio>
08年初,第一份正式的HTML5草案发布,引入更新的富媒体元素<video> <audio> <canvas>,这些标签的引入最大目的还是为了减少web富媒体应用对插件的依赖。仅从标签名来说就能很好区分各自的功能,这点无疑是非常有利于搜索引擎去索引资源的,相比<object>来说,最明显的特色即是:
标签语义化,结构更简单;
脱离插件;
简单的javascript内置方法以及事件交互。
看似对音频控制都比较完善,但开发者缺少了对音频数据的访问权限,在很多更动感的交互,更复杂的音效需求面前就显得力不从心了。
[Audio Data API]
为了解决现状,Mozilla社区提出了Audio Data API,对<audio>标签进行js能力方面的扩展,这套API主要还是以提供读取写入音频数据接口为主,例如:
// 定义音频对象
var audio = new Audio();
var bufferLenth;
audio.src = "song.ogg";
audio.addEventListener('MozAudioAvailable', handleWithSample, false);
audio.addEventListener('loadedmetadata', handleWithMeta, false);
audio.play();
function handleWithMeta () {
bufferLenth = audio.mozFrameBufferLength;
}
function handleWithSample (e) {
var samples = e.frameBuffer;
for (var i = 0; i < bufferLenth; i++) {
// do something with audio data
dosomething(samples[i])
}
}
基于MozAudioAvailable
事件驱动读取音频原始数据
注:该方法已无法正确执行,Firefox已转向Web Audio API的支持,后续的Firefox版本逐渐废弃了Audio Data API的旧接口。
但对于一个开发者来说,并非人人都是音频资深用户或者发烧级音乐玩家,而且在很多音频的专业效果处理上需涉及大量波形相关处理算法,这就直接把很多开发者拒之门外了,这也是为什么最后W3C推荐了 Web Audio API。
[Web Audio API]
Web Audio API最早是Chrome社区提出并支持的,Web Audio API 是一套全新的相对独立的接口系统,对音频文件拥有更高的处理权限以及内置相关的音频专业效果处理,可以完全独立于 <audio> 标签而存在。这里把内置相关音频专业效果处理
标红主要是因为,我个人觉得这是Web Audio API相对于Audio Data API最大的一个区别,也是为什么最终被W3C推荐的原因。
大概整了一下Web Audio API的新特点:
更精准的时间控制;
可完全独立<audio>,允许更多音频文件同时播放,用于游戏或者复杂音频应用场景;
模块化路由连接方式,让音频操作更加灵活形象;
4.实时的频域、时域数据访问/操作;
- 更多专业的音频处理方法
(1) 音道分离/合并;
(2) 音频延时效果;
(3) 内置频率滤波器;
(4) 音频空间感效果以及多普勒效应模拟;
(5) 音频卷积运算(用于声场环境模拟);
(6) 自定义波形生成器;
(7) 波形非线性失真处理。
【Web Audio API】 — 那些年的 web audio的更多相关文章
- Web性能API——帮你分析Web前端性能
前端性能统计必备api,有不知道的吗? 正文从这开始- 开发一个现代化的互联网网站是一项复杂的任务,需要各种职能的密切合作以应对用户日新月异的需求.其中,网页的性能直接决定了用户的体验,而随着新型客户 ...
- 【HTML5】Web Audio API打造超炫的音乐可视化效果
HTML5真是太多炫酷的东西了,其中Web Audio API算一个,琢磨着弄了个音乐可视化的demo,先上效果图: 项目演示:别说话,点我! 源码已经挂到github上了,有兴趣的同学也可以去st ...
- H5的Web Audio Api
概述 研究Web Audio Api的主要原因是:工作中需要在ios中实现声音的淡出效果,主要是通过setInterval来改audio标签的volume属性实现的,但是ios上面volume属性是只 ...
- Web Audio API之手把手教你用web api处理声音信号:可视化音乐demo
1.Web Audio API 介绍 Web Audio API 提供了在Web上控制音频的一个非常有效通用的系统 ,这些通用系统通俗的讲就是我们可以利用Web Audio API提供的各种方法操作各 ...
- 关于HTML5音频——audio标签和Web Audio API各平台浏览器的支持情况
对比audio标签 和 Web Audio API 各平台浏览器的支持情况: audio element Web Audio API desktop browsers Chrome 14 Yes ...
- [Javascript] Intro to the Web Audio API
An introduction to the Web Audio API. In this lesson, we cover creating an audio context and an osci ...
- 关于Web Audio API的入门
Web Audio API提供了一个简单强大的机制来实现控制web应用程序的音频内容.它允许你开发复杂的混音,音效,平移以及更多. 可以先看一下MDN的这篇文章<Web Audio API的运用 ...
- 使用Web Audio API绘制音波图
摘要:Web Audio API是对<audio> 标签功能上的补充,我们可以用它完成混音.音效.平移等各种复杂的音频处理,本文简单的使用其完成音波图的绘制. PS:本例子使用ES6编程, ...
- HTML5 ——web audio API 音乐可视化(二)
上一篇 web audio API 音乐可视化(一)介绍了一些基本的API,以及如何简单的播放一个音频,本篇介绍一下怎么对获取到的音频进行分析,并将分析后的数据绘制成图像. 最终效果请戳这里; 完整版 ...
- HTML5 ——web audio API 音乐可视化(一)
使用Web Audio API可以对音频进行分析和操作,最终实现一个音频可视化程序. 最终效果请戳这里; 完整版代码请戳这里,如果还看得过眼,请给一个start⭐ 一.API AudioContext ...
随机推荐
- 修改Ehcache缓存中取到的值,缓存中的值也被修改了
问题现象 我们从Ehcache中取出缓存的对象,之后将对象中的属性进行了修改使用.等再次从缓存中拿到对象后,发现对象的值变成了上一次调用修改后的对象了. 原因 Ehcache中缓存的是原对象的引用,所 ...
- Qt:QCoreApplication
0.说明 QCoreApplication提供了有关当前运行程序的相关信息,当前程序应当是非GUI程序.对于GUI程序,应该用QGuiApplication,而对于采用了Qt Widget模块的程序, ...
- Qt:QTableWidget
0.说明 QTableWidget类提供了一个基于Item的Table视图,如下图: Table Widget提供了表格用于显示.Table中的每个Item都是QTableWidgetItem对象. ...
- Python:取整函数、四舍五入
int(a) 绝对值向0方向取整,符号不变 math.ceil(a) 向正无穷取整 math.floor(a) 向负无穷取整 round(a,n=0) 四舍五入,第二个参数说明保留小数位数
- iOS 产品新需求,要让collectionView 的背景跟着Cell 一块儿动!!!
标题如上!看如何解决 最近产品经理来需求了,就像标题上的一样,要求,给collectionView添加一个背景,并且这个背景,还能跟着cell滑动这么一个效果,这个需求把我看懵了,让我不知所措,这该如 ...
- JZ-048-不用加减乘除做加法
不用加减乘除做加法 题目描述 写一个函数,求两个整数之和,要求在函数体内不得使用+.-.*./四则运算符号. 题目链接: 不用加减乘除做加法 代码 /** * 标题:不用加减乘除做加法 * 题目描述 ...
- DBScan聚类,打破形状的限制,使用密度聚类
如何用花盆摆放成国庆字,并且包围这两个字. 在DBSCAN中衡量密度主要使用的指标:半径.最少样本量 算法原理 *直接密度可达 如果一个点在核心对象的半径区域内,那么这个点和核心对象称为直接密度可达, ...
- Linux指令_入门基础
一.基础指令语法 1.ls指令: 用法1:#ls 含义:列出当前工作目录下的所有文件/文件夹的名称. 用法2:#ls 路径 含义:列出指定路径下的所有文件/文件夹的名称 用法3:#ls 选项 路径 含 ...
- Linux移植实际操作一
@ 目录 *前言 目前看了很多关于"Linux移植"的的各种教程.书籍,看完发现不过是对已有板子.已有驱动进行启用.禁用.参数修改.只能叫做"Linux配置". ...
- wifi钓鱼
无线网络的加密方式和破解方式 1.WEP加密及破解 1).WEP加密方式 有线等效保密(wired euivalent pricacy,WEP)协议的使用RC4(rivest cipher4)串流加密 ...