写在前面
网易云音频可视化特效
很早之前就看到过一个蛮有意思的音频可视化项目vudio.js。
在我看来作者（刚哥）相当厉害，把项目做得挺完整，前端代码结构规范，demo页面设计的可玩性比较高。
至于前几个月我就一直想做网易云音乐那种音频可视化效果，大厂就是不同，UI设计、配色还是比较考究，对于线条，rounded-bar，动效 等等要素的运用让音乐播放时的可视化效果甚好。最近有空, 就抓紧时间在vudio.js 的基础上实现了一下网易云音乐的这个效果，我们暂且称之为 跳舞的圈（因为有个手机游戏叫做跳舞的线，设计得非常精妙），最终效果如下图
加上粒子效果的频谱可视化
简单实现
因为原有项目就很好玩，所以直接叉fork过来增强了第二种圆圈的可视化效果。频谱数据的来源是 AudioContext 相关的AnalyserNode.getByteFrequencyData() 方法，可以获取当前帧音频的频谱数据（也就是这瞬间在不同频率上的振幅）。 可视化思路主要是用canvas的rotate方法，根据柱形的数目去迭代渲染不同旋转角度的柱形，配色、半径R都是可以调整的。
// render 会被requestAnimationFrame 函数多次调用，所以每次都要用 context2d.restore 恢复上一帧 ctx.translate 等操作的影响。
function render() {
const __angle = (Math.PI * 2) / __freqByteData.length;
__that.context2d.clearRect(0, 0, __that.width, __that.height);
__that.context2d.save();
// 先把原点挪到画布中心
__that.context2d.translate(__that.width / 2, __that.height / 2);
// draw circlewave, __freqByteData 是从AnalyserNode.getByteFrequencyData()得到的定长类型数组（typedArray）转换而来的普通数组
__freqByteData.forEach(function(value, index){
__width = 3;
__that.context2d.save();
__that.context2d.rotate(__angle * index);
// 通过在画布中心旋转画布，就可以用简单参数画出柱形。
__that.context2d.fillRect(-__width / 2, circleRadius, __width, value);
__that.context2d.restore();
__that.context2d.fill();
});
// need to restore canvas after translate to canvas center..
__that.context2d.restore();
}
经过以上步骤，基本就可以画出在圆圈上的柱形了，觉得不够直观的可以看下我灵魂画手的示意图（下图，应该说非常直观清晰了，就因为旋转了，所以fillRect的时候每次 x 轴都是0，当然要做半个柱形宽度的offset来保证画在轴心上）。加上 context2d 的shadowBlur 等阴影效果，或者linearGradient 等, 就可以达到较好的视觉效果。
image
两种频谱特效
思考
抛开技术不讲，关于音频，或者说声音类产品的设计，最近也思考了很多。因为用过网易云音乐这类音乐类，还有其他声音类app 例如 “潮汐”。潮汐这款app 更是主打过各类自然音来辅助用户专注、睡眠等行为。虽然人类超过80%的信息来源都是视觉输入，但也有很多体验是听觉、触觉、嗅觉的。比如清早窗外的鸟叫，夏夜的知了虫鸣，以及风穿过树林，海浪拍打礁石的声音。这些自然的声音大多都有节奏感，重复性高，可以称作白噪音。听觉和视觉，甚至嗅觉，触觉都可能通过大脑产生通感。
一段40秒的海浪声，很慢节奏，点播放，闭上眼40秒，想象身处这个环境的感受
通感并不简单是语文上的一个修辞手法，而更是大脑神经元之间的一种化学反应。跟用户的以往经历、审美情绪以及想象力都有关，每个人听到同一段声音的感受是不同的，但恰巧就可以击中某些人的内心。比如我就会想起跟随同学去东极岛的，那个遥远的下午，四点过，看着海浪拍打礁石，那还是华东地区少见的深蓝色海水。阳光铺洒在海面上，吹着海风，我激动地给家里打电话，让爸妈他们听听海浪的声音。没两年，《东极岛》这电影就被韩寒拍了，这还是后来的事情。
所以声音可以有画面感，但是对于一款声音 app 来说要专注于声音的极致体验，而不能让视觉效果抢夺了声音的主场。这一点网易音乐和潮汐都算做得不错。不同风格的音乐搭配不同节奏的可视化效果，可以增强用户的共鸣，例如古风的音乐，最好是搭配慢节奏，柔和的视觉特效。电音则恰恰相反。
最后，声音是一种非常重要的可记录、数字化的资源，和视觉输入不同的是，声音虽然没有画面，但是在大脑中可以反射出画面感。这是人类想象力的神奇之处，声音和画面的刺激对于一个人的想象力发展也有明显的影响。这也是为什么现在讲究婴幼儿早教要听音乐、黑白卡教育等等。小孩从接受声音刺激、进而听音乐，到学会欣赏音乐，这是一条漫长而有意思的路程。
参考
https://developer.mozilla.org/en-US/docs/Web/API/
https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode
网友评论