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

讓客戶(hù)滿(mǎn)意是我們工作的目標(biāo)，不斷超越客戶(hù)的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛(ài)。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶(hù)，將通過(guò)不懈努力成為客戶(hù)在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名注冊(cè)、虛擬空間、營(yíng)銷(xiāo)軟件、網(wǎng)站建設(shè)、恩陽(yáng)網(wǎng)站維護(hù)、網(wǎng)站推廣。

JS是什么

JS是JavaScript的簡(jiǎn)稱(chēng)，它是一種直譯式的腳本語(yǔ)言，其解釋器被稱(chēng)為JavaScript引擎，是瀏覽器的一部分，主要用于web的開(kāi)發(fā)，可以給網(wǎng)站添加各種各樣的動(dòng)態(tài)效果，讓網(wǎng)頁(yè)更加美觀。

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

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

實(shí)現(xiàn)原理的話(huà)，主要是以下三點(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

基本方法

// 開(kāi)始錄音
recorder.start();
// 暫停錄音
recorder.pause();
// 繼續(xù)錄音
recorder.resume()
// 結(jié)束錄音
recorder.stop();
// 錄音播放
recorder.play();
// 銷(xiāo)毀錄音實(shí)例，釋放資源，fn為回調(diào)函數(shù)，
recorder.destroy(fn);
recorder = null;
下載功能
// 下載pcm文件
recorder.downloadPCM();
// 下載wav文件
recorder.downloadWAV();
// 重命名pcm文件，wav也支持
recorder.downloadPCM('重命名');
獲取錄音時(shí)長(zhǎng)
// 回調(diào)持續(xù)輸出時(shí)長(zhǎng)
recorder.onprocess = function(duration) {
  console.log(duration);
}
// 手動(dòng)獲取錄音時(shí)長(zhǎng)
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。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“基于JS如何實(shí)現(xiàn)web端錄音與播放功能”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司，關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線(xiàn)，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、網(wǎng)站設(shè)計(jì)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。

文章標(biāo)題：基于JS如何實(shí)現(xiàn)web端錄音與播放功能-創(chuàng)新互聯(lián)
網(wǎng)址分享：http://weahome.cn/article/csecjh.html