用webAudio和canvas實現音頻可視化

前兩天遇到了要顯示音頻波形圖的需求，由於時間緊，就直接用了wavesufer.js，這兩天有空，就研究了一下怎麼用webAudio實現音頻的可視化。

大體流程是對音源進行解析，解析獲得的數據是個頻譜數組，而後使用canvas將數組形象化顯示出來。

隨音樂的播放不斷重複上述過程，就能獲得一個隨着音樂不斷跳動的頻譜動畫，很是酷炫！

廢話很少說，下面上代碼。

1.準備工做

首先獲取各個對象：

var AudioContext = AudioContext || webkitAudioContext;
var audio = document.getElementById("snd");
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

加載音頻源有不少種方式，能夠用file加載本地音樂，能夠用ajax，這裏就簡單點用audio標籤。

2.建立音源和解析器

var atx = new AudioContext();
var source = atx.createMediaElementSource(audio);
var analyser = atx.createAnalyser();

3.鏈接

鏈接的順序爲：音源 ==> 解析器 ==> 最終輸出

source.connect(analyser);
analyser.connect(atx.destination);

直接鏈接音源和最終輸出（好比揚聲器）就能夠播放聲音，中間鏈接各類效果節點能夠實現音頻的各類增益，這裏要實現音頻可視化，就須要一個解析器。

4.可視化

這裏就不得不提到解析器的fftSize屬性，它的值必須是從32到32768範圍內的2的非零冪; 其默認值爲2048。

這個值越大，圖形就越詳細。

analyser.fftSize = 2048;
function draw(){
    var cWidth = canvas.width,
        cHeight = canvas.height,
        // frequencyBinCount的值固定爲fftSize的一半
        audioArray = new Uint8Array(analyser.frequencyBinCount);
    // 解析頻率數據，放入audioArray數組中
    analyser.getByteFrequencyData(audioArray);
    // 填充爲柱狀圖
    ctx.clearRect(0,0,cWidth,cHeight);
    for(var i = 0;i < audioArray.length;i ++){
        ctx.fillRect(i*3,cHeight-audioArray[i],2,cHeight);
    }
    // 刷新
    requestAnimationFrame(draw);
}
draw();
audio.play();

到這裏音頻的可視化就完成了，其實挺簡單的。

ps：上面2到4步的內容最好放到一個按鈕的點擊事件裏，這是因爲谷歌瀏覽器最新的安全策略。

ps2：音頻可視化須要放在http或https服務器上，不用說也是出於瀏覽器安全性考慮...

最後附上MDN關於音頻可視化的一個講解（比我這個好多啦）：

https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API

題外話：

寫完了感受有點兒不對勁，我原本是要實現相似wavesufer默認的那種靜態效果，結果變成隨音樂播放刷新的動態效果，酷炫是酷炫了，但是偏離了本意，有空再補上靜態的。