純js實現web端錄音與播放功能
摘要：
純js實現web端錄音功能，功能並不是特別多，逐步增加中，詳細地址：github
。
getUserMedia在非localhost和127的情況下，需要開啟https，由於騰訊雲的沒備案，demo就不放了，可以自行獲取程式碼並啟動測試。
實現方式
實現原理的話，主要...
純js實現web端錄音功能，功能並不是特別多，逐步增加中，詳細地址：github 。
getUserMedia在非localhost和127的情況下，需要開啟https，由於騰訊雲的沒備案，demo就不放了，可以自行獲取程式碼並啟動測試。
實現方式
實現原理的話，主要是以下三點，
- 利用webrtc的getUserMedia方法獲取裝置音訊輸入，使用audioprocess得到音訊流(pcm流，範圍-1到1)。
- 轉碼，利用前端中的ArrayBuffer等二進位制操作按取樣位數處理流資訊。
- 使用decodeAudioData轉碼arraybuffer到audioBuffer並播放（小檔案，大檔案使用audio）。
使用方式
script方式
直接引入dist下的recorder.js即可
let recorder = new Recorder();
npm方式
安裝：
npm i js-audio-recorder
呼叫：
import Recorder from 'js-audio-recorder'; let recorder = new Recorder();
API
基本方法
// 開始錄音 recorder.start(); // 暫停錄音 recorder.pause(); // 繼續錄音 recorder.resume() // 結束錄音 recorder.stop(); // 錄音播放 recorder.play(); // 銷燬錄音例項，釋放資源，fn為回撥函式， recorder.destroy(fn); recorder = null;
下載功能
// 下載pcm檔案
recorder.downloadPCM();
// 下載wav檔案
recorder.downloadWAV();
// 重新命名pcm檔案，wav也支援
recorder.downloadPCM('重新命名');
獲取錄音時長
// 回撥持續輸出時長
recorder.onprocess = function(duration) {
console.log(duration);
}
// 手動獲取錄音時長
console.log(recorder.duration);
預設配置
sampleBits，取樣位數，預設是16
sampleRate，取樣頻率，瀏覽器預設的，我的chrome是48000
numChannels，聲道數，預設是1
傳入引數
new Recorder時支援傳入引數，
{
sampleBits: 16,// 取樣位數，範圍8或16
sampleRate: 16000,// 取樣率，範圍11025、16000、22050、24000、44100、48000
numChannels: 1,// 聲道，範圍1或2
}
注意
- 使用127.0.0.1或localhost嘗試，因為getUserMedia在高版本的chrome下需要使用https。
相容性
主要是以下幾個方面：
- Web Audio Api
https://caniuse.com/#search=w...
- getUserMedia
https://caniuse.com/#search=g...
- Typed Arrays
https://caniuse.com/#search=t...
歡迎訪問和檢視：recorder 。