Web Audio API是web处理与合成音频的高级javascript api。Web Audio API草案规范由W3C audio working group定制,旨在解决javascript在web平台处理音频的短板,底层由c++引擎提供支持与优化。Web Audio API提供了非常丰富的接口让开发者在web平台上实现对web音频进行处理。利用Web Audio API,web开发者能够在web平台实现音频音效、音频可视化、3D音频等音频效果。本篇文章首先介绍了Web Audio API相关概念、常用的几个接口节点,以便不熟悉Web Audio的开发人员有个了解。后面主要分析了3个Web Audio API的应用案例,web音频录音与实时回放、web音频剪切、web实现在线k歌,通过应用案例加深对Web Audio API的了解。读者也可以根据案例开拓思维,做出更好玩的web音频应用。 Web Audio API基本概念 AudioContext是Web Audio API的核心对象。所有的audio 节点实例由AudioContext生成。
var audioContext = new AudioContext();
不同浏览器厂商实现AudioContext有所差异,可以加上对应前缀进行兼容。 1 DelayNode,可以将音频延时播放,如果在音频播放时,一路正常到达destinationNode,一路通过DelayNode到达destinationNode,就可以产生回音混响的效果
——————————————>
  source                     ——>destinationNode
          ——>delayNode——>
2 gainNode,在webAudio中,可以通过gainNode来控制音量 3 BiquadFilterNode,可以用于音频滤波处理。Web Audio API提供了高通滤波、低通滤波的接口,利用这些接口也可以实现中通滤波。 思路:首先创建一个stream源节点,通过navigator.getUserMedia获取麦克风音频stream,然后再连接到ScriptProcessorNode对外部声音进行处理(数据存储、转换),最后连接到destination进行实时的播放。通过ScriptProcessorNode获取的音频数据可以浏览器播放并保存到本地。
————>获取音频数据存储————>转blob保存本地
  navigator.getUserMedia                                
                        ————>ScriptProcessorNode处理数据————>实时回放
关于webAudio也可以通过W3C提供的一个新的音频处理接口MediaRecorder Api进行录音,具体使用参考 https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API 具体实现过程 1 获取麦克风 2 使用MediaRecorder Api进行录音 MediaRecorder可以读取到navigator.getUserMedia输入的音频数据,并提供了接口进行数据存取。MediaRecorder读取的数据进行转码后,才能通过window.URL.createObjectURL转成blob:资源后保存本地。 3 录音过程采用ScriptProcessor实现音频实时回放 在navigator.getUserMedia录音过程中,将MediaStreamSource源连接到ScriptProcessor进行处理。ScriptProcessor获取到音频后实时播放。 延时:实时播放的时候会有些延时,造成的主要原因,一是ScriptProcessor处理输出数据播放的时候需要一定时间,在性能比较好的机器上表现不明显。二是不同硬件设备也会造成延时,这个表现会明星许多。 http://zhazhaxia.github.io/webaudio/public/recordsong.html
(建议在PC新版本chrome or firefox体验) https://github.com/zhazhaxia/webAudioApi-testing/blob/master/public/js/recordsong.js 思路:音频剪切的一般实现是先读取整段音频数据,再根据区间截取数据,保存,从而实现音频的剪切。但是在web上无法直接读取整段音频,只能创建BufferSource源,用xhr获取音频,在音频经过ScriptProcessorNode时,才能获取到目标区间的音频数据。因此,在web平台实现音频剪切需要等音频播放到指定位置时,才能实现效果,体验上会差点。
加载BufferSource
  ScriptProcessorNode音频数据
  获取剪切区间的音频数据    ——→    保存音频数据audio/wav
  连接destination播放
音频源必须是BufferSource,通过xhr读取,因为BufferSource才能用AudioContext提供的start()接口进行指定位置播放。 具体实现过程 1 xhr读取音频源 web音频剪切采用的音频源是BufferSource(BufferSource的源提供了start接口设置播放时间段),所以需要通过xhr获取资源,并通过audioContext的decodeAudioData接口将xhr读取的资源解码为BufferSource能读取的音频buffer。 利用WebAudioAPI剪切音频时,通过BufferSource的start接口设置目标时间段后,需要从头播放到目标区间才能开始剪切。WebAudioAPI无法读取全局的音频数据,这一点处理会比较麻烦些。 案例地址 http://zhazhaxia.github.io/webaudio/public/songclip.html 思路:在web平台实现k歌应用,关键在于将人声跟伴奏的音频整合一起。首先需要两个声源,一个是伴奏,声源类型ElementSource。一个是人声,通过麦克风录音获取,声源类型StreamSource。在K歌过程将声音经过ScriptProcessorNode处理,整合,然后保存数据。最后将音频连接到destination。保存的数据可以本地存储和在线播放,从而实现在web平台的在线k歌应用。
伴奏ElementSource    人声录音StreamSource
          ↓                    ↓
      转buffer            保存为blob数据并arraybuffer
              ↓        ↓
              ↓        ↓
            重放         保存本地合并音频
web实现在线K歌实际上是webAudio录音与web音频剪切的综合实现。 具体实现过程 1 通过MediaRecorder录音并转blob资源 MediaRecorder录音后需要将音频数据转blob:资源,以便xhr获取。 伴奏消声 http://zhazhaxia.github.io/public/
代码 https://github.com/zhazhaxia/webAudioApi-testing/blob/master/public/js/kge.js