純js實現web端錄音與播放功能

時間 2019-11-08

標籤實現 web 錄音播放功能欄目 JavaScript 简体版

原文原文鏈接

純js實現web端錄音功能，功能並非特別多，逐步增長中，詳細地址：github。前端

getUserMedia在非localhost和127的狀況下，須要開啓https，因爲騰訊雲的沒備案，demo就不放了，能夠自行獲取代碼並啓動測試。git

實現方式

實現原理的話，主要是如下三點，github

利用webrtc的getUserMedia方法獲取設備音頻輸入，使用audioprocess獲得音頻流(pcm流，範圍-1到1)。
轉碼，利用前端中的ArrayBuffer等二進制操做按採樣位數處理流信息。
使用decodeAudioData轉碼arraybuffer到audioBuffer並播放（小文件，大文件使用audio）。

使用方式

script方式

直接引入dist下的recorder.js便可web

let recorder = new Recorder();

npm方式

安裝：chrome

npm i js-audio-recorder

調用：npm

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,      // 採樣率，範圍1102五、16000、22050、24000、44100、48000
    numChannels: 1,         // 聲道，範圍1或2
}