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_基本概念的更多相关文章

  1. Web Audio介绍

    Web Audio还是一个比较新的JavaScript API,它和HTML5中的<audio>是不同的,简单来说,<audio>标签是为了能在网页中嵌入音频文件,和播放器一样 ...

  2. Web Audio初步介绍和实践

    Web Audio还是一个比较新的JavaScript API,它和HTML5中的<audio>是不同的,简单来说,<audio>标签是为了能在网页中嵌入音频文件,和播放器一样 ...

  3. 基于canvas和web audio实现低配版MikuTap

    导言 最近发掘了一个特别happy的网页小游戏--MikuTap.打开之后沉迷了一下午,导致开发工作没做完差点就要删库跑路了,还好boss瞥了我一眼就没下文了.于是第二天我就继续沉迷,随着一阵抽搐,这 ...

  4. 【HTML5】Web Audio API打造超炫的音乐可视化效果

    HTML5真是太多炫酷的东西了,其中Web Audio API算一个,琢磨着弄了个音乐可视化的demo,先上效果图: 项目演示:别说话,点我!  源码已经挂到github上了,有兴趣的同学也可以去st ...

  5. 关于HTML5音频——audio标签和Web Audio API各平台浏览器的支持情况

    对比audio标签 和 Web Audio API 各平台浏览器的支持情况:   audio element Web Audio API desktop browsers Chrome 14 Yes  ...

  6. [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 ...

  7. 关于Web Audio API的入门

    Web Audio API提供了一个简单强大的机制来实现控制web应用程序的音频内容.它允许你开发复杂的混音,音效,平移以及更多. 可以先看一下MDN的这篇文章<Web Audio API的运用 ...

  8. 使用Web Audio API绘制音波图

    摘要:Web Audio API是对<audio> 标签功能上的补充,我们可以用它完成混音.音效.平移等各种复杂的音频处理,本文简单的使用其完成音波图的绘制. PS:本例子使用ES6编程, ...

  9. H5的Web Audio Api

    概述 研究Web Audio Api的主要原因是:工作中需要在ios中实现声音的淡出效果,主要是通过setInterval来改audio标签的volume属性实现的,但是ios上面volume属性是只 ...

随机推荐

  1. 使用ab进行页面的压力测试

    ab是apache自带的一个很好用的压力测试工具,当安装完apache的时候,就可以在bin下面找到ab 参数说明及示例 我们可以模拟100个并发用户,对一个页面发送1000个请求 输入命令:ab - ...

  2. 新手学习Python时常见的错误

    最近学习Python,现在把一些常见的错误总结如下: 1)忘记在 if , elif , else , for , while , class ,def 声明末尾添加 :(导致 "Synta ...

  3. Android基于mAppWidget实现手绘地图(十五)–如何控制放大缩小

    一般来说,可以使用以下几种方式来控制地图的放大/缩小 : 1. 使用控件底部的缩放按钮 2.双击控件 3.pinch手势 4.物理按键 :I键标识缩小  :O键表示放大.(只有设备具有物理按键才行) ...

  4. [转载]TFS源代码管理8大注意事项

    目录 1. 使用TFS进行源代码管理 2. 如果代码没放在源代码管理软件里,等于它不存在 3. 要早提交,常提交,并且不要觉得麻烦 4. 提交前要检查你更改了什么 5. 写提交信息时一定要认真 6. ...

  5. form上传文件以及跨域异步上传

    要设置了enctype属性才能上传,需要使用上传的jar包,这里使用的是cos-26Dec2008.jar, 而且后台获取值的时候,getfile要放在第一位 一次设置好上传格式后没有上传文件,也就没 ...

  6. win10系统下点击关机却自动重启的问题解决思路

    第一步.进入win10系统后,我们点击开始菜单上鼠标右键,选择控制面板   第二步.找到电源选项,点击进去(如何没发现,点击右上角查看方式,更换为小图标)   第三步.点击选择关闭盖子的功能   第四 ...

  7. chm转换为html的超简单方法

    在Windows下chm转换为html的超简单方法(反编译CHM文件的方法) 通过调用Windows命令,将chm 文件转换为html 文件. 方法: 命令行(cmd),输入hh -decompile ...

  8. 【原创】Kakfa log包源代码分析(二)

    八.Log.scala 日志类,个人认为是这个包最重要的两个类之一(另一个是LogManager).以伴生对象的方式提供.先说Log object,既然是object,就定义了一些类级别的变量,比如定 ...

  9. [Asp.net 5] DependencyInjection项目代码分析4-微软的实现(3)

    这个系列已经写了5篇,链接地址如下: [Asp.net 5] DependencyInjection项目代码分析 [Asp.net 5] DependencyInjection项目代码分析2-Auto ...

  10. C语言写的流氓关机程序及破解

    记得大二刚开始接触电脑的那个时候,偶尔会弹出一个强制关机的窗口,当时没有办法,如下: 现在看来只是一个小程序而已,用C语言编写的: #include<windows.h> int main ...