【項目】H5打造可視化音樂播放器

應用核心結構介紹

應用技術棧

• 服務端：Node+Express+ejs

• 前端界面：HTML+CSS(CSS3)+JS

• 音頻操做：webAudio

• 音頻數據可視化：Canvas

項目構建

1. 全局安裝express：npm install -g express-generator

2. 使用ejs模板引擎，新建項目music：express --view=ejs music

3. 進入項目目錄安裝依賴：cd music && npm install

4. 安裝項目變更實時監控工具：npm install -g supervisor

5. 啓動服務並檢查項目是否成功建立：supervisor bin/www && 觀測默認3000端口127.0.0.1:3000

詳析重要API

1. AudioContext對象：可理解爲audio上下文對象，包含AudioNode對象以及它們的聯繫的對象，通常狀況下，一個document中只有一個AudioContext對象，主要用到其兩個屬性四個方法：

• destination屬性：AudioDestinationNode對象，全部音頻輸出彙集地，至關於音頻的硬件，全部AudioNode都直接或間接鏈接到這裏

• currentTime屬性：AudioContext從建立開始到當前的時間（秒）

• decodeAudioData(arrayBuffer,succ(buffer),err)方法：異步解碼包含在arrayBuffer中音頻數據

• createBufferSource()方法：建立AudioBufferSourceNode對象

• createAnalyser()方法：建立AnalyserNode對象

• createGain()/createGainNode()方法：建立GainNode對象

1. AudioBufferSourceNode對象，表示內存中的一段音頻資源，其音頻數據存儲在AudioBuffer的buffer屬性中，其有三個屬性：

• buffer屬性,AudioBuffer對象，表示要播放的音頻資源數據，子屬性：duration,表示該音頻資源的時長

• loop屬性,是否循環播放，默認爲false

• onenload屬性,綁定音頻播放完畢調用的事件處理程序

• start/noteOn(when=ac.currentTime,offset=0;duration=buffer.duration-offset),開始播放音頻

• stop/noteOff(when=ac.currentTime),結束播放音頻

1. GainNode改變音頻音量的對象，會改變經過它的音頻數據全部的sample frame的信號強度，其屬性：

• gain,是AudioParam對象，經過改變其value值，能夠改變音頻信號的信號強弱，最小值爲0，最大值爲1，默認爲1

1. AnalyserNode音頻分析對象，能實時的分析音頻資源的時域和頻域信息，但不對音頻流作任何處理，屬性：

• fftSize：設置FFT值的大小，用於分析獲得頻域，爲32-2048之間2的整數次倍，默認爲2048，實時獲得的音頻數據域的個數爲fftSize的一半

• frequencyBinCount：實時獲得的音頻頻域域的數據個數，爲FFT值的一半

• getByteFrequencyData(Uint8Array)複製音頻當前的頻域數據到Uint8Array中