【Recorder.js+百度語音識別】全棧方案技術(shù)細(xì)節(jié)

項(xiàng)目中需要利用百度語音接口在Web端實(shí)現(xiàn)語音識別功能，采用了這樣的技術(shù)方案，但實(shí)現(xiàn)時(shí)遇到了很多問題，發(fā)現(xiàn)網(wǎng)上大部分文章都只是在詳解官方提供的example示例，對實(shí)際開發(fā)沒有提供什么有價(jià)值的建議，而recorder.js是無法直接適配百度AI的語音接口的，故本篇將開發(fā)中各個(gè)細(xì)節(jié)點(diǎn)記錄與此，歡迎指點(diǎn)交流。

一. 技術(shù)棧選擇

需求：利用百度語音接口在Web端實(shí)現(xiàn)語音識別功能

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

recorder.js項(xiàng)目地址:https://github.com/mattdiamond/Recorderjs

演示效果：

二. 前端開發(fā)細(xì)節(jié)

為recorder.js提供一個(gè)代理對象

前端的主框架采用React，在基本結(jié)構(gòu)和語法上并沒有太多問題，為了使用recorder.js，我們封裝了一個(gè)recorder-tool.js作為代理，其實(shí)現(xiàn)方法較為簡單，就是將官方示例中example示例中的html文件的腳本部分封裝成一個(gè)單例對象作為recorder.js的代理，然后暴露一組API供上層調(diào)用，大致的結(jié)構(gòu)如下：

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方法的回調(diào)地獄

官方示例中輸出wav編碼格式的數(shù)據(jù)這個(gè)動(dòng)作是通過webworker來完成的，也就是說二進(jìn)制數(shù)據(jù)處理的開始和結(jié)束時(shí)間點(diǎn)是通過事件來觸發(fā)的，recorder.exportWAV( )接收一個(gè)回調(diào)函數(shù)作為入?yún)?，在得?code>wav格式的數(shù)據(jù)后會執(zhí)行傳入的回調(diào)函數(shù)，如果要在react中實(shí)現(xiàn)，就需要寫成：

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

你或許已經(jīng)發(fā)現(xiàn)了這個(gè)【回調(diào)地獄】的現(xiàn)象，深度的嵌套會讓邏輯變的復(fù)雜且代碼高度耦合，想把一些方法從react中剝離出去非常困難，我們希望使用一些其他的方式來轉(zhuǎn)換代碼的控制權(quán)，而不是把一大堆后續(xù)的邏輯傳進(jìn)exportData( )方法。

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

我們在一個(gè)存在的DOM元素上添加一個(gè)自定義事件recorder.export的監(jiān)聽器，并在傳入recorder.exportWAV( )方法的回調(diào)函數(shù)中，手動(dòng)初始化觸發(fā)一個(gè)自定義事件(暫不考慮兼容性問題)，并把recorder.js導(dǎo)出的數(shù)據(jù)掛在這個(gè)event對象上，然后在指定元素上派發(fā)這個(gè)事件：

//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);
    });
}

這樣我們后續(xù)的處理邏輯就可以用常規(guī)的方式在React組件中繼續(xù)編寫后續(xù)的業(yè)務(wù)邏輯，這樣就實(shí)現(xiàn)了基本的職責(zé)分離和代碼分離。

• 方法二：監(jiān)聽WebWorker

recorder.js中使用DOM0級事件模型來與webworker通訊，為了不覆蓋原功能，我們可以通過DOM2事件模型在recorder實(shí)例上綁定額外的監(jiān)聽器:

recorder.worker.addEventListener('message',function(event){
    //event.data中就包含了轉(zhuǎn)換后的WAV數(shù)據(jù)
    processData(event.data);
    ...
})

這樣我們就可以在自己的邏輯代碼或二次封裝的代碼中實(shí)現(xiàn)對轉(zhuǎn)碼動(dòng)作的監(jiān)聽。

• 方法三：Promise化

使用Promise來實(shí)現(xiàn)異步的調(diào)用，將音頻處理的代碼剝離出去,最終的調(diào)用方式為：

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

參考代碼如下:

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

回調(diào)，事件監(jiān)聽，Promise都是javascript中重要的異步模式，根據(jù)個(gè)人喜好和實(shí)際場景選擇使用即可。

如何提交Blob對象

通過recorder.js的官方示例可以看到，如果不將錄音輸出為本地wav格式的文件，我們得到的是一個(gè)Blob對象，Blob對象需要使用form表單的方式進(jìn)行提交，具體方法如下(使用axios發(fā)送http請求)：

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

三. Recorder.js的功能擴(kuò)展

百度AI語音識別接口接收的語音文件需要滿足如下的要求：

• pcm格式或wav格式文件的二進(jìn)制數(shù)據(jù)經(jīng)過base64轉(zhuǎn)換后的編碼
• 16000Hz采樣率
• 16bit位深
• 單聲道

要利用recorder.js實(shí)現(xiàn)上述需求，需要對源碼進(jìn)行一些功能擴(kuò)展。編碼轉(zhuǎn)換可以在服務(wù)端進(jìn)行，而recorder.js中的floatTo16BitPCM( )方法看名字應(yīng)該是為了滿足16bit位深這個(gè)條件的，那么我們只需要考慮單聲道和16000采樣率這兩個(gè)條件了。

源碼中Recorder構(gòu)造函數(shù)是可以接受參數(shù)的，而這個(gè)參數(shù)會被合入實(shí)例的config屬性，其中numChannles就是聲道數(shù)，所以我們只需要在實(shí)例化是傳入自定義的聲道數(shù)目即可：

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

再來看16000采樣率這個(gè)條件，查看源碼可以知道，源碼中對于sampleRate的使用，一律使用了音頻流數(shù)據(jù)源上下文的sampleRate，也就是對應(yīng)著電腦聲卡的采樣率（48000Hz或44100Hz），那如何得到16000Hz采樣率的數(shù)據(jù)呢？比如一個(gè)48000Hz采樣率的聲卡采集的信號點(diǎn)，1秒采集了48000次，那么這48000個(gè)數(shù)據(jù)要變成16000個(gè)數(shù)據(jù)，最簡單的辦法就是每4個(gè)點(diǎn)取1個(gè)然后組成新的數(shù)據(jù)，也就是說實(shí)際上聲音采集設(shè)備傳過來的采樣率是固定的，我們需要多少的采樣率，只需要自己拿一個(gè)比例系數(shù)去換算一下，然后丟棄掉一部分?jǐn)?shù)據(jù)點(diǎn)（當(dāng)然也可以求平均值）就可以了，封裝后的調(diào)用方式為：

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

那么在源碼中需要做一些功能的擴(kuò)展，關(guān)鍵的部分在下面這段代碼：

//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];
        //此處是重點(diǎn)，可以看到對于單聲道的情況是沒有進(jìn)行處理的，那么仿照雙聲道的處理方式來添加采樣函數(shù)，此處改為interleaved = extractSingleChannel(buffers[0]);
    }
    var dataview = encodeWAV(interleaved);
    var audioBlob = new Blob([dataview], { type: type });

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

extractSingleChannel( )的具體實(shí)現(xiàn)參考interleave( )方法

/**
*sampleStep是系統(tǒng)的context.sampleRate/自定義sampleRate后取整的結(jié)果，這個(gè)方法實(shí)現(xiàn)了對單聲道的*采樣數(shù)據(jù)處理。
*/

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

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

四. 服務(wù)端開發(fā)細(xì)節(jié)

在服務(wù)端我們使用Express框架來部署一個(gè)消息中轉(zhuǎn)服務(wù)，這里涉及的知識點(diǎn)相對較少，可以使用百度AI的nodejs-sdk來實(shí)現(xiàn)，也可以自行封裝，權(quán)限驗(yàn)證的方法幾乎都是通用的，按照官方文檔來做就可以了。

通過multipart/form-data方式提交的表單無法直接通過req.body或req.params進(jìn)行處理，這里使用官方推薦的Multer中間件來處理，此處較為簡單，直接附上筆者的參考代碼：

此處有一點(diǎn)需要注意的是：在實(shí)例化Multer時(shí)，傳參和不傳參時(shí)得到的轉(zhuǎn)換對象是不一樣的，如果涉及到相關(guān)場景可以直接在控制臺打印出來確保使用了正確的屬性。