WebAudioAPI整理

Contents

1. 1. Forword
2. 2. WebAudioAPI
   1. 2.1. AudioContext
      1. 2.1.1. 创建
      2. 2.1.2. 属性
      3. 2.1.3. 方法
   2. 2.2. AudioBufferSourseNode
      1. 2.2.1. 创建
      2. 2.2.2. 属性
      3. 2.2.3. 方法
   3. 2.3. GainNode
      1. 2.3.1. 创建
      2. 2.3.2. 属性
   4. 2.4. AnalyserNode
      1. 2.4.1. 创建
      2. 2.4.2. 属性
      3. 2.4.3. 方法
3. 3. WebAudioImage
4. 4. else

Forword

自我娱乐，纯手工整理。然并卵。

WebAudioAPI

AudioContext

包含各个AudioNode对象以及它们联系的对象，可以理解为audio上下文对象。绝大多数情况下，一个document中只有一个AudioContext

创建

var ac = new window.AudioContext();//(webkit,moz等兼容前缀)

属性

destination： AudioDestinationNode对象，所有的音频输出聚集地，相当于音频的硬件，所有的AudioNode都直接或间接的连接到这里。

currentTime： AudioContext从创建开始到当前的时间（秒）。与很多时间参数有关

方法

decodeAudioData(arrayBuffer, succ(buffer), err)
异步解码包含在arrayBuffer中的音频数据
第一个参数就是Ajax向服务端请求得到的音频数据

createBufferSource()
创建audioBufferSourceNode对象

createAnalyser()
创建AnalyserNode对象

createGain()/createGainNode()
创建GainNode对象

AudioBufferSourseNode

表示内存中的一段音频资源，其音频数据存在于AudioBuffer中（其buffer属性）

创建

var buffersource = ac.createBufferSource();

属性

buffer：AudioBuffer对象，表示要播放的音频资源数据。（必须）
—子属性：duration，该音频资源的时长（秒）

loop：是否循环播放，默认false

onended：可绑定音频播放完毕时调用的事件处理程序

方法

以下两个方法可均无参数

start/noteOn(when=ac.currenTime, offset=0, duration=buffer.duration-offset)
开始播放音频。when：何时开始播放；offset：从音频的第几秒开始播放；duration：播放几秒；

stop/noteOff(when=ac.currentTime)
结束播放音频

GainNode

改变音频音量的对象，会改变通过它的音频数据所有的sample frame的信号强度。（通过间接连接作为一个过渡器，详见图解）

创建

var gainNode = ac.createGain()/ac.createGainNode();

属性

gain，AudioParam对象，通过改变其value值可以改变音频信号的强弱，默认的value属性值为1，通常最小值为0，最大值为1，其value值也可以大于1，小于0

AnalyserNode

音频分析对象，它能实时地分析音频资源的频域和时域信息，但不会对 音频流做任何处理

创建

var analyser = ac.createAnalyser();

属性

fftSize，设置FFT值的大小，用于分析得到频域，为32~2048之间2的整数次倍，默认为2048实时得到的音频频域的数据个数为fftSize的一半。（FFT是傅里叶变换的快速算法，用于将一个信号变换到频域）

frequencyBinCount，FFT值的一半，即实时得到的音频频域数据个数

方法

getByteFrequencyData(Uint8Array)，复制音频当前的频域数据（数量是frequencyBinCount）
到Uint8Array（8位无符号整型类型化数组）中

WebAudioImage

这张图能够帮助你更好的理解

首先创建AudioContext对象

通过AudioContext对象的decodeAudioData()方法解码AudioBuffer得到buffer

这需要接收一个AudioBuffer类型的数据(ajax请求)

通过AudioContext对象的createBufferSource()方法，创建AudioBufferSourceNode音频播放的音频资源对象，它的音频资源数据需要放在buffer属性里

然后我们需要把AudioBufferSourceNode连接到AudioDestinationNode上（所有的音频节点都要连接到destination上）

之后有一个分析(AnalyserNode)和调节音量(GainNode)的节点，也间接的连接到AudioDestinationNode~

但开始要将AudioBufferSourceNode直接连接到AudioDestinationNode上，然后加上这两个过滤器（一开始我是拒绝的）

这样所有的节点都有了一个最终的目的地

这个时候在调用start()方法，或者较老的noteOn()方法，就可以播放这个音频资源。

requestAnimationFrame()用于绘制动画，此时就可以通过拿到AnalyserNode里的数组在进行canvas绘图

以上

else

官方API，实时更新，目前还处于草案阶段

PS：话说好想去日本旅游啊。有这方面兴趣的朋友不妨一约？求老司机带飞

—————————2015.6.5—————————

PS2：整理的好累啊。按照音乐可视化的节奏，做到canvas绘图为止，canvas的内容就不再放出来了