本文主要介紹webrtc音頻處理(webrtc audio_processing)，下面一起看看webrtc音頻處理(webrtc audio_processing)相關(guān)資訊。
webrtc打開麥克風(fēng)，獲取音頻，并在網(wǎng)頁上顯示音量。
播放樣本音頻#從播放音頻開始。準(zhǔn)備一個現(xiàn)成的音頻文件。
在界面上放一個音頻元素，事先準(zhǔn)備一個音頻文件，將路徑填入src。
音頻id = 樣本-音頻和視頻src = 天知道控制自動播放/音頻音頻音頻有默認風(fēng)格。打開網(wǎng)頁，您可以使用它來播放樣本音頻。
webrtc打開麥克風(fēng)#準(zhǔn)備#音頻、儀表、按鈕等。在#html頁面上。
音頻id = 播放-音頻和視頻控制自動播放/audiovid = 米 div id = 即時 div class = 標(biāo)簽 :/.分區(qū)米高= 0.25 max = 1 價值= 0 /meter div class = 價值與價值/div/div div id = 慢 div class = 標(biāo)簽 第二:/.分區(qū)米高= 0.25 max = 1 價值= 0 /meter div class = 價值與價值/div/div div id = 剪輯 class=;label;clip:/分部米馬克斯= 1 價值= 0 /meter div class = 價值與價值/div/div div button id = startbtn 開始/按鈕buttonbuttonid = stopbtn 禁用停止/按鈕/div div id = 味精 /div來介紹js腳本。
！-使用本地適配器-腳本src = ../js/適配器-latest . js 異步/腳本腳本js/soundmeter . js /script腳本src = js/main.js/script使用本地適配器main.js、主控邏輯soundmeter.js來計算音量。在brtc之前，讓 讓我們看看與音頻相關(guān)的方法和類。
要使用web的音頻api，需要使用audiocontext。
嘗試{ window。音頻上下文=窗口。audio context | | window . webkitaudiocontext；window . audio context = new audio context；} catch(e){ alert( ;不支持網(wǎng)絡(luò)音頻api );}音頻上下文。createscriptproc: 256、512、1024、2048、4096、8192、16384。如果沒有通過，或者參數(shù)為0，則采用當(dāng)前環(huán)境中最合適的緩沖區(qū)大小，該值是2的冪的常數(shù)。它在節(jié)點的整個生命周期中保持不變。該值控制分派audioproc: webkit(版本31)要求在調(diào)用此方法時，一個有效的buffersize。numberofinputchannels值必須是一個整數(shù)，用于指定輸入到節(jié)點的通道數(shù)。默認值為2。最大值32.numberofoutputchannels是一個整數(shù)，用來指定節(jié)點輸出的通道數(shù)。默認值為2，最大值為32。參考: developer . mozilla . org/zh-cn/docs/web/api/base audio text/createscriptwriter。
音頻上下文。onaudiopress #音頻數(shù)據(jù)。
基本用法
var audio ctx = new audio context；var script node = audioctx . createscriptprocessor(4096，1，1)；scriptnode.onastudio process =函數(shù)(事件){/*...*/}此示例使用此監(jiān)視器。但目前已被棄用。
參考: developer . mozilla . org/en-us/docs/web/api/scriptprocessornode/onaudioprocess # browser _ compatibility。
完整的soundmeter.js代碼如下
使用嚴(yán)格的 ；//這個類生成與音頻音量相關(guān)的數(shù)值函數(shù)soundmeter(context){ this。上下文=語境；this.instant = 0.0//實時this.slow = 0.0//第二級this.clip = 0.0this . script = context . createscriptprocessor(2048，1，1)；const that = thisthis . script . onaudioprocess = function(event){ const input = event . input buffer . getchanneldata(0)；//獲取一個長度為2048的數(shù)組let i；設(shè)sum = 0.0設(shè)clip count = 0；for(i = 0；i輸入.長度；i){ sum = input[i]* input[i]；if(math . abs(input[i])0.99){ clip count = 1；} } console . log( ;剪輯計數(shù)和。;，clip count)；that . instant = math . sqrt(sum/input . length)；that . slow = 0.95 * that . slow 0.05 * that . instant；that . clip = clip count/input . length；};} soundmeter . prototype . connectto source = function(stream，callback){ console . log( ;測音儀連接和。;);try { this . mic = this . context . createmediastreamsource(stream)；this . mic . connect(this . script)；this . script . connect(this . context . destination)；if(回調(diào)類型！= = 未定義 ){ callback(null)；} } catch(e){ console . error(e)；if(回調(diào)類型！= = 未定義 ){回調(diào)(e)；} }};soundmeter . prototype . stop = function{ console . log( ;測音器停止 );this . mic . disconnect；this . script . disconnect；};js#獲取頁面元素
使用嚴(yán)格的 ；const instant meter = document . query selector( ;#速度計 );const slow meter = document . query selector( ;#慢節(jié)拍 );const clip meter = document . query selector( ;#剪輯米 );const instant value display = document . query selector( ;#即時。價值與價值。;);const slow value display = document . query selector( ;#慢。價值與價值。;);const clip value display = document . query selector( ;#剪輯。價值與價值。;);const play audio = document . query selector( ;#播放-音頻 );const ms gele 2 = document . query selector( # msg );const startbtn = document . getelementbyid( startbtn );const stop btn = document . getelementbyid( stopbtn );設(shè)meterrefresh = nullconst constraints = window . constraints = { audio:為真，vid:為假}；打開麥克風(fēng)#打開麥克風(fēng)，類似于之前打開攝像頭，使用getusermedia方法。
start btn . onclick = function(e){ start btn . disabled = true；stopbtn.disabled = false嘗試{ window。音頻上下文=窗口。audio context | | window . webkitaudiocontext；window . audio context = new audio context；} catch(e){ alert( ;webaudio api不支持。 );} navigator . media devices . get user media(約束條件)。然后(gotaudiostream)。catch(onerr)；};處理音頻#成功打開麥克風(fēng)后，將處理音頻流。
函數(shù)獲得了音頻流(stream) {stream。inactive = function{ console . log( ;音頻停止 );};window.stream = streamplay audio . src object = stream；console . log( ;對接麥克風(fēng)和音頻；;);const soundmeter = window . soundmeter = new soundmeter(window . audio context)；soundmeter . connectto source(stream，function(e){ if(e){ alert(e)；返回；} meter refresh = setinterval(= { instant meter . value = instant value display . innertext = soundmeter . instant . to fixed(2)；slowmeter.value = slowvaluedisplay . innertext = soundmeter . slow . to fixed(2)；clip meter . value = clip value display . innertext = soundmeter . clip；}, 100);});} function onerr(error){ const error message = ;錯誤導(dǎo)航器。media devices . getuser media : ;錯誤消息 error.namems gele 2 . innertext = error message；console . error(error message)；}創(chuàng)建一個soundmeter，連接到音頻流soundmeter . connectto source(stream，function(e){ })；
設(shè)置定時器setinterval，定期刷新卷數(shù)據(jù)。
停止#停止音頻流。
阻止btn。onclick = function(e){ console . log( ;停止 );startbtn.disabled = falsestopbtn.disabled = truewindow.stream.gettracks。foreach(track = track . stop)；window . soundmeter . stop；clearinterval(meter refresh)；instant meter . value = instant value display . innertext = ; ；slow meter . value = slow value display . innertext = ; ；clip meter . value = clip value display . innertext = ; ；}運行效果#運行效果鏈接
總結(jié)#用getusermedia打開麥克風(fēng)，獲取音頻流。使用audiocontext函數(shù)獲取音量值。
本文鏈接:webrtc音頻音量
標(biāo)簽:
音頻麥克風(fēng)
了解更多webrtc音頻處理(webrtc audio_processing)相關(guān)內(nèi)容請關(guān)注本站點。