摘要:概述是一個處理音頻的通用模塊比如一個音頻源一個元素一個音頻地址或者一個中間處理模塊一個過濾器如或一個音量控制器如一個既有輸入也有輸出。下面一章就開始介紹音頻流的轉發了。
前言
上一章地址: web音頻流轉發之音頻源
下一張地址:web音頻流轉發之音視頻直播
在這一章我說幾個我們需要用到的音頻處理模塊也就3個吧,包括我們轉發流是需要用到的核心模塊。更多模塊請看MDN,或者看HTML5音頻API Web Audio也有一些中文講解,希望大家多多支持。
AudioNode:是一個處理音頻的通用模塊, 比如一個音頻源 (e.g. 一個 HTML
let audioCtx = new window.AudioContext, //頻率及時間域分析器,聲音可視化就用這個 analyser = audioCtx.createAnalyser(), //音量變更模塊 gainNode = audioCtx.createGain(), //波形控制器模塊 distortion = audioCtx.createWaveShaper(), //低頻濾波器模塊 biquadFilter = audioCtx.createBiquadFilter(), //創建源 source = audioCtx.createMediaStreamSource(stream); //通過connect方法從音頻源連接到AudioNode處理模塊,再連接到輸出設備, //當我們修改前面的模塊時,就會影響到后面AudioNode,以及我們最終聽見的聲音 source.connect(analyser); analyser.connect(distortion); distortion.connect(biquadFilter); biquadFilter.connect(convolver); convolver.connect(gainNode); gainNode.connect(audioCtx.destination);
下面我就分別講解我們需要用的幾個api
createAnalyser下面簡單說一下它的方法和屬性,具體的使用在后面的demo中,說實話這些屬性我也不知道有有什么用,但是我們能通過方法取到我們需要的數據,做音頻可視化。analyser中的數據會根據數據的不同會不停的變換,所有我們需要用requestAnimationFrame函數,反復獲取里面的數據,然后進行繪圖。
let analyser = audioCtx.createAnalyser(); //頻域的FFT大小,默認是2048 analyser.fftSize; //fftSize的一半 analyser.frequencyBinCount; //快速傅立葉變化的最大范圍的雙精度浮點數 analyser.maxDecibels; //最后一個分析幀的平均常數 analyser.smoothingTimeConstant; //將當前頻域數據拷貝進Float32Array數組 analyser.getFloatFrequencyData() //將當前頻域數據拷貝進Uint8Array數組 analyser.getByteFrequencyData() 將當前波形,或者時域數據拷貝進Float32Array數組 analyser.getFloatTimeDomainData() //將當前波形,或者時域數據拷貝進 Uint8Array數組 analyser.getByteTimeDomainData()createGain
這個簡單到極點。。。
let gainNode = audioCtx.createGain(); //修改value的大小,改變輸出大小,默認是1,0表示靜音 gainNode.gain.value = 1createScriptProcessor
緩沖區音頻處理模塊,這個是我們做直播的核心模塊,沒有這個模塊就做不到音頻流的轉發,音頻數據的延遲在除開網絡的影響下,這個模塊也占一部分,當然要看自己的配置。AudioBuffer介紹
/* 第一個參數表示每一幀緩存的數據大小,可以是256, 512, 1024, 2048, 4096, 8192, 16384, 值越小一幀的數據就越小,聲音就越短,onaudioprocess 觸發就越頻繁。 4096的數據大小大概是0.085s,就是說每過0.085s就觸發一次onaudioprocess, 如果我要把這一幀的數據發送到其他地方,那這個延遲最少就是0.085s, 當然還有考慮發送過去的電腦處理能力,一般1024以上的數字,如果有{{BANNED}}需求的256也是可以考慮的 第二,三個參數表示輸入幀,和輸出幀的通道數。這里表示2通道的輸入和輸出,當然我也可以采集1,4,5等通道 */ let recorder = audioCtx.createScriptProcessor(4096, 2, 2); /* 緩存區觸發事件,連接了createScriptProcessor這個AudioNode就需要在onaudioprocess中, 把輸入幀的數據,連接到輸出幀,揚聲器才有聲音 */ recorder.onaudioprocess = function(e){ let inputBuffer = e.inputBuffer, //輸入幀數據,AudioBuffer類型 outputBuffer = e.outputBuffer; //輸出幀數據, AudioBuffer類型 //第一種方式 //將inputBuffer第0個通道的數據,復制到outputBuffer的第0個通道,偏移0個字節 outputBuffer.copyToChannel(inputBuffer.getChannelData(0), 0, 0); //將inputBuffer第1個通道的數據,復制到outputBuffer的第1個通道,偏移0個字節 outputBuffer.copyToChannel(inputBuffer.getChannelData(1), 1, 0); //第二中方式用循環 for (var channel = 0; channel < outputBuffer.numberOfChannels; channel++) { let inputData = inputBuffer.getChannelData(channel), outputData = outputBuffer.getChannelData(channel); for (var sample = 0; sample < inputBuffer.length; sample++) { outputData[sample] = inputData[sample]; } } }舉個栗子
下面我用input=file選擇一個本地音樂舉個栗子,采用哪種音頻看自己喲
結束語
基本上我們要用到的api都介紹完了,我想大家應該知道如何做音頻轉發了吧。下面一章就開始介紹音頻流的轉發了。
HTML5音頻API Web Audio這一篇文章還是可以看看的。
希望大家多多支持,收藏點贊呀
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/88721.html
摘要:前言音頻流轉發之音視頻直播音頻流轉發之能直播為什么不可以看完本系列文章,你就能做一個直播,真正的直播,包括音頻流的轉發,這也是我最近查看發現有相關能實現音頻流的轉發,所有打算分享系列文章供大家交流,如有不對之處請指正。 前言 web音頻流轉發之音視頻直播web音頻流轉發之AudioNodeapp能直播,web為什么不可以?看完本系列文章,你就能做一個直播,真正的直播,包括音頻流的轉發,...
摘要:前言經過前面兩篇文章的講解,大家已經了解了的基本使用方法,下面我們就根據我們了解的做一個直播。因為沒有做回音消除,和破音處理,這樣聽上去會很爽。 前言 經過前面兩篇文章的講解,大家已經了解了audio的基本使用方法,下面我們就根據我們了解的api做一個直播。web音頻流轉發之AudioNode web音頻流轉發之音頻源 原理 視頻直播:采集一幀一幀的視頻,轉換為base64轉發,接收...
閱讀 4150·2021-09-22 15:34
閱讀 2765·2021-09-22 15:29
閱讀 490·2019-08-29 13:52
閱讀 3351·2019-08-29 11:30
閱讀 2259·2019-08-26 10:40
閱讀 833·2019-08-26 10:19
閱讀 2256·2019-08-23 18:16
閱讀 2311·2019-08-23 17:50