Web Audio API_基本概念
Audio Context
音频的工作环境。类比做化学实验,Audio Context 就是为我们提供各种仪器和材料的实验室(严格地来说制造这些仪器材料的方法和工具也一并提供了)。通常来说做实验一间实验室就够啦。在 Web Audio API 中 Audio Context 体现为一个接口(interface),处理任何音频工作前最基本的操作就是创建一个 AudioContext 的实例:
var context = new AudioContext();
考虑到兼容性问题,通常采用以下写法:
try {
window.AudioContext = window.AudioContext || window.webkitAudioContext;
var context = new AudioContext();
} catch(e) {
alert("啊哦,您的浏览器不支持 Web Audio API 哦!");
}
Audio Nodes
由 AudioContext 提供的方法创建,是音频工作的基本单元。回到化学实验的类比,就是用于组装实验器材的仪器,有很多种不同类型的仪器,每个仪器都有自己的用途。在 Web Audio API 中,根据 Audio Nodes 的作用大致可划分为以下四种类型:
- Source nodes
源节点,通常作为音源。 - Modification nodes
对音频进行处理的节点。 - Analysis nodes
对音频数据进行分析的节点。 - Destination node
终节点,音频经一系列操作后的终点,通常指连接着扬声器的输出端。在每个 AudioContext 的实例中,终节点都是唯一的,且作为其属性destination
存在。
除了 Destination node 以外类型的节点在创建时都有更加具体的节点类型。
Modular Routing
不知道中文怎么表达最合适,是 Web Audio API 里很重要的概念。同样可以使用化学实验的例子,在这里就相当于各个仪器都是可连接的,从而形成完整的实验装置,不同的装置和连接方式可以达到不同的实验要求,最终的实验结果取决于你对仪器的使用(化学材料包含在仪器内)。回到音频工作上说,这是一条由节点单元连接而成的路线,路线必须有始有终,始即是 Source nodes,而终指的是唯一的 Destination node,中间的节点则可有可无,按需使用就行。
一般节点(AudioNode)都有用于建立连接的方法connect()
和用于连接的输入、输出口,其中源节点和终节点比较特殊,源节点作为起点则没有输入口,终节点作为终点则没有输出口。
根据以上内容,可以建立一个最简单的 Modular Routing:
它的代码长成这个样子:
var source = context.createBufferSource();
source.buffer = RainDroppingBuffer; // 向源节点的缓存区存入数据
source.connect(context.destination);
Web Audio API_基本概念的更多相关文章
- Web Audio介绍
Web Audio还是一个比较新的JavaScript API,它和HTML5中的<audio>是不同的,简单来说,<audio>标签是为了能在网页中嵌入音频文件,和播放器一样 ...
- Web Audio初步介绍和实践
Web Audio还是一个比较新的JavaScript API,它和HTML5中的<audio>是不同的,简单来说,<audio>标签是为了能在网页中嵌入音频文件,和播放器一样 ...
- 基于canvas和web audio实现低配版MikuTap
导言 最近发掘了一个特别happy的网页小游戏--MikuTap.打开之后沉迷了一下午,导致开发工作没做完差点就要删库跑路了,还好boss瞥了我一眼就没下文了.于是第二天我就继续沉迷,随着一阵抽搐,这 ...
- 【HTML5】Web Audio API打造超炫的音乐可视化效果
HTML5真是太多炫酷的东西了,其中Web Audio API算一个,琢磨着弄了个音乐可视化的demo,先上效果图: 项目演示:别说话,点我! 源码已经挂到github上了,有兴趣的同学也可以去st ...
- 关于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编程, ...
- H5的Web Audio Api
概述 研究Web Audio Api的主要原因是:工作中需要在ios中实现声音的淡出效果,主要是通过setInterval来改audio标签的volume属性实现的,但是ios上面volume属性是只 ...
随机推荐
- Supplemental Logging
Supplemental Logging分为两种:Database-Level Supplemental Logging和Table-Level Supplemental Logging,即数据库级别 ...
- 百度地图JavaScript API自定义覆盖物、自定义信息窗口增删时的显示问题
项目中,需求:在百度地图上实时画出车辆,并能点击车辆弹出信息框查看实时信息. 实现:通过不停的画覆盖物并删除掉.点击覆盖物时弹出信息窗口. 问题:删除掉覆盖物后信息窗也删除掉了.因为信息窗是建立在覆盖 ...
- 一步一步学Python(1) 基本逻辑控制举例和编码风格规范
(1) 基本逻辑控制举例和编码风格规范 1.while死循环 2.for循环 3.if,elif,else分支判断 4.编码风格(官方建议) 版本:Python3.4 1.while死循环 #func ...
- Concise - 面向对象的,一致的前端开发框架
在当今世界,有许多前端开发的框架.那么,为什么还要再造一个框架呢?Concise 建立的目的是使你有很多的开箱即用的选项,让你能够方便的搭建移动友好的网站和 Web 应用程序.另外还包括一个简单的网格 ...
- 解决erlang节点启动失败报["inet_tcp",econnrefused]的问题
今天有同事说他机器上的leofs启动不了.我用console起了一下,发现报如下错: {error_logger,{{2015,11,3},{6,23,6}},"Protocol: ~tp: ...
- 让微信扫描直接下载你的APK
去年在做一个项目的时候,用微信扫描apk下载失效,显示空白页,网上找找发现在后面加一个字符串即可,于是简单搞定.过了一阵子,今年不行了,我的敏捷个人下载二维码也失效了,今天和大家说一下,现在如何解决这 ...
- excel日期格式转换为文本格式
今天测试读取excel并修改数据库数据的时候遇到几个小问题. 1.空指针,读写io异常蛮多的,获取不到的数据就是null 2.读取文件位置,开始找不到文件 3.读取日期格式结果是一个数值,因此需要转化 ...
- 基于HTML5的WebGL结合Box2DJS物理应用
上篇我们基于HT for Web呈现了A* Search Algorithm的3D寻路效果,这篇我们将采用HT for Web 3D来呈现Box2DJS物理引擎的碰撞效果,同上篇其实Box2DJS只是 ...
- STL : map函数的运用 --- hdu 4941 : Magical Forest
Magical Forest Time Limit: 24000/12000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Other ...
- [转载]MongoDB开发学习 经典入门
如果你从来没有接触MongoDB或对MongoDB有一点了解,如果你是C#开发人员,那么你不妨花几分钟看看本文.本文将一步一步带您轻松入门. 阅读目录 一:简介 二:特点 三:下载安装和开启服务器 四 ...