純js實現web端錄音功能，功能并不是特別多，逐步增加中，詳細地址：github。

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。

兼容性

主要是以下幾個方面：

Web Audio Api

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

getUserMedia

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

Typed Arrays

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

歡迎訪問和查看：recorder。

總結

以上所述是小編給大家介紹的基于JS實現web端錄音與播放功能,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！