摘要：概述是一個處理音頻的通用模塊比如一個音頻源一個元素一個音頻地址或者一個中間處理模塊一個過濾器如或一個音量控制器如一個既有輸入也有輸出。下面一章就開始介紹音頻流的轉(zhuǎn)發(fā)了。

上一章地址： web音頻流轉(zhuǎn)發(fā)之音頻源
下一張地址：web音頻流轉(zhuǎn)發(fā)之音視頻直播
在這一章我說幾個我們需要用到的音頻處理模塊也就3個吧，包括我們轉(zhuǎn)發(fā)流是需要用到的核心模塊。更多模塊請看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(),
    //創(chuàng)建源
    source = audioCtx.createMediaStreamSource(stream);
    //通過connect方法從音頻源連接到AudioNode處理模塊，再連接到輸出設(shè)備，
    //當我們修改前面的模塊時，就會影響到后面AudioNode，以及我們最終聽見的聲音
    source.connect(analyser);
    analyser.connect(distortion);
    distortion.connect(biquadFilter);
    biquadFilter.connect(convolver);
    convolver.connect(gainNode);
    gainNode.connect(audioCtx.destination);

下面我就分別講解我們需要用的幾個api

下面簡單說一下它的方法和屬性，具體的使用在后面的demo中,說實話這些屬性我也不知道有有什么用，但是我們能通過方法取到我們需要的數(shù)據(jù)，做音頻可視化。analyser中的數(shù)據(jù)會根據(jù)數(shù)據(jù)的不同會不停的變換，所有我們需要用requestAnimationFrame函數(shù)，反復(fù)獲取里面的數(shù)據(jù)，然后進行繪圖。

let analyser = audioCtx.createAnalyser();
    //頻域的FFT大小，默認是2048
    analyser.fftSize;
    //fftSize的一半
    analyser.frequencyBinCount;
    //快速傅立葉變化的最大范圍的雙精度浮點數(shù)
    analyser.maxDecibels;
    //最后一個分析幀的平均常數(shù)
    analyser.smoothingTimeConstant;
    //將當前頻域數(shù)據(jù)拷貝進Float32Array數(shù)組
    analyser.getFloatFrequencyData()
    //將當前頻域數(shù)據(jù)拷貝進Uint8Array數(shù)組
    analyser.getByteFrequencyData()
    將當前波形，或者時域數(shù)據(jù)拷貝進Float32Array數(shù)組
    analyser.getFloatTimeDomainData()
    //將當前波形，或者時域數(shù)據(jù)拷貝進 Uint8Array數(shù)組
    analyser.getByteTimeDomainData()

這個簡單到極點。。。

let gainNode = audioCtx.createGain();
//修改value的大小，改變輸出大小，默認是1,0表示靜音
gainNode.gain.value = 1

緩沖區(qū)音頻處理模塊，這個是我們做直播的核心模塊，沒有這個模塊就做不到音頻流的轉(zhuǎn)發(fā)，音頻數(shù)據(jù)的延遲在除開網(wǎng)絡(luò)的影響下，這個模塊也占一部分，當然要看自己的配置。AudioBuffer介紹

/*
    第一個參數(shù)表示每一幀緩存的數(shù)據(jù)大小，可以是256, 512, 1024, 2048, 4096, 8192, 16384,
      值越小一幀的數(shù)據(jù)就越小，聲音就越短，onaudioprocess 觸發(fā)就越頻繁。
      4096的數(shù)據(jù)大小大概是0.085s，就是說每過0.085s就觸發(fā)一次onaudioprocess，
      如果我要把這一幀的數(shù)據(jù)發(fā)送到其他地方，那這個延遲最少就是0.085s，
      當然還有考慮發(fā)送過去的電腦處理能力，一般1024以上的數(shù)字，如果有{{BANNED}}需求的256也是可以考慮的
    第二，三個參數(shù)表示輸入幀，和輸出幀的通道數(shù)。這里表示2通道的輸入和輸出，當然我也可以采集1，4,5等通道
*/
let recorder = audioCtx.createScriptProcessor(4096, 2, 2);
/*
  緩存區(qū)觸發(fā)事件，連接了createScriptProcessor這個AudioNode就需要在onaudioprocess中，
  把輸入幀的數(shù)據(jù)，連接到輸出幀，揚聲器才有聲音
*/
recorder.onaudioprocess = function(e){
    let inputBuffer = e.inputBuffer, //輸入幀數(shù)據(jù)，AudioBuffer類型
        outputBuffer = e.outputBuffer; //輸出幀數(shù)據(jù)， AudioBuffer類型
     //第一種方式
     //將inputBuffer第0個通道的數(shù)據(jù)，復(fù)制到outputBuffer的第0個通道，偏移0個字節(jié)
     outputBuffer.copyToChannel(inputBuffer.getChannelData(0), 0, 0);
     //將inputBuffer第1個通道的數(shù)據(jù)，復(fù)制到outputBuffer的第1個通道，偏移0個字節(jié)
     outputBuffer.copyToChannel(inputBuffer.getChannelData(1), 1, 0);
     //第二中方式用循環(huán)
     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都介紹完了，我想大家應(yīng)該知道如何做音頻轉(zhuǎn)發(fā)了吧。下面一章就開始介紹音頻流的轉(zhuǎn)發(fā)了。
HTML5音頻API Web Audio這一篇文章還是可以看看的。
希望大家多多支持，收藏點贊呀