基于JS如何實現web端錄音與播放功能

這篇文章主要介紹了基于JS如何實現web端錄音與播放功能，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

JS是什么

JS是JavaScript的簡稱，它是一種直譯式的腳本語言，其解釋器被稱為JavaScript引擎，是瀏覽器的一部分，主要用于web的開發，可以給網站添加各種各樣的動態效果，讓網頁更加美觀。

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。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“基于JS如何實現web端錄音與播放功能”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!