單純的音樂播放是否過於單調，在聽音樂的同時如果也能看見音樂是否更有感。本課程將帶領你使用webAudio和canvas將你的音樂以你喜歡的形式視覺化出來，讓你的音樂動起來。
課程播放網址：http://www.php.cn/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
控制高度变化：
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核心功能封装为对象
以上是HTML5音樂視覺化影片教學的資源推薦的詳細內容。更多資訊請關注PHP中文網其他相關文章！
