成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

純js實現(xiàn)web端錄音與播放功能

lanffy / 2670人閱讀

摘要：純實現(xiàn)端錄音功能，功能并不是特別多，逐步增加中，詳細地址。使用轉(zhuǎn)碼到并播放小文件，大文件使用。其他資源基于阿里云實現(xiàn)簡單的語音識別功能學習與音頻播放實現(xiàn)音頻數(shù)據(jù)收集實現(xiàn)數(shù)據(jù)編碼轉(zhuǎn)化到格式與播放

純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()
// 結(jié)束錄音
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。

其他資源

基于阿里云實現(xiàn)簡單的語音識別功能
web Audio學習與音頻播放
web Audio實現(xiàn)pcm音頻數(shù)據(jù)收集
js實現(xiàn)pcm數(shù)據(jù)編碼
js轉(zhuǎn)化pcm到wav格式與播放

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/103588.html

相關(guān)文章

  • 微信開發(fā)之微信jssdk錄音功能開發(fā)

    項目需求簡單描述 用戶長按錄音，松手后直接結(jié)束錄音，結(jié)束錄音后，用戶可以選擇重新錄音、播放剛才的錄音，上傳錄音（這里的上傳錄音指上傳到自己服務器，上傳步驟是，前端調(diào)用wx.uploadVoice，后臺再到微信服務器下載音頻文件，上傳到自己的服務器）。注意，音頻文件自上傳時間算起在微信服務器的有效期為3天。由于后臺從微信服務器下載的音頻文件是amr格式的，需要后臺先把amr文件轉(zhuǎn)換成MP3，前端用a...

    bingchen 評論0 收藏0

  • 微信開發(fā)之錄音上傳、下載、轉(zhuǎn)碼

    摘要：具體請看我在提問里的回答下載七牛云文件間歇性失敗總結(jié)至此，在微信開發(fā)中關(guān)于錄音這一塊兒的功能，就已經(jīng)介紹完畢。 showImg(https://segmentfault.com/img/remote/1460000013595733?w=454&h=339); 原文是在我自己博客中，小伙伴也可以點閱讀原文進行跳轉(zhuǎn)查看，還有好聽的背景音樂噢~ ????一年的時間里，前前后后都在搞微信開發(fā)...

    余學文 評論0 收藏0

  • HTML用javascrip在瀏覽器上實現(xiàn)語音輸入和語義理解功能（speex壓縮）

    摘要：返回的字串如下我要聽三國演義這本書正在努力搜索中，請稍等我要聽三國演義這本書三國演義通過解析這段，可以得到類型，用于查詢書名，是表示行為是播放。 基于javascript用olamisdk實現(xiàn)web端語音識別語義理解（speex壓縮） 轉(zhuǎn)載請注明原文地址：傳送 olami 開放平臺 sdk 除了支持語音識別功能外，更強大的在于支持語義理解功能，在 Android 平臺和 iOS 平臺都...

    darkbug 評論0 收藏0

  • HTML用javascrip在瀏覽器上實現(xiàn)語音輸入和語義理解功能（speex壓縮）

    摘要：返回的字串如下我要聽三國演義這本書正在努力搜索中，請稍等我要聽三國演義這本書三國演義通過解析這段，可以得到類型，用于查詢書名，是表示行為是播放。 基于javascript用olamisdk實現(xiàn)web端語音識別語義理解（speex壓縮） 轉(zhuǎn)載請注明原文地址：傳送 olami 開放平臺 sdk 除了支持語音識別功能外，更強大的在于支持語義理解功能，在 Android 平臺和 iOS 平臺都...

    沈建明 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<