recorder

js audio recorder plugin.

| 簡體中文

主要用于Web瀏覽器端錄制短音頻。

支持錄音，暫停，恢復，和錄音播放。

支持音頻數據的壓縮，支持單雙通道錄音。

支持錄音時長、錄音大小的顯示。

支持邊錄邊轉(播放)。

支持導出錄音文件，格式為pcm或wav。

支持錄音波形顯示，可自己定制。

錄音數據支持第三方平臺的語音識別。

使用

在線演示地址

在線文檔

demo使用

npm ci (推薦) 或 npm install

npm run dev

調試移動端

npm run https

編譯

npm run build

使用方法

引入方式

npm方式：

安裝：

npm i js-audio-recorder

調用：

import Recorder from 'js-audio-recorder';

let recorder = new Recorder();

script標簽方式

let recorder = new Recorder();

API

初始化實例

可以配置輸出數據參數，

let recorder = new Recorder({

sampleBits: 16, // 采樣位數，支持 8 或 16，默認是16

sampleRate: 16000, // 采樣率，支持 11025、16000、22050、24000、44100、48000，根據瀏覽器默認值，我的chrome是48000

numChannels: 1, // 聲道，支持 1 或 2， 默認是1

compiling: false, // 是否邊錄邊轉換，默認是false

});

返回:

開始錄音

recorder.start().then(() => {

// 開始錄音

}, (error) => {

// 出錯了

console.log(`${error.name}:${error.message}`);

});

返回: Promise

錄音暫停

// 暫停錄音

recorder.pause();

返回: void

繼續錄音

// 繼續錄音

recorder.resume()

返回: void

僅支持暫停后，恢復錄音。

結束錄音

// 結束錄音

recorder.stop();

返回: void

錄音播放

// 錄音播放

recorder.play();

返回: void

支持不結束直接調用錄音播放。

暫停錄音播放

// 暫停錄音播放

recorder.pausePlay();

返回: void

恢復錄音播發

// 恢復錄音播發

recorder.resumePlay();

返回: void

停止播放

// 停止播放

recorder.stopPlay();

返回: void

銷毀實例

// 銷毀錄音實例，置為null釋放資源，fn為回調函數，

recorder.destroy().then(function() {

recorder = null;

});

返回: Promise

直接獲取錄音數據

獲取 PCM 數據

// 獲取 PCM 數據(Blob)

recorder.getPCMBlob();

返回:

獲取 WAV 數據

// 獲取 WAV 數據(Blob)

recorder.getWAVBlob();

返回:

下載錄音文件

下載 PCM 格式

// 下載pcm文件

recorder.downloadPCM(fileName ?);

fileName 重命名文件

返回:

下載 WAV 格式

// 下載wav文件

recorder.downloadWAV(fileName ?);

fileName 重命名文件

返回:

錄音實時回調 獲取錄音數據

目前支持獲取以下數據：

錄音時長(duration)。

已錄音文件大小(字節)(fileSize)。

錄音音量百分比(vol)。

所有的錄音數據(data)。

// 回調持續輸出時長(當收集的棧滿時觸發)

// 不推薦使用

recorder.onprocess = function(duration) {

console.log(duration);

}

// 推薦使用

recorder.onprogress = function(params) {

console.log('錄音時長', params.duration);

console.log('已錄音文件大小(字節)', params.fileSize);

console.log('錄音音量百分比', params.vol);

console.log('當前錄音的總數據', params.data);

}

// 手動獲取錄音總時長

console.log(recorder.duration);

// 手動獲取已錄音文件大小(字節)

console.log(recorder.fileSize);

注意：回調中不要進行太耗cpu的計算行為，以免造成性能問題。

邊錄邊轉換

現支持邊錄音邊轉換出對應的PCM數據。獲取方式：

onprogress 回調，見錄音回調函數

getWholeData() 和 getNextData() 方法。

getWholeData()

用于獲取錄音的整個數據，與 onprogress 回調中的 data 相同。若沒有開啟邊錄邊轉，則返回是空數組。

getNextData()

用于獲取前一次 getNextData() 之后的數據。同樣的，若沒有開啟邊錄邊轉，則返回是空數組。

注：demo操作見 example.ts 文件。

錄音波形顯示

let dataArray = recorder.getRecordAnalyseData();

返回的是一個1024長的，0-255大小的Uint8Array類型。用戶可以根據這些數據自定義錄音波形。

播放外部音頻文件

Recorder.playAudio(/* 放入blob數據 */);

支持的音樂格式由瀏覽器的audio支持的類型決定。

任務列表

拆分recorder到各個功能模塊。

增加test代碼。

promise，支持async, await。

功能完善。

兼容性測試。

支持邊錄音邊轉換(播放)。

注意

使用127.0.0.1或localhost嘗試，因為getUserMedia在高版本的chrome下需要使用https。

兼容性

以下為測試結果，低于以下版本并不表示不支持，可能是未測試到，增加或標注請查看：issues6

window pc端

38+

30+

42+

11+

21+

不支持

移動端

安卓

42+

40+

？

不支持

不支持

9.2+

不支持

不支持

不支持

不支持

IOS

？

？

11+

？

？

？

？

？

？

？

需要打開瀏覽器錄音權限，在設置-權限中可以配置。

其他資源

總結

以上是生活随笔為你收集整理的在线录音机 html5,recorder的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。