HTML5音樂可視化視頻教程的資源推薦

課程播放地址：http://www.gxlcms.com/course/327.html

該老師講課風格:

教師講課深入淺出，條理清楚，層層剖析，環環相扣，論證嚴密，結構嚴謹，用思維的邏輯力量吸引學生的注意力，用理智控制課堂教學進程。學生通過聽教師的講授，不僅學到知識，也受到思維的訓練，還受到教師嚴謹的治學態度的熏陶和感染

本視頻中較為難點是HTML5音樂可視化了：

音樂的獲取與播放

構建應用的前后端

1，新建媒體數據文件夾，public/media，把音頻數據放入其中
2，搭建頁面CSS框架，/public/stylesheets/index.css
3，讀取頁面內容，views/index.ejs
4，后臺路由控制，routes/index.js，獲取音樂列表并返回給前段

ajax請求服務端音頻數據

在javascripts下新建文件index.js，在views/index.ejs引用創建的文件

<script type="text/javascript" src="/javascripts/index.js"></script>

編輯創建文件，實現點擊效果

<ul id="list">
 <% music.forEach(function(name){ %>
 <li title="<%= name %>"><%= name %></li> #設置title屬性
 <% }) %>
</ul>

解碼并播放音頻

AudioContext

包含各個AudioNode對象以及它們的聯系的對象，即audio上下文對象。一個document中只有一個AudioContext創建：var ac = new window.AudioContext();

屬性：

destination，AudioDestinationNode對象，所有的音頻輸出聚集地，相當于音頻的硬件，所有的AudioNode都直接或間接連接到這里。

currentTime，AudioContext從創建開始到當前的時間（秒）。

方法：

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

createBufferSource()，創建autioBufferSourceNode對象

createAnalyser()，創建AnalyserNode對象

createGain()/createGainNode()，創建GainNode對象

AudioBufferSourceNode

表示內存中的一段音頻資源，其音頻數據存儲在AudioBuffer中（其buffer屬性）
創建：var buffersource = ac.createBufferSource();

屬性：

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

loop，是否循環播放，默認false

onended，可綁定音頻播放完畢時調用的時間處理程序

方法：

start/noteOn(when=ac.currentTime,offset=0,buration=buffer.duration-offset)，開始播放音頻。
when：何時開始播放；
offset：從音頻的第幾秒開始播放；
duration：播放幾秒

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

添加音量控制

GainNode

改變音頻音量的對象，改變通過它的音頻數據所有的sampleframe的信號強度
創建：var gainNode = ac.createGain()/ac.createGainNode();

gain，AudioParam對象，通過改變其value值可以改變音頻信號的強弱，默認的value屬性值為1，通過最小值為0，最大值為1，其value值也可以大于1，小于0

播放bug修復

問題：播放第二首歌時，第一首歌依然在播放，主要原因是每次點擊音樂列表即調用load("/media/"+this.title)，數據解碼并播放：

xhr.onload = function(){
 ac.decodeAudioData(xhr.response, function(buffer){
 var bufferSource = ac.createBufferSource();
 bufferSource.buffer = buffer;
 bufferSource.connect(gainNode);
 bufferSource[bufferSource.start?"start":"noteOn"](0);
 }, function(err){
 console.log(err);
 });
}

解決方法：
對音頻數據賦空值var source = null;，保存上一首歌的解碼數據source = bufferSource;，判斷執行停止播放source && source[source.stop ? "stop" : "noteoff"](0);

音樂數據可視化

AnalyserNode

音頻分析對象，它能實時的分析音頻資源的頻域和時域信息，但不會對音頻流做任何處理
創建：var analyser = ac.createAnalyser();

fftSize，設置FFT（FFT是離散傅里葉變換的快速算法，用于將一個信號變換到頻域）值得大小，用于分析得到頻域，為32 - 2048之間2的整數倍，默認為2048。實時得到的音頻頻域的數據個數為FFTSize的一半

frequencyBinCount，FFT值得一半，即實時得到的音頻頻域的數據個數

getByteFrequencyData(Uint8Array)，復制音頻當前的頻域數據（數量是FrequencyBinCount）到Uint8Array（8位無符號整型類型化數組）中

創建Analyser對象：

var analyser = ac.createAnalyser();
analyser.fftSize = 512;
analyser.connect(gainNode);

連接到分

析對象獲取數據：bufferSource.connect(analyser);

實現可視化功能函數：

function visualizer(){
 var arr = new Uint8Array(analyser.frequencyBinCount);
 analyser.getByteFrequencyData(arr);
 console.log(arr);
}

調用visualizer函數：

利用canvas將音樂數據可視化（柱狀圖）

在views下加入id<div class="right" id="box"></div>

控制高度變化：

var box = $("#box")[0];
var height, width;
var canvas = document.createElement("canvas");
box.appendChild(canvas);
 
function resize(){
 height = box.clientHeight;
 width = box.clientWidth;
 canvas.height = height;
 canvas.width = width;
}
resize(); #調用觸發函數
 
window.onresize = resize;

利用canvas將音樂數據可視化（圓點圖）

應用優化

webAudio API

webAudio核心功能封裝為對象

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com