純js實(shí)現(xiàn)web端錄音與播放功能

lanffy 發(fā)布于2019-08-23 16:58 / 2649人閱讀

摘要：純實(shí)現(xiàn)端錄音功能，功能并不是特別多，逐步增加中，詳細(xì)地址。使用轉(zhuǎn)碼到并播放小文件，大文件使用。其他資源基于阿里云實(shí)現(xiàn)簡單的語音識(shí)別功能學(xué)習(xí)與音頻播放實(shí)現(xiàn)音頻數(shù)據(jù)收集實(shí)現(xiàn)數(shù)據(jù)編碼轉(zhuǎn)化到格式與播放

純js實(shí)現(xiàn)web端錄音功能，功能并不是特別多，逐步增加中，詳細(xì)地址：github。

getUserMedia在非localhost和127的情況下，需要開啟https，由于騰訊云的沒備案，demo就不放了，可以自行獲取代碼并啟動(dòng)測試。

實(shí)現(xiàn)方式

實(shí)現(xiàn)原理的話，主要是以下三點(diǎn)，

利用webrtc的getUserMedia方法獲取設(shè)備音頻輸入，使用audioprocess得到音頻流(pcm流，范圍-1到1)。

轉(zhuǎn)碼，利用前端中的ArrayBuffer等二進(jìn)制操作按采樣位數(shù)處理流信息。

使用decodeAudioData轉(zhuǎn)碼arraybuffer到audioBuffer并播放（小文件，大文件使用audio）。

使用方式 script方式

直接引入dist下的recorder.js即可

let recorder = new Recorder();

npm方式

安裝：

npm i js-audio-recorder

調(diào)用：

import Recorder from "js-audio-recorder";

let recorder = new Recorder();

API 基本方法

// 開始錄音
recorder.start();
// 暫停錄音
recorder.pause();
// 繼續(xù)錄音
recorder.resume()
// 結(jié)束錄音
recorder.stop();
// 錄音播放
recorder.play();
// 銷毀錄音實(shí)例，釋放資源，fn為回調(diào)函數(shù)，
recorder.destroy(fn);
recorder = null;

下載功能

// 下載pcm文件
recorder.downloadPCM();
// 下載wav文件
recorder.downloadWAV();
// 重命名pcm文件，wav也支持
recorder.downloadPCM("重命名");

獲取錄音時(shí)長

// 回調(diào)持續(xù)輸出時(shí)長
recorder.onprocess = function(duration) {
    console.log(duration);
}
// 手動(dòng)獲取錄音時(shí)長
console.log(recorder.duration);

默認(rèn)配置

sampleBits，采樣位數(shù)，默認(rèn)是16
sampleRate，采樣頻率，瀏覽器默認(rèn)的，我的chrome是48000
numChannels，聲道數(shù)，默認(rèn)是1

傳入?yún)?shù)

new Recorder時(shí)支持傳入?yún)?shù)，

{
    sampleBits: 16,         // 采樣位數(shù)，范圍8或16
    sampleRate: 16000,      // 采樣率，范圍11025、16000、22050、24000、44100、48000
    numChannels: 1,         // 聲道，范圍1或2
}

注意

使用127.0.0.1或localhost嘗試，因?yàn)間etUserMedia在高版本的chrome下需要使用https。

兼容性

主要是以下幾個(gè)方面：

Web Audio Api

https://caniuse.com/#search=w...

getUserMedia

https://caniuse.com/#search=g...

Typed Arrays

https://caniuse.com/#search=t...

歡迎訪問和查看：recorder。

其他資源

基于阿里云實(shí)現(xiàn)簡單的語音識(shí)別功能
web Audio學(xué)習(xí)與音頻播放
web Audio實(shí)現(xiàn)pcm音頻數(shù)據(jù)收集
js實(shí)現(xiàn)pcm數(shù)據(jù)編碼
js轉(zhuǎn)化pcm到wav格式與播放