var canvas = document.getElementById('drawCanvas'), ctx = canvas.getContext('2d')， cwidth = canvas.width, cheight = canvas.height, visualizer = [],　　　　//可视化形状 animationId = null; var random = function(m, n) { return Math.round(Math.random() * (n - m) + m);　　//返回m~n之间的随机数 }; for (var i = 0; i < num; i++) { var x = random(0, cwidth), y = random(0, cheight), color = "rgba(" + random(0, 255) + "," + random(0, 255) + "," + random(0, 255) + ",0)";　　//随机化颜色 visualizer.push({ x: x, y: y, dy: Math.random() + 0.1,　　　//保证dy>0.1 color: color, radius: 30　　//能量球初始化半径 }); } var draw = function() { var array = new Uint8Array(128);　　//创建频率数组 analyser.getByteFrequencyData(array);　　(status === 0) { (var i = array.length - 1; i >= 0; i--) { array[i] = 0; }; (var i = that.visualizer.length - 1; i >= 0; i--) { allBallstoZero = allBallstoZero && (visualizer[i].radius < 1); }; if (allBallstoZero) { cancelAnimationFrame(animationId); 　　; }; }; ctx.clearRect(0, 0, cwidth, cheight); for (var n = 0; n < array.length; n++) { var s = visualizer[n]; s.radius = Math.round(array[n] / 256 * (cwidth > cheight ? cwidth / 25 : cheight / 18));　　gradient = ctx.createRadialGradient(s.x, s.y, 0, s.x, s.y, s.radius);　　//创建能量球的渐变样式 gradient.addColorStop(0, "#fff"); gradient.addColorStop(0.5, "#D2BEC0"); gradient.addColorStop(0.75, s.color.substring(0, s.color.lastIndexOf(",")) + ",0.4)"); gradient.addColorStop(1, s.color); ctx.fillStyle = gradient; ctx.beginPath(); ctx.arc(s.x, s.y, s.radius, 0, Math.PI * 2, true);　　//画一个能量球 ctx.fill(); s.y = s.y - 2 * s.dy;　　((s.y <= 0) && (status != 0)) {　　//到画布顶端的时候重置s.y，随机化s.x s.y = cheight;　　 s.x = random(0, cwidth); } } animationId = requestAnimationFrame(draw);　　//动画 };

音频播完：

source.onended = function() { status = 0;　　//更改播放状态 };

自适应方面，在window的onload和onresize调整canvas尺寸，但重点不在这里。重点是能量球的大小如何跟随画布大小调节，因为动画在进行中，所以最好的方案也是在动画中动态改变，所以上段代码中的cwidth和cheight的赋值应该放在绘图动画中。

var canvas = document.getElementById('drawCanvas'); canvas.width = window.clientWidth 　　　　　　 || document.documentElement.clientWidth || document.body.clientWidth; canvas.height = window.clientHeight || document.documentElement.clientHeight || document.body.clientHeight;

增加点小玩法：鼠标捕捉能量球，鼠标进入能量球内的时候就捕捉到能量球，并要保持移动才能持续抓紧能量球

//鼠标捕捉能量球 canvas.onmousemove = function (e) { if (status != 0) { for (var n = 0; n < visualizer.length; n++) { var s = visualizer[n]; if (Math.sqrt(Math.pow(s.x-e.pageX,2) + Math.pow(s.y-e.pageY,2)) < s.radius) { s.x = e.pageX; s.y = e.pageY; } } } };

最后说说非常重要的代码规范!

上述代码只是为了简化关系突出流程而改写的代码，并不符合代码规范。为了更好地进行编码，我们应该创建一个全局对象，把上述所有相关属性及方法写到其中。全局对象不但可以方便管理，而且在chrome中调试的时候，可以直接在控制台中查看并编辑，调试起来非常方便。按照惯例，对象的属性直接写在构造器里，对象的方法写到原型中方便日后扩展继承。对象内部使用的私有方法还有私有属性以短横线开头，也是从封装的角度考虑的。

这篇文章主要是参考了刘哇勇的博文和代码(下2)，后来查看MDN的时候发现了下1的更通俗简单的版本，都是大力推荐！写文章真不容易，首先是思路重新整理，然后是材料的收集，代码的增减，工作量真心大。写作不易，赶紧点赞哈~

Reference:

1、Visualizations with Web Audio API(官方原版，强力推荐)   https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API

2、开大你的音响，感受HTML5 Audio API带来的视听盛宴