recorder

js audio recorder plugin.

| 簡體中文

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

支持錄音，暫停，恢復(fù)，和錄音播放。

支持音頻數(shù)據(jù)的壓縮，支持單雙通道錄音。

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

支持邊錄邊轉(zhuǎn)(播放)。

支持導(dǎo)出錄音文件，格式為pcm或wav。

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

錄音數(shù)據(jù)支持第三方平臺的語音識別。

使用

在線演示地址

在線文檔

demo使用

npm ci (推薦) 或 npm install

npm run dev

調(diào)試移動端

npm run https

編譯

npm run build

使用方法

引入方式

npm方式：

安裝：

npm i js-audio-recorder

調(diào)用：

import Recorder from 'js-audio-recorder';

let recorder = new Recorder();

script標(biāo)簽方式

let recorder = new Recorder();

API

初始化實例

可以配置輸出數(shù)據(jù)參數(shù)，

let recorder = new Recorder({

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

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

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

compiling: false, // 是否邊錄邊轉(zhuǎn)換，默認是false

});

返回:

開始錄音

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

// 開始錄音

}, (error) => {

// 出錯了

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

});

返回: Promise

錄音暫停

// 暫停錄音

recorder.pause();

返回: void

繼續(xù)錄音

// 繼續(xù)錄音

recorder.resume()

返回: void

僅支持暫停后，恢復(fù)錄音。

結(jié)束錄音

// 結(jié)束錄音

recorder.stop();

返回: void

錄音播放

// 錄音播放

recorder.play();

返回: void

支持不結(jié)束直接調(diào)用錄音播放。

暫停錄音播放

// 暫停錄音播放

recorder.pausePlay();

返回: void

恢復(fù)錄音播發(fā)

// 恢復(fù)錄音播發(fā)

recorder.resumePlay();

返回: void

停止播放

// 停止播放

recorder.stopPlay();

返回: void

銷毀實例

// 銷毀錄音實例，置為null釋放資源，fn為回調(diào)函數(shù)，

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

recorder = null;

});

返回: Promise

直接獲取錄音數(shù)據(jù)

獲取 PCM 數(shù)據(jù)

// 獲取 PCM 數(shù)據(jù)(Blob)

recorder.getPCMBlob();

返回:

獲取 WAV 數(shù)據(jù)

// 獲取 WAV 數(shù)據(jù)(Blob)

recorder.getWAVBlob();

返回:

下載錄音文件

下載 PCM 格式

// 下載pcm文件

recorder.downloadPCM(fileName ?);

fileName 重命名文件

返回:

下載 WAV 格式

// 下載wav文件

recorder.downloadWAV(fileName ?);

fileName 重命名文件

返回:

錄音實時回調(diào) 獲取錄音數(shù)據(jù)

目前支持獲取以下數(shù)據(jù)：

錄音時長(duration)。

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

錄音音量百分比(vol)。

所有的錄音數(shù)據(jù)(data)。

// 回調(diào)持續(xù)輸出時長(當(dāng)收集的棧滿時觸發(fā))

// 不推薦使用

recorder.onprocess = function(duration) {

console.log(duration);

}

// 推薦使用

recorder.onprogress = function(params) {

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

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

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

console.log('當(dāng)前錄音的總數(shù)據(jù)', params.data);

}

// 手動獲取錄音總時長

console.log(recorder.duration);

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

console.log(recorder.fileSize);

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

邊錄邊轉(zhuǎn)換

現(xiàn)支持邊錄音邊轉(zhuǎn)換出對應(yīng)的PCM數(shù)據(jù)。獲取方式：

onprogress 回調(diào)，見錄音回調(diào)函數(shù)

getWholeData() 和 getNextData() 方法。

getWholeData()

用于獲取錄音的整個數(shù)據(jù)，與 onprogress 回調(diào)中的 data 相同。若沒有開啟邊錄邊轉(zhuǎn)，則返回是空數(shù)組。

getNextData()

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

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

錄音波形顯示

let dataArray = recorder.getRecordAnalyseData();

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

播放外部音頻文件

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

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

任務(wù)列表

拆分recorder到各個功能模塊。

增加test代碼。

promise，支持async, await。

功能完善。

兼容性測試。

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

注意

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

兼容性

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

window pc端

38+

30+

42+

11+

21+

不支持

移動端

安卓

42+

40+

？

不支持

不支持

9.2+

不支持

不支持

不支持

不支持

IOS

？

？

11+

？

？

？

？

？

？

？

需要打開瀏覽器錄音權(quán)限，在設(shè)置-權(quán)限中可以配置。

其他資源

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。