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設備上相似。