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

該老師講課風(fēng)格:

教師講課深入淺出，條理清楚，層層剖析，環(huán)環(huán)相扣，論證嚴(yán)密，結(jié)構(gòu)嚴(yán)謹(jǐn)，用思維的邏輯力量吸引學(xué)生的注意力，用理智控制課堂教學(xué)進(jìn)程。學(xué)生通過(guò)聽(tīng)教師的講授，不僅學(xué)到知識(shí)，也受到思維的訓(xùn)練，還受到教師嚴(yán)謹(jǐn)?shù)闹螌W(xué)態(tài)度的熏陶和感染

本視頻中較為難點(diǎn)是HTML5音樂(lè)可視化了：

音樂(lè)的獲取與播放

構(gòu)建應(yīng)用的前后端

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

ajax請(qǐng)求服務(wù)端音頻數(shù)據(jù)

在javascripts下新建文件index.js，在views/index.ejs引用創(chuàng)建的文件

 script type= text/javascript src= /javascripts/index.js /script 

編輯創(chuàng)建文件，實(shí)現(xiàn)點(diǎn)擊效果

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

解碼并播放音頻

AudioContext

包含各個(gè)AudioNode對(duì)象以及它們的聯(lián)系的對(duì)象，即audio上下文對(duì)象。一個(gè)document中只有一個(gè)AudioContext創(chuàng)建：var ac = new window.AudioContext();

屬性：

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

currentTime，AudioContext從創(chuàng)建開(kāi)始到當(dāng)前的時(shí)間（秒）。

方法：

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

createBufferSource()，創(chuàng)建autioBufferSourceNode對(duì)象

createAnalyser()，創(chuàng)建AnalyserNode對(duì)象

createGain()/createGainNode()，創(chuàng)建GainNode對(duì)象

AudioBufferSourceNode

表示內(nèi)存中的一段音頻資源，其音頻數(shù)據(jù)存儲(chǔ)在AudioBuffer中（其buffer屬性）
創(chuàng)建：var buffersource = ac.createBufferSource();

屬性：

buffer，AudioBuffer對(duì)象，表示要播放的音頻資源數(shù)據(jù)
——子屬性：duration，該音頻資源的時(shí)長(zhǎng)（秒）

loop，是否循環(huán)播放，默認(rèn)false

onended，可綁定音頻播放完畢時(shí)調(diào)用的時(shí)間處理程序

方法：

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

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

添加音量控制

GainNode

改變音頻音量的對(duì)象，改變通過(guò)它的音頻數(shù)據(jù)所有的sampleframe的信號(hào)強(qiáng)度
創(chuàng)建：var gainNode = ac.createGain()/ac.createGainNode();

gain，AudioParam對(duì)象，通過(guò)改變其value值可以改變音頻信號(hào)的強(qiáng)弱，默認(rèn)的value屬性值為1，通過(guò)最小值為0，最大值為1，其value值也可以大于1，小于0

播放bug修復(fù)

問(wèn)題：播放第二首歌時(shí)，第一首歌依然在播放，主要原因是每次點(diǎn)擊音樂(lè)列表即調(diào)用load( /media/ +this.title)，數(shù)據(jù)解碼并播放：

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);}

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

音樂(lè)數(shù)據(jù)可視化

AnalyserNode

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

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

frequencyBinCount，F(xiàn)FT值得一半，即實(shí)時(shí)得到的音頻頻域的數(shù)據(jù)個(gè)數(shù)

getByteFrequencyData(Uint8Array)，復(fù)制音頻當(dāng)前的頻域數(shù)據(jù)（數(shù)量是FrequencyBinCount）到Uint8Array（8位無(wú)符號(hào)整型類型化數(shù)組）中

創(chuàng)建Analyser對(duì)象：

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

連接到分

析對(duì)象獲取數(shù)據(jù)：bufferSource.connect(analyser);

實(shí)現(xiàn)可視化功能函數(shù)：

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

調(diào)用visualizer函數(shù)：

利用canvas將音樂(lè)數(shù)據(jù)可視化（柱狀圖）

在views下加入id 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(); #調(diào)用觸發(fā)函數(shù)window.onresize = resize;

利用canvas將音樂(lè)數(shù)據(jù)可視化（圓點(diǎn)圖）

應(yīng)用優(yōu)化

webAudio API

webAudio核心功能封裝為對(duì)象

以上就是HTML5音樂(lè)可視化視頻教程的資源推薦的詳細(xì)內(nèi)容，其它編程語(yǔ)言

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。