这主题主要是早期对 web audio api 的一些尝试,这里整理一下以便以后翻阅,如有错误,诚请指正。

在真正进入 Web Audio API 开发之前,需要先弄清两个概念:音频上下文(AudioContext)、音频节点(AudioNode);

Web Audio API 是一套以音频上下文(AudioContext)为基础的接口系统;基本上每一次的开发都需要第一个用到,

看下 W3C 对 AudioContext 的描述:

This interface represents a set of AudioNode objects and their connections. It allows for arbitrary routing of signals to the AudioDestinationNode (what the user ultimately hears). Nodes are created from the context and are then connected together. In most use cases, only a single AudioContext is used per document.

大意是一个 AudioContext 代表一系列音频节点以及节点之间的连接方式,它允许一个或以上的音频信号在经过任意的连接之后最终连接在音频播放设备节点上;节点都是可以通过音频上下文对象然后连接到了一起;通常一个文档中只需要一个一个音频上下文对象即可。

个人觉得 AudioContext 就是一个大的工厂,它不仅能够创建各种类型的音频节点,还规范了音频节点跟节点之间的连接式,规范了音频流在节点之间的传达方式。比如我实例化一个音频上下文对象:

接下来我就可以通过音频对象来创建各类型的音频节点:

音频节点的连接方式、拥有特性都会在创建完成时就确定好了,这就是 AudioContext 所需要去规范的。

那再来看一下 W3C 对音频节点(AudioNode)的定义:

AudioNodes are the building blocks of an AudioContext. This interface represents audio sources, the audio destination, and intermediate processing modules.

AudioNode 是 AudioContext 的基石,它可以是音频音源模块,音频播放设备模块,也可以是中间音频处理模块。

可以想象一下家庭卡拉 OK 设备,DVD 机就充当音频音源模块(当然一台 DVD 还是会包含很多对音频的处理模块的,暂且忽略),音响就充当音频播放设备模块,而家庭卡拉 OK 还会有一台混响器(主要用于把你的声音与背景音乐合成最终输出到音响上),这台混响器则可以充当音频处理模块,然后各个模块最终还是需要电线连接起来,最终才接在音响上。

W3C 给出最简单的音频上下文,音源节点直接连接到了播放设备节点上,这样你就可以播放一首你想要的音乐了。

modular-routing1

当然一个音频上下文也可以以很复杂的方式连接起来,你只需要在音源跟播放设备之间增加其他效果处理的节点或者分析节点,比如:

modular-routing2

这是一套专业音效合成处理图,这里可以看得出一个音频上下文是允许多个音源节点同时存在的,而且个别类型节点还允许可以有多个输入端以及多个输出端,下面就对 Web Audio API 现有的节点类型整理一下:

音源节点 (0 input, 1 output)

主要用于产生或引入一段音频信号

分析节点 (1 input, 1 output)

主要用于对频谱数据的读取,以便可是实现一些可视化的交互

音频处理节点(1+ input, 1+ output)

该类节点大都是具有某种效果的处理能力,可以对输入的音频信号进行一些处理

播放设备节点 (1 input, 0 output)

主要用于播放最终处理完的音频信号

来个最简单的 demo 吧

使用 createBufferSource 节点创建音源节点主要有两种方式引入音频文件:XMLHttpRequest<input type="file"/>,这里就尝试 XMLHttpRequest 方式

然后我们需要定义一个方法对这个缓冲区的文件数据解码成音频 RAW 数据

有了这些准备后,我们就开始搞个最简单的播放器吧

未完待续…

原创文章转载请注明:

转载自AlloyTeam:http://www.alloyteam.com/2015/01/web-audio-api-yin-pin-shang-xia-wen-yu-yin-pin-jie-dian-di-shi-yong-fang-shi/

  1. hello 2016 年 8 月 31 日

    太监了

  2. danielvs123 2016 年 4 月 23 日

    期待更新。。。。

  3. 威客兼职 2015 年 1 月 21 日

    有些感觉和博主的不太一样,不过还是期待更新

发表评论