Web语音处理 - Web Audio API & WebRTC

概述

不少设备都具有native的语音输入功能，并提供App来提供语言录入等功能。若是你想开发一些语言应用，那么针对不一样的设备平台，包括desktop和移动设备如ios、android，你可能须要使用不一样的语言、不一样的api来作开发。跨平台性差带来的工做量无疑是个问题。

若是用web应用来实现，开发语言统一，而且跨平台的问题减弱为跨浏览器的问题，这对开发的难度和用户的推广确定是能带来益处的。

本文主要介绍若是想在web网页中来使用语音处理功能，以在线语音录入为例，如何利用HTML5提供的一些API来实现。API使用细节不会讨论太多；会涉及到对不一样设备和不一样浏览器的支持状况。

Web Audio API & WebRTC

web audio api是一组在web上对音频文件进行处理的api，容许用户获取音频的不一样类型通道，对其添加特效、合并分离声道等，以使音频可视化或添加空间效果等等。

其API基本使用是建立一个音频上下文（AudioContext），在其中建立不一样功能的音频结点（AudioNode）来控制实现相关处理。下面的代码段建立了这两类对象。在不一样的浏览器中，AudioContext有不一样的prefix前缀，在chrome里是webkit前缀。

var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); // define audio context

var analyser = audioCtx.createAnalyser();
var distortion = audioCtx.createWaveShaper();
var gainNode = audioCtx.createGain();
var biquadFilter = audioCtx.createBiquadFilter();

具体的API能够参考MDN的说明：

https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API

WebRTC (Web Real-Time Communications) 是一种能让web应用捕获音频流或视频流的技术，获取的流能够做为raw data供其余api处理，或经过特定协议实现点到点的远程通讯。这一切都不须要插件或第三方软件，只须要浏览器支持这一标准。

其API基本使用以下：针对不一样浏览器设定不一样的prefix；设定要获取的是音频仍是视频流；获取流并实现不一样的fallback。

// fork getUserMedia for multiple browser versions, for those
// that need prefixes

navigator.getUserMedia = (navigator.getUserMedia ||
                          navigator.webkitGetUserMedia ||
                          navigator.mozGetUserMedia ||
                          navigator.msGetUserMedia);
navigator.getUserMedia (
      // constraints - only audio needed for this app
      {
         audio: true
      },

      // Success callback
      function(stream) {
         source = audioCtx.createMediaStreamSource(stream);
         //TBD
      },

      // Error callback
      function(err) {
         console.log('The following gUM error occured: ' + err);
      }

不一样设备及不一样浏览器支持状况

这两类API属于HTML5中较新的一些标准，不一样的浏览器以及同一浏览器的不一样版本的支持状况都不一样。

我的实测，在desktop上，主流的firefox和chrome都支持；在android设备上的ff和chrome也都支持；而在ios（只测了ipad）上，safari并不支持webRTC，因为chrome on ios也是基于safari的，因此也不支持。

针对更多的浏览器和设备，能够从这个网站上看看相应的支持状况：http://mobilehtml5.org

在线语言录入的实现方法

首先须要你的设备有音频输入设备，如microphone。

对于支持WebRTC的平台比较简单，如上文提到的API，直接使用getUserMedia().获取音频流便可。

而对于不支持WebRTC的平台，一个方法则是须要经过调用到设备的原生输入app，获得流文件再做处理。如：

<input type="file" accept="audio/*" capture>

在desktop上，会弹出文件选择框，让用户选择一个音频文件；而在ios的safari上，则会打开microphone app，让用户录一小段音频而后再发回给网页；在android设备上相似。