当前位置: 秋叶网络博客 前端编程 ◊ 使用Html5绘制动感音乐频谱教程

使用Html5绘制动感音乐频谱教程

作者:秋了秋 发表时间:2017年02月07日

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开销是很大的。

简单的事情我们绝不说得复杂,复杂的事情那就不要说吧,具体看代码实现~

查看代码
github地址:https://github.com/mizuiren/Javascript-Animations/blob/master/canvas-music/mp3.html 觉得好的话就打个小星星吧~

0
除非注明,文章均由 秋叶网络博客 发布,欢迎转载。
转载请注明本文地址:http://www.mizuiren.com/473.html
目录: 前端编程 | 标签: h5music | 7844次阅读