摘要
音樂幹聽多沒勁，來點可視化效果讓音樂“動”起來！底部源碼分享！
正文
說明
在瀏覽器端 AudioContext 是一個專門用於音頻處理的接口，工作原理是將 AudioContext 創建出來的各種節點相互連接，音頻數據流經這些節點,我們對其控制。
如何播放
先初始化環境。
let AudioContext = window.AudioContext;
let audioContext = new AudioContext();
通過 audioContext 我們可以創建資源節點，資源節點接受音頻數據後，連接至揚聲器完成播放，如下示意圖與代碼。
let audioBufferSourceNode = audioContext.createBufferSource();
audioBufferSourceNode.buffer = 音頻數據AudioBuffer;
audioBufferSourceNode.connect(audioContext.destination);
audioBufferSourceNode.start(0);
AudioBuffer的獲取
流程我們瞭解到了，如何取到 AudioBuffer 呢？一般的做法是通過 FileReader 來讀取到 File 類型，轉爲 ArrayBuffer 類型，最後再轉 AudioBuffer 類型。有沒有更方便的做法呢？當然有了！白嫖啊！我們打印引擎封裝好的 cc.AudioClip 資源,可以清晰的看到 _audio 就是我們想要的 AudioBuffer 類型，完美！
數據處理
好了，萬事俱備，就差如何分析音頻數據了。我們知道現在資源節點是直接連接到揚聲器的，那麼我們只要在兩者之間插入一個分析器就好了！上圖，上代碼！（底部有完整項目的開源地址）
let AudioContext = window.AudioContext;
// audioContext 只相當於一個容器。
let audioContext = new AudioContext();
// 要讓 audioContext 真正豐富起來需要將實際的音樂信息傳遞給它的。
// 也就是將 AudioBuffer 數據傳遞進去。
// 以下就是創建音頻資源節點管理者。
this.audioBufferSourceNode = audioContext.createBufferSource();
// 將 AudioBuffer 傳遞進去。
this.audioBufferSourceNode.buffer = this.music._audio;
// 創建分析器。
this.analyser = audioContext.createAnalyser();
// 精度設置
this.analyser.fftSize = 256;
// 在傳到揚聲器之前，連接到分析器。
this.audioBufferSourceNode.connect(this.analyser);
// 連接到揚聲器。
this.analyser.connect(audioContext.destination);
// 開始播放
this.audioBufferSourceNode.start(0);
如何顯示
分析器已經連接完畢，那麼我們其實想取數據的時候去取一下就行了。
// 建立數據準備接受數據
this.dataArray = new Uint8Array(this.analyser.frequencyBinCount);
// 分析結果存入數組。
this.analyser.getByteFrequencyData(this.dataArray);
// 自定義方法處理數據
this.draw(this.dataArray);
結語
是不是有收穫呢！！！O(∩_∩)O~~
源碼已經開源，你們的Star就是我分享的最大動力！
開源地址：https://github.com/KuoKuo666/CocosCreator-MusicView
