基于JS實現(xiàn)web端錄音與播放功能
純js實現(xiàn)web端錄音功能，功能并不是特別多，逐步增加中，詳細地址：github。
getUserMedia在非localhost和127的情況下，需要開啟https，由于騰訊云的沒備案，demo就不放了，可以自行獲取代碼并啟動測試。
實現(xiàn)方式
實現(xiàn)原理的話，主要是以下三點，
- 利用webrtc的getUserMedia方法獲取設備音頻輸入，使用audioprocess得到音頻流(pcm流，范圍-1到1)。
- 轉(zhuǎn)碼，利用前端中的ArrayBuffer等二進制操作按采樣位數(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()
// 結束錄音
recorder.stop();
// 錄音播放
recorder.play();
// 銷毀錄音實例，釋放資源，fn為回調(diào)函數(shù)，
recorder.destroy(fn);
recorder = null;
下載功能
// 下載pcm文件
recorder.downloadPCM();
// 下載wav文件
recorder.downloadWAV();
// 重命名pcm文件，wav也支持
recorder.downloadPCM('重命名');
獲取錄音時長
// 回調(diào)持續(xù)輸出時長
recorder.onprocess = function(duration) {
console.log(duration);
}
// 手動獲取錄音時長
console.log(recorder.duration);
默認配置
sampleBits，采樣位數(shù)，默認是16
sampleRate，采樣頻率，瀏覽器默認的，我的chrome是48000
numChannels，聲道數(shù)，默認是1
傳入?yún)?shù)
new Recorder時支持傳入?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嘗試，因為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實現(xiàn)web端錄音與播放功能,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關文章
在FIREBUG里如果一個對象同時擁有l(wèi)ength屬性和splice方法，就會被firebug顯示為數(shù)組的形式2011-11-11
JavaScript的面向?qū)ο?一)...2006-11-11
在將uniapp打包成APP端時,上架到應用市場的時候需要配置隱私彈窗,下面這篇文章主要給大家介紹了關于如何在uniapp中設置隱私政策彈窗的相關資料,需要的朋友可以參考下2023-01-01
ComboBox（下拉列表框）通過url加載調(diào)用遠程數(shù)據(jù)的方法
這篇文章主要介紹了ComboBox（下拉列表框）通過url加載調(diào)用遠程數(shù)據(jù)的方法 ,需要的朋友可以參考下2017-08-08
這篇文章主要給大家介紹了關于JavaScript中this的全面解析及常見實例的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用JavaScript具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-05-05
JS解決回調(diào)地獄為什么需要Promise來優(yōu)化異步編程
這篇文章主要為大家介紹了JS解決回調(diào)地獄為什么需要Promise來優(yōu)化異步編程原理解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-10-10
uniapp跨頁面?zhèn)髦祏ni.$emit和uni.$on的使用及踩坑實戰(zhàn)
使用uni.$emit觸發(fā)事件后,對應的uni.$on就會監(jiān)聽到事件觸發(fā),在回調(diào)中去執(zhí)行相關的邏輯,下面這篇文章主要給大家介紹了關于uniapp跨頁面?zhèn)髦祏ni.$emit和uni.$on的使用及踩坑實戰(zhàn)的相關資料,需要的朋友可以參考下2023-04-04
JS一維數(shù)組轉(zhuǎn)多維數(shù)組樹的方法
這篇文章主要介紹了JS一維數(shù)組轉(zhuǎn)多維數(shù)組樹的方法,文章通過代碼示例給大家講解的非常詳細,?對大家的學習或工作有一定的幫助,需要的朋友可以參考下2024-06-06
webpack file-loader和url-loader的區(qū)別
這篇文章主要介紹了webpack file-loader和url-loader的區(qū)別，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
js為快捷鍵綁定事件，當按這個快捷鍵時就會觸發(fā)事先綁定處理函數(shù)，下面以ctrl+k為例與大家分享下具體的實現(xiàn)代碼2014-09-09