淺談H5音頻處理（更多談談錄音方向的內容）

最近須要作一個實時錄音而後根據音頻流實時反饋出調用靜音分析（VAD）以及語音識別(ASR)接口的功能。因而研究起H5有關這方面的支持。

H5的Web Audio API

首先須要弄清一點，Web Audio API和H5的<audio>徹底不是一個體量級的東西，<audio>能夠很方便地讓你將音頻文件丟進去就自帶各類花式功能。可是若是直接用Web Auido API進行操做，你甚至能夠無中生有地創造聲音。 這裏粗糙地羅列一下它能作什麼事情（盡我所能查到的資料）：

1. 對簡單或複雜的聲音進行混合；
2. 精確地控制聲音的密度和節奏；
3. 內置淡入、淡出，顆粒噪點、音調控制等效果；
4. 靈活的處理在音頻流的聲道，使它們成爲拆分和合並；
5. 處理從<audio>音頻或<video>視頻的媒體元素和音頻源。
6. 使用MediaStream的getUserMedia()方法實時處理現場輸入的音頻，例如變聲；
7. 立體音效，支持多種3D遊戲和沉浸式環境。
8. 利用卷積引擎，創造各類線性音效，例如小/大房間、大教堂、音樂廳、洞穴、隧道、走廊、森林等。尤爲適用於建立高質量的房間效果。（就是音樂播放器的那種特效~）
9. 高效實時的時域和頻的分析，配合CSS3或Canvas或WebGL能夠作到音樂的可視化支持。
10. 音頻波形算法控制，也就是隻要你研究地足夠透徹，你把AU搬到web上實現也就闊以的。

然而，這麼多高深地功能，不少前端開發者其實都沒有這樣地需求去接觸。羅列在這裏，是爲了讓本身接到相似需求的時候能準確判斷對此類需求能作到什麼程度。

簡單生成點聲音

網頁通常是無聲的，可是當你嘗試去給你的點擊產生一個聲音，對於特殊場景下會讓客戶耳目一新。這裏例子主要參考自張鑫旭--利用HTML5 Web Audio API給網頁交互增長聲音給到的例子。咱們逐行來分析一下代碼來看看如何實現這種效果。

1.  window.AudioContext = window.AudioContext || window.webkitAudioContext;
// 生成一個AudioContext對象
2.  var audioCtx = new AudioContext();
// 建立一個OscillatorNode, 它表示一個週期性波形（振盪），基本上來講創造了一個音調
3.  var oscillator = audioCtx.createOscillator();
 // 建立一個GainNode,它能夠控制音頻的總音量
4.  var gainNode = audioCtx.createGain();
// 把音量，音調和終節點進行關聯
5.  oscillator.connect(gainNode);
// audioCtx.destination返回AudioDestinationNode對象，表示當前audio context中全部節點的最終節點，通常表示音頻渲染設備
6.  gainNode.connect(audioCtx.destination);
// 指定音調的類型，其餘還有square|triangle|sawtooth
7.  oscillator.type = 'sine';
// 設置當前播放聲音的頻率，也就是最終播放聲音的調調
8.  oscillator.frequency.value = 196.00;
// 當前時間設置音量爲0
9.  gainNode.gain.setValueAtTime(0, audioCtx.currentTime);
 // 0.01秒後音量爲1
10. gainNode.gain.linearRampToValueAtTime(1, audioCtx.currentTime + 0.01);
// 音調從當前時間開始播放
11. oscillator.start(audioCtx.currentTime);
// 1秒內聲音慢慢下降，是個不錯的中止聲音的方法
12. gainNode.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 1);
// 1秒後徹底中止聲音
13. oscillator.stop(audioCtx.currentTime + 1);
複製代碼

oscillator

須要瞭解上面的代碼咱們須要對音頻有一些基礎的認識。首先，聲音的本質其實就是震動，而震動又務必牽扯到波形，不一樣的波形會發出不一樣的聲音。而後相同的波形下還會有不同的震動頻率，最終會表現爲音調的高低。所以當咱們須要生成一個聲音的時候，就須要爲它設置波形以及對應的音調，因此你能夠這麼理解oscillator就是一個創造音調的玩意。

那麼給一個音調的創造過程就以下：設置波形-->設置頻率

波形

波形主要內置了4種波形，對應發出不一樣的聲音。主要有sine(正弦波)、square（方波）、triangle（三角波）以及sawtooth鋸齒波。 固然若是有須要還可使用setPeriodicWave自定義波形。

頻率

頻率這玩意很好理解。就是咱們生活中接觸地「do、re、mi、fa、sol、la、si」.數值越小，越低沉；數值越大，越清脆。

connect

實際上是h5audio一個十分重要的概念。具體我把它簡單理解爲中間件的一個概念。例如這個例子，音調產生後通過音量處理的中間件而後再將這些聲音結點輸出到揚聲器上。（在其餘文章有很介紹得十分詳盡的，在這裏就不太想展開，最下面的外鏈能夠找到）

剩下的就是淡入淡出的設置以及播放聲音的內容。這些部分在張大大的博客中有詳細地闡述，該塊內容也是參考着它的博文進行二次翻譯記錄本身一些理解（很粗淺）而後總結罷了。

玩點錄音

獲取到原始的pcm數據

本身創造聲音有點過於高大上，只播聲音又顯得有點無趣。那麼幹脆來玩一下錄音好了。開啓錄音很簡單，只須要這麼簡單的一行代碼（固然不考慮兼容性咯）

navigator.mediaDevices.getUserMedia({audio: true, video: true})
複製代碼

能夠試一下在瀏覽器控制檯輸入這段代碼， 你就會看到網站想要調用你的攝像頭以及麥克風的請求。點擊容許後，你的攝像頭就會亮燈，開啓錄音和錄屏的狀態。

navigator.mediaDevices.getUserMedia(videoObj, (stream) => {}, errBack)

你應該立刻就會問，那麼錄完的音跑到哪裏去了。咱們從這個調用這個方法後，看到中間實際上是有一個回調函數，讓咱們拿到麥克風和攝像頭產生的數據流的。這時候咱們能夠調用AudioContext的接口使得音頻PCM數據在到達目的地前經過不一樣的處理節點（增益、壓縮等），因此咱們須要從這裏來入手。

navigator.mediaDevices.getUserMedia({audio: true}, initRecorder)

function initRecorder(stream) {
    const AudioContext = window.AudioContext
    const audioContext = new AudioContext()
    // 建立MediaStreamAudioSourceNode對象，給定媒體流（例如，來自navigator.getUserMedia實例），而後能夠播放和操做音頻。
    const audioInput = audioContext.createMediaStreamSource(stream)
    // 緩衝區大小爲4096，控制着多長時間需觸發一次audioprocess事件
    const bufferSize = 4096
    // 建立一個javascriptNode,用於使用js直接操做音頻數據
    // 第一個參數表示每一幀緩存的數據大小，能夠是256, 512, 1024, 2048, 4096, 8192, 16384,值越小一幀的數據就越小，聲音就越短，onaudioprocess 觸發就越頻繁。4096的數據大小大概是0.085s，就是說每過0.085s就觸發一次onaudioprocess，第二，三個參數表示輸入幀，和輸出幀的通道數。這裏表示2通道的輸入和輸出，固然我也能夠採集1，4,5等通道
    const recorder = audioContext.createScriptProcessor(bufferSize, 1, 1)
    // 每一個知足一個分片的buffer大小就會觸發這個回調函數
    recorder.onaudioprocess = recorderProcess
    // const monitorGainNode = audioContext.createGain()
    // 延遲0.01秒輸出到揚聲器
    // monitorGainNode.gain.setTargetAtTime(音量, audioContext.currentTime, 0.01)
    // monitorGainNode.connect(audioContext.destination)
    // audioInput.connect(monitorGainNode)
    // const recordingGainNode = audioContext.createGain()
    // recordingGainNode.gain.setTargetAtTime(音量, audioContext.currentTime, 0.01)
    // recordingGainNode.connect(audioContext.scriptProcessorNode)
    // 將音頻的數據流輸出到這個jsNode對象中
    audioInput.connect(recorder)
    // 最後先音頻流輸出到揚聲器。（將錄音流本來的輸出位置再定回原來的目標地）
    recorder.connect(audioContext.destination)
}
複製代碼

作到這一步咱們已經能拿到錄音數據了，並且仍是按照咱們預想的樣子去獲得已經分好片的buffer數據。那麼咱們終於能夠開始愉快地處理咱們的錄音流了。

補充一下上面代碼中註釋的兩段用來控制錄音音量大小以及將錄音聲音實時反饋到揚聲器的兩段方法函數。原理相一致，也就是設置一個處理數據的中間件，在錄音設備最終走到揚聲器（目標地）前進行二進制的控制

function recorderProcess(e) {
  // 左聲道
  const left = e.inputBuffer.getChannelData(0);
}
複製代碼

注意在recorderProcess裏面調用了一個getChannelData的方法，能夠傳入整型，取到對應聲道的數據，進行分別處理。因爲咱們是單聲道錄製，因此只須要拿到左聲道的數據流便可。

若是這時候你不須要對音頻的輸出再進行控制，已經能夠將這段二進制數據直接用websoket傳輸到後臺去了。

數據處理與轉換

假如真不湊巧，後臺大佬要的數據不是你這玩意的樣子，大佬們對音頻質量有要求：只接受一個採樣率是8khz、位深16的wav文件。很好，那麼提取關鍵字，咱們須要先確認咱們這段pcm數據是否8khz以及位深16.最後再把這些二進制組合起來轉成wav格式。看起來很複雜，不要緊，咱們一步一步來。

採樣率（sampleRate）和位深度（bitDepth）

首先，採樣率(sampleRate)是什麼呢，百度一下。

音頻採樣率是指錄音設備在一秒鐘內對聲音信號的採樣次數，採樣頻率越高聲音的還原就越真實越天然。在當今的主流採集卡上，採樣頻率通常共分爲22.05KHz、44.1KHz、48KHz三個等級，22.05KHz只能達到FM廣播的聲音品質，44.1KHz則是理論上的CD音質界限，48KHz則更加精確一些。

那麼接下來這段代碼就可讓你獲取到你麥克風採樣率是多少。

const AudioContext = window.AudioContext
const audioContext = new AudioContext()
// 可讀屬性
console.log(audioContext.sampleRate)
// 44100
複製代碼

很好，這段輸出表明你的錄音設備採樣率高到44100HZ，那麼根據需求，你就須要將本身的音頻採樣率下降下來了。然而不幸的是，瀏覽器並不容許去修改錄音時的採樣率，並且不一樣電腦設備的表現還不同。這意味着，你須要在中間node拿到的二進制再進行一次處理。那麼怎麼去下降本身的採樣率呢。根據上面百度的資料，你很容易就能發現，採樣率的高低其實只是在一秒內的音頻它的數據點有多少個的問題，咱們須要把原來一秒內有44100個點的數據流減小成8000個點的數據流。很簡單嘛，不是麼，不過這個有個小點是須要注意的。

Downsample PCM audio from 44100 to 8000參考這裏的一個回覆： Lets take a simple case of downsampling by a factor of 2. (e.g. 44100->22050). A naive approach would be to just throw away every other sample. But imagine for a second that in the original 44.1kHz file there was a single sine wave present at 20khz. It is well within nyquist (fs/2=22050) for that sample rate. After you throw every other sample away it is still going to be there at 10kHz but now it will be above nyquist (fs/2=11025) and it will alias into your output signal. The final result is that you will have a big fat sine wave sitting at 8975 Hz! In order to avoid this aliasing during downsampling you need to first design a lowpass filter with a cutoff selected according to your decimation ratio. For the example above you would cutoff everything above 11025 first and then decimate.

這裏的大概意思就是單純地抽點是不行的。固然裏面內在邏輯還涉及到頻率波長什麼的，我天然就不太清楚了。有興趣的朋友能夠詳細瞭解一下緣由。所幸這裏還提供了代碼的實現方式。

function interleave(e){
      var t = e.length;
      sampleRate += 0.0;
      outputSampleRate += 0.0;
      var s = 0,
      o = sampleRate / outputSampleRate,
      u = Math.ceil(t * outputSampleRate / sampleRate),
      a = new Float32Array(u);
      for (i = 0; i < u; i++) {
        a[i] = e[Math.floor(s)];
        s += o;
      }
      return a;
    }
複製代碼

那麼採樣率的問題就解決了。剩下還有兩個問題。將音頻流轉爲16位深，這裏就比較簡單了。只要確保你生成的位數足夠就行。好比，8位深的音頻只須要生成一個Uint8Array，16位深就要生成2個的長度。new Unit8Array(bitDepth / 8)

pcm數據轉wav

好不容易終於走到最後一步了。怎樣把pcm數據轉爲wav數據。原本覺得將是一個極其棘手的問題，可是所幸。pcm->wav的方法很是簡單，將wav文件以二進制的方式打開後，去除前44位的字節的頭文件信息就是一段pcm數據了。那麼咱們只須要把錄音過程當中的全部內容都收集起來，而後插入頭文件信息便可。這一步相對於前面來講簡直簡單太多了。

可是咱們還有一個問題要解決。「javascript如何操做二進制數據」。因此接下來就要介紹這幾個玩意了。

Bolb、ArrayBuffer、Unit8Array、DataView

通過漫長地查詢，看源碼看API查資料，我終於集齊了有關此次操做的全部對象，能夠召喚神龍了！

這個幾個對象真的是老衲學了這麼久都沒接觸過幾個，有些甚至聽都沒聽過。因此一個一個來，並且我也只能提供一些我初略的看法。（歡迎有大佬給我訂正，想要具體瞭解仍是更適合單獨去搜索）

ArrayBuffer是個啥玩意呢。ArrayBuffer又稱類型化數組。類型化數組，我記得在一篇詳解數組的文章有看到，可是因爲用處很少後面就給忘了。大體的意思就是js的數組對象，其實並非像其餘面嚮對象語言的實現方式同樣，內存不連續並且類型不可控嚴重影響性能。（可是各大瀏覽器引擎都有作優化，因此實際編碼不須要考慮）。而ArrayBuffer則是專門放0和1組成的二進制數據，因此當你在捕獲到pcm數據的時候，將它打印到控制檯上會看到這是個ArrayBuffer類型的數組，就是由於這段是二進制數據。

而ArrayBuffer對象並無提供任何讀寫內存的方法，而是容許在其上方創建「視圖」，從而插入與讀取內存中的數據。那麼視圖又是啥呢？？

視圖類型	數據類型	佔用位數	佔用字節	有無符號
Int8Array	整數	8	1	有
Uint8Array	整數	8	1	無
Uint8ClampedArray	整數	8	1	無
Int16Array	整數	16	2	有
Uint16Array	整數	16	2	無
Int32Array	整數	32	4	有
Uint32Array	整數	32	4	無
Float32Array	整數	32	4	\
Float64Array	浮點數	64	8	\

這對於一個計算機基礎極差的大兄弟來講簡直是噩夢。這麼多玩意，我得怎麼搞。又怎麼選擇，啊咧要崩潰了。可是要操做二進制呀，求助源碼庫是一個最簡單的作法。在源碼裏面就發現這個玩意了。

DataView視圖。爲了解決各類硬件設備、數據傳輸等對默認字節序的設定不一而致使解碼時候會發生的混亂問題，javascript提供了DataView類型的視圖來讓開發者在對內存進行讀寫時手動設定字節序的類型。因而.wav的文件頭就要這麼寫。具體想知道怎麼寫仍是得百度出來.wav的文件頭信息字節具體如何分配

var view = new DataView(wav.buffer)

    view.setUint32(0, 1380533830, false) // RIFF identifier 'RIFF'
    view.setUint32(4, 36 + dataLength, true) // file length minus RIFF identifier length and file description length
    view.setUint32(8, 1463899717, false) // RIFF type 'WAVE'
    view.setUint32(12, 1718449184, false) // format chunk identifier 'fmt '
    view.setUint32(16, 16, true) // format chunk length
    view.setUint16(20, 1, true) // sample format (raw)
    view.setUint16(22, this.numberOfChannels, true) // channel count
    view.setUint32(24, this.sampleRate, true) // sample rate
    view.setUint32(28, this.sampleRate * this.bytesPerSample * this.numberOfChannels, true) // byte rate (sample rate * block align)
    view.setUint16(32, this.bytesPerSample * this.numberOfChannels, true) // block align (channel count * bytes per sample)
    view.setUint16(34, this.bitDepth, true) // bits per sample
    view.setUint32(36, 1684108385, false) // data chunk identifier 'data'
    view.setUint32(40, dataLength, true) // data chunk length
複製代碼

上面的內容就是頭信息的寫法了。最後將數據以unit8Array的格式寫入一個wav二進制數據就有了。咱們還須要的就是將它轉成文件對象。

Blob你可能沒聽過，可是File你確定聽過，由於常常須要form表單傳文件嘛。那麼你這麼理解,Blob是一種JavaScript的對象類型。HTML5的文件操做對象，file對象就是Blob的一個分支或說一個子集。

也就是爲啥File對象能進行文件分割上傳，就是利用了Blob操做二進制數據的方法。

new Bolb(wavData, { type: 'audio/wav' })
複製代碼

驗證效果

上面的代碼都是二進制操做，是否是特別沒信息。那就驗證一下吧！把生成的blob對象，這樣操做：const url = URL.createObjectURL(blob)而後把它丟到<a>標籤裏面來下載這個文件。命令行工具：

$ file test.wav
test.wav: RIFF (little-endian) data, WAVE audio, Microsoft PCM, 16 bit, mono 8000 Hz 複製代碼

徹底符合效果。nice，剩下的問題就是回到實時處理pcm數據的問題了。

傳輸arrayBuffer

文件咱們會傳，可是二進制buffer數組要怎麼傳遞呢？只有當你使用blob生成後的對象才能做爲文件對象使用。可是當咱們仍是pcm數據段的時候怎麼來做爲一個文件傳遞過去呢。

這裏只稍微列舉一下本身的嘗試，不必定是個正確的使用方法。這裏使用的是websocket

// client
const formData = new FormData()
formData.append(blob, new Blob(arrayBuffer))

// server
console.log(ctx.args[0]) // ArrayBuffer<xx,xxx>
複製代碼

作點小優化

Web Worker瞭解一下，因爲涉及到文件的轉碼操做。因此很耗費性能，這時候是時候掏出web Worker來深度優化這玩意。

有關這個的內容，其實看起來很高深可是很簡單，worker就至關於一個處理源數據的方法，而後交互方式是用事件監聽。

這裏僅僅記錄幾個坑，就不詳細介紹：

1. web worker必須起服務來實現。單純html文件時不能打開worker的。worker必需要傳一個.js文件路徑，且保證同源策略。
2. 不要向worker去傳遞函數，不然會錯誤。並且瀏覽器還不暴露這個錯誤。排查了很久的說
3. worker必須傳入一個js的路徑。在vue下，只能把它丟在static文件去引用了喵。

這裏還有些小問題沒解決

1. 如何實時地繪製出錄音的音量。首先音量能夠取獲得的buffer裏面的大小做爲分貝參考。可是具體實現方式還不太懂，或者說沒有簡便的實現方式吧。
2. 前端收到一個buffer的時候想要實時播放如何作到，如今作的方式實際上是最後才嵌回去。作了一個小實驗，沒成功。（直接把錄音轉化好的內容轉回ArrayBuffer可是失敗了）。感受若是有後端來傳遞數據應該能夠實現。

audioContext.decodeAudioData(play_queue[index_play], function(buffer) {//解碼成pcm流
            var audioBufferSouceNode = audioContext.createBufferSource();
            audioBufferSouceNode.buffer = buffer;
            audioBufferSouceNode.connect(audioContext.destination);
            audioBufferSouceNode.start(0);
        }, function(e) {
            console.log("failed to decode the file");
        });
複製代碼

3. 如何實時地計算到如今音頻的錄製實現。由於是數據流沒辦法轉成音頻對象致使沒能拿到這些方法來獲取。如今比較粗暴的方法就是經過字節長度 採樣率 位數來計算 可是感受計算量比較大 不屬於一個好的實現方式？
4. 改變音調和聲音位置的api沒能成功調用起來。

const filterNode = audioContext.createBiquadFilter();
// ...
source.connect(filterNode);
filterNode.connect(source.destination);

const updateFrequency = frequency => filterNode.frequency.value = frequency;

複製代碼

const rangeX = document.querySelector('input[name="rangeX"]');
const source = audioContext.createBufferSource();
const pannerNode = audioContext.createPanner();

source.connect(pannerNode);
pannerNode.connect(source.destination);

rangeX.addEventListener('input', () => pannerNode.setPosition(rangeX.value, 0, 0));

複製代碼

node端切割音頻文件

這裏補充一點小小知識點。node端並無特別好的處理音頻的庫。查詢了好久以後發現一個調用機器環境ffmpeg來輔助處理的庫。用起來起碼是沒問題的，並且很是全面。（畢竟接觸音頻多的人應該都懂這個玩意）這裏粗糙mark一下本身以前用到的api。

var command = ffmpeg(filePath)
        // .seekInput(60.0) // 開始切割的時間
        .seekInput(7.875) // 開始切割的時間，延遲7秒？爲啥
        .duration(4.125) // 須要切割的音頻時長
        .save(path.join(__dirname, '../../../app/public/test-1.wav'))
        .on('end', () => {
          console.log('finish')
        })
        .run()
複製代碼

最後，感謝付總、塗老師耐心地和我講解有關音頻的種種問題。感謝前端組各位大佬在我不懂的內容即便本身也沒有過多接觸可是仍是耐心和我探討問題。

---

參考文章：這裏列出的文章都是我查找資料時看到的不錯的文章。和上面的內容不必定強烈相關，建議對音頻感興趣的朋友徹底能夠本身看看

一個使用 HTML5 錄音的例子

Getting Started with Web Audio API

Using Recorder.js to capture WAV audio in HTML5 and upload it to your server or download locally

HTML5錄音控件

chris-rudmin/opus-recorder

Tutorial: HTML Audio Capture streaming to Node.js (no browser extensions)

[前端教程]HTML5製做好玩的麥克風音量檢測器（Web Audio API）

Downsample PCM audio from 44100 to 8000 DataView Typed Arrays: Binary Data in the Browser Tech Tip: Sample Rate and Bit Depth—An Introduction to Sampling How to convert ArrayBuffer to and from String 用html5-audio-api開發遊戲的3d音效和混音 理解DOMString、Document、FormData、Blob、File、ArrayBuffer數據類型 深刻淺出 Web Audio Api