使用Html5绘制动感音乐频谱教程
作者：秋了秋 发表时间：2017年02月07日
W3C为我们提供了获取Audio数据的各种API，借助这些API我们能获取到每时每帧的动态数据，有了数据我们就可以尽所能发挥想象力创造所有你能想象的东西，给自己来一场视觉盛宴，加上Html5的canvas舞台，完全可以比flash更具有惊艳的效果哦。
柱状
音响
火焰
乒乓球
灯光
第一步：获取音乐数据。使用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开销是很大的。
简单的事情我们绝不说得复杂，复杂的事情那就不要说吧，具体看代码实现~
github地址：https://github.com/mizuiren/Javascript-Animations/blob/master/canvas-music/mp3.html 觉得好的话就打个小星星吧~
14
文章作者： “秋了秋”个人博客，本站鼓励原创。
转载请注明本文地址：http://netblog.cn/blog/473.html