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. Java多线程系列--“基础篇”06之 线程让步

    概要 本章,会对Thread中的线程让步方法yield()进行介绍.涉及到的内容包括:1. yield()介绍2. yield()示例3. yield() 与 wait()的比较 转载请注明出处:ht ...

  2. Deep learning:四十五(maxout简单理解)

    maxout出现在ICML2013上,作者Goodfellow将maxout和dropout结合后,号称在MNIST, CIFAR-10, CIFAR-100, SVHN这4个数据上都取得了start ...

  3. 从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别

    背景: 在清空input file标签选中值时,分别用了以下方法,发现有的对有的错: [√]$("#file")[0].value = ""; [√]$(&qu ...

  4. SQLServer学习笔记系列2

    一.写在前面的话 继上一次SQLServer学习笔记系列1http://www.cnblogs.com/liupeng61624/p/4354983.html以后,继续学习Sqlserver,一步一步 ...

  5. winform控件

    公共控件:1.Button: Enabled - 开始不可用 Visible -不可视(用来设置权限,取用户看不见的值)2.CheckBox .CheckListBox -复选框,复选框组 3.Com ...

  6. 【转载】8天学通MongoDB——第三天 细说高级操作

    今天跟大家分享一下mongodb中比较好玩的知识,主要包括:聚合,游标. 一: 聚合 常见的聚合操作跟sql server一样,有:count,distinct,group,mapReduce. &l ...

  7. 上传文件被nginx全部缓存的问题

    nginx采用1.5.6. 后端采用nodejs+formidable的方式接受上传文件,本问题的对应与采用什么样的后端没太大关系,这里只是交代一下. 问题: 在前端页面上将文件上传,nginx没有将 ...

  8. Entity Framework 实体框架的形成之旅--基于泛型的仓储模式的实体框架(1)

    很久没有写博客了,一些读者也经常问问一些问题,不过最近我确实也很忙,除了处理日常工作外,平常主要的时间也花在了继续研究微软的实体框架(EntityFramework)方面了.这个实体框架加入了很多特性 ...

  9. ExtJs动态生成treepanel的Json格式

    在节点中加上"checked"属性,会自动生成checkbox. 获取选中节点 var nodeArray = ""; var nodesObj = mytre ...

  10. C#的变迁史 - C# 4.0篇

    C# 4.0 (.NET 4.0, VS2010) 第四代C#借鉴了动态语言的特性,搞出了动态语言运行时,真的是全面向“高大上”靠齐啊. 1. DLR动态语言运行时 C#作为静态语言,它需要编译以后运 ...