web audio接口和用法

daiyun

web audio接口和用法

在html中解析音频文件有专门的api和步骤。

要处理音频需要先创建一个音频环境AudioContext可以控制它所包含的节点的创建，以及音频处理、解码操作的执行。做任何事情之前都要先创建AudioContext对象，因为一切都发生在这个环境之中.类似于使用canvas时候创建的canvas环境。（   var canvas=$('canvas' )； ctx=canvas.getcontext('2d'））.

1,var ac=new (window.AudioContext||window.webkitAudioContext)(）；//创建处理音频的环境

2，获取到arraybuffer（通过xhr.response）之后调用ac.decodeAudioData(audiodata,function(data){})进行解码。

3，当成功解码之后在回调函数function(data){}中通过ac.createBufferSource()创建的接口进行处理并获得一个AudioBufferSourceNode节点。写法：ac.createBufferSource().buffer=data;

4,将创建好的节点connect到ac.destination上面去，写法是：buffersource.connect(ac.destination);

5，启动节点。buffersource.start()

6，audiobuffersourcenode作用很大。

tips:

1，canvas不用new初始化，xhr用new初始化.同时AudioContext不是驼峰写法。

2，arraybuffer的数据不能直接访问，通过typed array的接口转换可以看的到。

3，获取audiobuffer对象有两种方法，一种是通过ac.createBuffer()创建空白的audiobuffer对象以用于数据填充。第二种是通过ac.decodeAudioData(arraybuffer，fn)成功解码音轨后获取。其中第二种方法decodeAudioData的第一个参数是从xhr返回的音频流。解码成功后返回audiobuffer给回调函数。最终，解码压缩后的音频，如mp3，需要使用异步的第二种方法以防止阻塞。

4，将获得的audiobuffer附加到一个audiobuffersourcenode接口上，这个接口可以播放音频。就是上面3的写法。最终这个sourcenode接口和硬件播放设备连接起来start（）播放。

5,createBufferSource()方法创建的audiobuffersourcenode对象有三个属性：buffer，loop和onended。有两个属性：start和stop。这里用了buffer属性和start（）方法。

这一套流程用到的接口和方法有：AudioContext.decodeAudioData(),AudioContext.createBufferSource(），AudioContext.destination,AudioContext.start(),