音樂可視化

本文是在慕課網學習了HTML5音樂可視化以後產生的，老師講解的很詳細，建議你先去看一看，我新增了播放控制列表、文件上傳大小限制、重複上傳文件檢測、自動播放下一首，效果圖以下:

在線體驗地址: https://demo.luckyw.cn/code.h...
源碼地址: https://github.com/leoyaojy/d...

Audio API

---

我將要介紹的HTML5 Audio API與Audio標籤是不同的，Audio標籤只是HTML5更語義化的一個表現，而HTML5 Audio API則讓咱們能夠在代碼中直接操做原始的音頻流數據，對其進行任意加工再造，這裏我只涉及到對音頻流的分析，從而實現音樂的可視化
一段音頻在到達揚聲器播放以前，咱們能夠對其進行攔截獲得音頻流數據，本文涉及到的是對音量的控制以及對音頻流數據的分析，這一切都是基於AudioContext對象來的，因此咱們須要建立這個對象，再從這個對象去建立其餘音頻節點。目前僅Chrome和Firefox對其提供了支持，因此咱們僅能在Chrome和Firefox下才能看到效果，爲了能同時在這兩種瀏覽器下工做，咱們須要作下兼容寫法:

window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext;

頁面佈局

---

我採用的是左右兩側佈局，左側播放列表固定寬度300，右側音樂可視化區域自適應寬度，並在左側區域添加了控制面板，能夠添加音樂、暫停、播放、上一首和下一首歌曲的切換，添加音樂實際上是經過一個label標籤的for屬性指向一個type爲file的input文本框，這樣更美觀，指定multiple這樣能夠多選文件進行上傳，並經過綁定input文本框的onchange事件把選擇的音樂文件添加到播放列表中，獲取目前的播放狀態，若是正在播放，則只單單把音樂添加到播放列表，不然並播放第一首音樂

FileReader讀取文件播放

---

建立一個FileReader對象，從保存音樂文件列表files中以ArrayBuffer讀取音頻文件，而後監聽它的onload事件獲取它解析出來的數據result，建立音量控制節點gainNode以及音頻分析節點analyser。AudioContext經過解碼result數據獲得一個buffer數據，而後建立一個bufferSourceNode節點，並設置它的buffer屬性爲解碼以後的buffer，並把它鏈接到音頻分析節點，而後音頻分析節點鏈接到音量控制節點，音量控制節點最後鏈接到AudioContext的destination上，再經過bufferSourceNode的start方法進行播放，音樂可視化的難點就在於理解這裏。最後把這個bufferSourceNode保存到source變量中，設置它的onended事件也即播放結束事件，能夠看下下面的圖理解下:

var fr = new FileReader();
fr.onload = function (e) {
    var result = e.target.result;
    gainNode = ac[ac.createGain ? "createGain" : "createGainNode"]();
    gainNode.connect(ac.destination);
    analyser = ac.createAnalyser();
    analyser.fftSize = size;
    analyser.connect(gainNode);
    ac.decodeAudioData(result, function (buffer) {
        var bs = ac.createBufferSource();
        bs.buffer = buffer;
        bs.connect(analyser);
        bs[bs.start ? "start" : "noteOn"]();
        source = bs;
    }, function (err) {
        console.log(err)
    });
};
fr.readAsArrayBuffer(files[currIndex]);

繪製音頻圖譜

---

咱們須要建立一個長度爲analyser.frequencyBinCount的Uint8Array的數組，而後把實時獲得的音頻數據賦值給它analyser.getByteFrequencyData(arr)，而後調用draw方法繪製到canvas上，大體就是這樣，好好理解以後難度不大