欧美成人午夜免费全部完,亚洲午夜福利精品久久,а√最新版在线天堂,另类亚洲综合区图片小说区,亚洲欧美日韩精品色xxx

扣丁學堂HTML5培訓詳解HTML5錄音如何操作

2018-06-13 11:16:26 1370瀏覽

不知道有多少的小伙伴接觸過HTML5的 Audio API,本篇文章扣丁學堂HTML5培訓小編就和大家分享一下HTML5錄音方面的問題,文章中會有代碼列出,對HTML5開發(fā)感興趣的小伙伴就隨著小編一起來了解一下吧。



扣丁學堂HTML5培訓詳解HTML5錄音如何操作



開始錄音前,要先獲取當前設備是否支持 Audio API。早期的方法 navigator.getUserMedia 已經(jīng)被 navigator.mediaDevices.getUserMedia 所代替。正常來說現(xiàn)在大部分的現(xiàn)代瀏覽器都已經(jīng)支持 navigator.mediaDevices.getUserMedia 的用法了,當然 MDN 上也給出了兼容性的寫法。


const promisifiedOldGUM = function(constraints) {
 // First get ahold of getUserMedia, if present
 const getUserMedia =
 navigator.getUserMedia ||
 navigator.webkitGetUserMedia ||
 navigator.mozGetUserMedia;
 
 // Some browsers just don't implement it - return a rejected promise with an error
 // to keep a consistent interface
 if (!getUserMedia) {
 return Promise.reject(
 new Error('getUserMedia is not implemented in this browser')
 );
 }
 
 // Otherwise, wrap the call to the old navigator.getUserMedia with a Promise
 return new Promise(function(resolve, reject) {
 getUserMedia.call(navigator, constraints, resolve, reject);
 });
};
 
// Older browsers might not implement mediaDevices at all, so we set an empty object first
if (navigator.mediaDevices === undefined) {
 navigator.mediaDevices = {};
}
 
// Some browsers partially implement mediaDevices. We can't just assign an object
// with getUserMedia as it would overwrite existing properties.
// Here, we will just add the getUserMedia property if it's missing.
if (navigator.mediaDevices.getUserMedia === undefined) {
 navigator.mediaDevices.getUserMedia = promisifiedOldGUM;
}


因為這個方法是異步的,所以我們可以對無法兼容的設備進行友好的提示


navigator.mediaDevices.getUserMedia(constraints).then(
 function(mediaStream) {
 // 成功
 },
 function(error) {
 // 失敗
 const { name } = error;
 let errorMessage;
 switch (name) {
 // 用戶拒絕
 case 'NotAllowedError':
 case 'PermissionDeniedError':
 errorMessage = '用戶已禁止網(wǎng)頁調用錄音設備';
 break;
 // 沒接入錄音設備
 case 'NotFoundError':
 case 'DevicesNotFoundError':
 errorMessage = '錄音設備未找到';
 break;
 // 其它錯誤
 case 'NotSupportedError':
 errorMessage = '不支持錄音功能';
 break;
 default:
 errorMessage = '錄音調用錯誤';
 window.console.log(error);
 }
 return errorMessage;
 }
);


一切順利的話,我們就可以進入下一步了。

(這里有對獲取上下文的方法進行了省略,因為這不是這次的重點)



開始錄音、暫停錄音


這里有個比較特別的點,就是需要添加一個中間變量來標識是否當前是否在錄音。因為在火狐瀏覽器上,我們發(fā)現(xiàn)一個問題,錄音的流程都是正常的,但是點擊暫停時卻發(fā)現(xiàn)怎么也暫停不了,我們當時是使用 disconnect 方法。這種方式是不行的,這種方法是需要斷開所有的連接才可以。后來發(fā)現(xiàn),應該增加一個中間變量 this.isRecording 來判斷當前是否正在錄音,當點擊開始時,將其設置為 true ,暫停時將其設置為 false 。


當我們開始錄音時,會有一個錄音監(jiān)聽的事件 onaudioprocess ,如果返回 true 則會將流寫入,如果返回 false 則不會將其寫入。因此判斷 this.isRecording ,如果為 false 則直接 return


// 一些初始化
const audioContext = new AudioContext();
const sourceNode = audioContext.createMediaStreamSource(mediaStream);
const scriptNode = audioContext.createScriptProcessor(
 BUFFER_SIZE,
 INPUT_CHANNELS_NUM,
 OUPUT_CHANNELS_NUM
);
sourceNode.connect(this.scriptNode);
scriptNode.connect(this.audioContext.destination);
// 監(jiān)聽錄音的過程
scriptNode.onaudioprocess = event => {
 if (!this.isRecording) return; // 判斷是否正則錄音
 this.buffers.push(event.inputBuffer.getChannelData(0)); // 獲取當前頻道的數(shù)據(jù),并寫入數(shù)組
};


當然這里也會有個坑,就是無法再使用,自帶獲取當前錄音時長的方法了,因為實際上并不是真正的暫停,而是沒有將流寫入罷了。于是我們還需要獲取一下當前錄音的時長,需要通過一個公式進行獲取


const getDuration = () => {
    return (4096 * this.buffers.length) / this.audioContext.sampleRate // 4096為一個流的長度,sampleRate 為采樣率
}


這樣就能夠獲取正確的錄音時長了。



結束錄音


結束錄音的方式,我采用的是先暫停,之后需要試聽或者其它的操作先執(zhí)行,然后再將存儲流的數(shù)組長度置為 0。



獲取頻率


getVoiceSize = analyser => {
 const dataArray = new Uint8Array(analyser.frequencyBinCount);
 analyser.getByteFrequencyData(dataArray);
 const data = dataArray.slice(100, 1000);
 const sum = data.reduce((a, b) => a + b);
 return sum;
};


以上就是扣丁學堂HTML5在線學習小編給大家分享的HTML5錄音方面的問題,希望對小伙伴們有所幫助。想要了解更多內容的小伙伴可以登錄扣丁學堂官網(wǎng)咨詢,扣丁學堂是專業(yè)的HTML5培訓機構,不僅有專業(yè)的老師和與時俱進的課程體系,還有大量的HTML5在線教程供學員觀看學習,想要學習HTML5開發(fā)的小伙伴快快行動吧。扣丁學堂H5技術交流群:559883758。


關注微信公眾號獲取更多學習資料

【關注微信公眾號獲取更多學習資料】



查看更多關于“HTML5開發(fā)技術資訊”的相關文章>>


標簽: 扣丁學堂HTML5培訓 詳解HTML5錄音如何操作 HTML5培訓 HTML5視頻教程 HTML5在線課程 HTML5在線學習 HTML5在線視頻 HTML5從入門到精通 html5基礎教程

熱門專區(qū)

暫無熱門資訊

課程推薦

微信
微博
15311698296

全國免費咨詢熱線

郵箱:codingke@1000phone.com

官方群:148715490

北京千鋒互聯(lián)科技有限公司版權所有   北京市海淀區(qū)寶盛北里西區(qū)28號中關村智誠科創(chuàng)大廈4層
京ICP備2021002079號-2   Copyright ? 2017 - 2022
返回頂部 返回頂部