W3C為我們提供了獲取Audio數據的各種API，借助這些API我們能獲取到每時每幀的動態數據，有了數據我們就可以盡所能發揮想象力創造所有你能想象的東西，給自己來一場視覺盛宴，加上Html5的canvas舞臺，完全可以比flash更具有驚艷的效果哦。

您的瀏覽器不支持canvas，請更換高級版的瀏覽器！

柱狀

音響

火焰

乒乓球

燈光

第一步：獲取音樂數據。使用API在音樂播放的時候在音源和揚聲器中間截斷信號并把信號保存下來，再通過代碼連接揚聲器把聲音放出來，這個處理幾乎不花時間，所以不用擔心造成聲音的遲緩。因為計算機的速度快如閃電，不，是閃電不如。

var canvas=document.querySelector("#canvas"),

context = canvas.getContext('2d');

var width=canvas.width,

height=canvas.height;

var audio=document.querySelector("#mp3");

window.AudioContext =window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.msAudioContext;

try {

var audioContext = new window.AudioContext();

} catch (e) {

throw new Error("您的瀏覽器不支持！");

}

var analyser = audioContext.createAnalyser(),

source = audioContext.createMediaElementSource(audio);

source.connect(analyser);//截取音頻信號

analyser.connect(audioContext.destination);//聲音連接到揚聲器

var data = new Uint8Array(analyser.frequencyBinCount);

analyser.getByteFrequencyData(data);//得到音頻能量值

var playerTimeDomainData = new Uint8Array(analyser.fftSize);

analyser.getByteTimeDomainData(playerTimeDomainData);//得到頻譜

通過這段代碼，我們就獲取到了音樂的音頻能量和頻譜1024長度的數組，這兩個數據分別存在data和playerTimeDomainData里面，所以剩下的都是圍繞著兩個數值進行操作。

第二步：繪制動畫。這就靠JavaScript編程“藝術”了，動畫的實現有傳統的Dom操作，也有hml5的Canvas繪圖技術，在這里我用canvas，這樣會比較流暢，因為頻繁操作dom開銷是很大的。

簡單的事情我們絕不說得復雜，復雜的事情那就不要說吧，具體看代碼實現~https://github.com/mizuiren/Javascript-Animations/blob/master/canvas-music/mp3.html 覺得好的話就打個小星星吧~

總結

以上是生活随笔為你收集整理的HTML获取动态音乐,使用Html5绘制动感音乐频谱教程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。