【Recorder.js+百度語音識別】全棧方案技術細節

項目中須要利用百度語音接口在Web端實現語音識別功能，採用了這樣的技術方案，但實現時遇到了不少問題，發現網上大部分文章都只是在詳解官方提供的example示例，對實際開發沒有提供什麼有價值的建議，而recorder.js是沒法直接適配百度AI的語音接口的，故本篇將開發中各個細節點記錄與此，歡迎指點交流。

一. 技術棧選擇

需求：利用百度語音接口在Web端實現語音識別功能

技術棧：React+recorder-tool.js +recorder.js + Express + Baidu語音識別API

recorder.js項目地址:https://github.com/mattdiamond/Recorderjs

演示效果：

二. 前端開發細節

爲recorder.js提供一個代理對象

前端的主框架採用React，在基本結構和語法上並無太多問題，爲了使用recorder.js，咱們封裝了一個recorder-tool.js做爲代理，其實現方法較爲簡單，就是將官方示例中example示例中的html文件的腳本部分封裝成一個單例對象做爲recorder.js的代理，而後暴露一組API供上層調用，大體的結構以下：

import Recorder from './recorder-src';
//Singleton
var recorder;

//start record
function startRecord() {
    recorder && recorder.record();
}

//stop record
function stopRecord(button) {
    recorder && recorder.stop();
}

//....其餘一些方法

export default {
    init : init,
    start: startRecord,
    stop: stopRecord,
    exportData: exportData,
    sendRequest: sendRequest,
    clear: clearRecord,
    createDownloadLink : createDownloadLink
}

解除exportWAV方法的回調地獄

官方示例中輸出wav編碼格式的數據這個動做是經過webworker來完成的，也就是說二進制數據處理的開始和結束時間點是經過事件來觸發的，recorder.exportWAV( )接收一個回調函數做爲入參，在獲得wav格式的數據後會執行傳入的回調函數，若是要在react中實現，就須要寫成：

//record-page.js
...
//處理錄音-事件監聽
proce***ecord(){
    RecorderTools.exportData(function(blob){
        var wav = preProcessData(blob);
        //發送請求
        axios.post({...})
                    .then(function(response){
                          handle(response);
                   })
    });
}
...

你或許已經發現了這個【回調地獄】的現象，深度的嵌套會讓邏輯變的複雜且代碼高度耦合，想把一些方法從react中剝離出去很是困難，咱們但願使用一些其餘的方式來轉換代碼的控制權，而不是把一大堆後續的邏輯傳進exportData( )方法。

• 方法一：使用HTML自定義事件

咱們在一個存在的DOM元素上添加一個自定義事件recorder.export的監聽器，並在傳入recorder.exportWAV( )方法的回調函數中，手動初始化觸發一個自定義事件(暫不考慮兼容性問題)，並把recorder.js導出的數據掛在這個event對象上，而後在指定元素上派發這個事件：

//export data
function exportData() {
    recorder && recorder.exportWAV(function (blob) {
        //init event
        var exportDone = document.createEvent('HTMLEvents');
            exportDone.initEvent('recorder.export', true, true);
            //add payload
            exportDone.data = blob;
            //dispatch
            document.getElementById('panel').dispatchEvent(exportDone);
    });
}

這樣咱們後續的處理邏輯就能夠用常規的方式在React組件中繼續編寫後續的業務邏輯，這樣就實現了基本的職責分離和代碼分離。

• 方法二：監聽WebWorker

recorder.js中使用DOM0級事件模型來與webworker通信，爲了避免覆蓋原功能，咱們能夠經過DOM2事件模型在recorder實例上綁定額外的監聽器:

recorder.worker.addEventListener('message',function(event){
    //event.data中就包含了轉換後的WAV數據
    processData(event.data);
    ...
})

這樣咱們就能夠在本身的邏輯代碼或二次封裝的代碼中實現對轉碼動做的監聽。

• 方法三：Promise化

使用Promise來實現異步的調用，將音頻處理的代碼剝離出去,最終的調用方式爲：

RecorderTools.exportData().then(data){
     //繼續在React組件文件中編寫其餘邏輯或調用方法
}

參考代碼以下:

//RecorderTools.js中的方法定義
function exportData(){
    return new Promise(function(resolve, reject){
        recorder && recorder.exportWAV(function(blob){
            resolve(blob);
        })
    });
}

回調，事件監聽，Promise都是javascript中重要的異步模式，根據我的喜愛和實際場景選擇使用便可。

如何提交Blob對象

經過recorder.js的官方示例能夠看到，若是不將錄音輸出爲本地wav格式的文件，咱們獲得的是一個Blob對象，Blob對象須要使用form表單的方式進行提交，具體方法以下(使用axios發送http請求)：

var formData = new FormData();
     formData.set('recorder.wav',blob);//blob即爲要發送的數據
     axios({
            url:'http://localhost:8927/transmit',
            method : 'POST',
            headers:{
                'Content-Type': 'multipart/form-data'//此處也能夠賦值爲false
            },
            data:formData
        });

三. Recorder.js的功能擴展

百度AI語音識別接口接收的語音文件須要知足以下的要求：

• pcm格式或wav格式文件的二進制數據通過base64轉換後的編碼
• 16000Hz採樣率
• 16bit位深
• 單聲道

要利用recorder.js實現上述需求，須要對源碼進行一些功能擴展。編碼轉換能夠在服務端進行，而recorder.js中的floatTo16BitPCM( )方法看名字應該是爲了知足16bit位深這個條件的，那麼咱們只須要考慮單聲道和16000採樣率這兩個條件了。

源碼中Recorder構造函數是能夠接受參數的，而這個參數會被合入實例的config屬性，其中numChannles就是聲道數，因此咱們只須要在實例化是傳入自定義的聲道數目便可：

new Recorder({
    numChannels:1//單聲道
})

再來看16000採樣率這個條件，查看源碼能夠知道，源碼中對於sampleRate的使用，一概使用了音頻流數據源上下文的sampleRate，也就是對應着電腦聲卡的採樣率（48000Hz或44100Hz），那如何獲得16000Hz採樣率的數據呢？好比一個48000Hz採樣率的聲卡採集的信號點，1秒採集了48000次，那麼這48000個數據要變成16000個數據，最簡單的辦法就是每4個點取1個而後組成新的數據，也就是說實際上聲音採集設備傳過來的採樣率是固定的，咱們須要多少的採樣率，只須要本身拿一個比例係數去換算一下，而後丟棄掉一部分數據點（固然也能夠求平均值）就能夠了，封裝後的調用方式爲：

new Recorder({
    numChannels:1,
    sampleRate:16000
});

那麼在源碼中須要作一些功能的擴展，關鍵的部分在下面這段代碼：

//recorder.js部分源碼
function exportWAV(type) {
    var buffers = [];
    for (var channel = 0; channel < numChannels; channel++) {
        buffers.push(mergeBuffers(recBuffers[channel], recLength));
    }
    var interleaved = undefined;
    if (numChannels === 2) {
        interleaved = interleave(buffers[0], buffers[1]);
    } else {
        interleaved = buffers[0];
        //此處是重點，能夠看到對於單聲道的狀況是沒有進行處理的，那麼仿照雙聲道的處理方式來添加採樣函數，此處改成interleaved = extractSingleChannel(buffers[0]);
    }
    var dataview = encodeWAV(interleaved);
    var audioBlob = new Blob([dataview], { type: type });

    self.postMessage({ command: 'exportWAV', data: audioBlob });
}

extractSingleChannel( )的具體實現參考interleave( )方法

/**
*sampleStep是系統的context.sampleRate/自定義sampleRate後取整的結果，這個方法實現了對單聲道的*採樣數據處理。
*/

function extractSingleChannel(input) {
    //若是此處不按比例縮短，實際輸出的文件會包含sampleStep倍長度的空錄音
    var length = Math.ceil(input.length / sampleStep);
    var result = new Float32Array(length);
    var index = 0,
        inputIndex = 0;
    while (index < length) {
        //此處是處理關鍵，算法就是輸入的數據點每隔sampleStep距離取一個點放入result
        result[index++] = input[inputIndex];
        inputIndex += sampleStep;
    }
    return result;
}

這樣處理後exportWAV( )方法輸出的Blob對象中存放的數據就知足了百度語音的識別要求。

四. 服務端開發細節

在服務端咱們使用Express框架來部署一個消息中轉服務，這裏涉及的知識點相對較少，可使用百度AI的nodejs-sdk來實現，也能夠自行封裝，權限驗證的方法幾乎都是通用的，按照官方文檔來作就能夠了。

經過multipart/form-data方式提交的表單沒法直接經過req.body或req.params進行處理，這裏使用官方推薦的Multer中間件來處理，此處較爲簡單，直接附上筆者的參考代碼：

此處有一點須要注意的是：在實例化Multer時，傳參和不傳參時獲得的轉換對象是不同的，若是涉及到相關場景能夠直接在控制檯打印出來確保使用了正確的屬性。