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. 使用selenium+phantomJS实现网页爬取

    有些网站反爬虫技术设计的非常好,很难采用WebClient等技术进行网页信息爬取,这时可以考虑采用selenium+phantomJS模拟浏览器(其实是真实的浏览器)的方式进行信息爬取.之前一直使用的 ...

  2. Kubernetes系统架构简介--转

    原文地址:http://www.infoq.com/cn/articles/Kubernetes-system-architecture-introduction?utm_campaign=infoq ...

  3. CSS选择器的一些记录

    选择器 例子 例子描述 CSS .class .intro 选择 class="intro" 的所有元素. 1 #id #firstname 选择 id="firstna ...

  4. 使用AsyncTask异步更新UI界面及原理分析

    概述: AsyncTask是在Android SDK 1.5之后推出的一个方便编写后台线程与UI线程交互的辅助类.AsyncTask的内部实现是一个线程池,所有提交的异步任务都会在这个线程池中的工作线 ...

  5. Java魔法堂:JVM的运行模式

    一.前言 JVM有Client和Server两种运行模式.不同的模式对应不同的应用场景,而JVM也会有相应的优化.本文将记录JVM模式的信息,以便日后查阅. 二.介绍 在$JAVA_HOME/jre/ ...

  6. 用Qt写软件系列五:一个安全防护软件的制作(3)

    引言 上一篇中讲述了工具箱的添加.通过一个水平布局管理器,我们将一系列的工具按钮组合到了一起,完成了工具箱的编写.本文在前面的基础上实现窗体分割效果.堆栈式窗口以及Tab选项卡. 窗体分割 窗体分割是 ...

  7. ADO.NET基础--组成部分

    第一部分:数据提供程序,在命令空间:System.Data.SqlClient下: Connection--连接数据库的通道 Command----命令执行对象 DataReader--数据读取器 D ...

  8. 【转载】IE浏览器常见的9个css Bug以及解决办法

    IE浏览器常见的9个css Bug以及解决办法 我们在浏览网页的时候经常看见这样的现象:某个网页在IE6浏览器中打开很正常,但是在IE8里面打开可能完全变形了.或者也有可能出现完全相反的现象.这让We ...

  9. jQuery Ajax实现下拉框无刷新联动

    HTML代码: @{ Layout = null; } @using DAL; @using System.Data; @{ AreaDal areaDal = new AreaDal(); stri ...

  10. 百度地图API实现地图定位

    1.引用JS: <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0& ...