音乐可视化效果_可视化音乐软件_可视化效果音乐播放器(2)

现在我们有了非常不错的音乐和数据。Patrick Wied测试过不少首歌曲，发现 frequencyData 在 [0, 255] ⊂ ℕ 之间的数据才有意义。而且有些地方frequencyData的数据始终是0——删除它们能更好的表现视觉，但很可能丢失了一下音频信息。

这是最有趣的部分。Patrick Wied先实现了一个柱状条样式的效果，每个柱子都表示frequencyData里的一组数据。每个柱子都是用纯HTML实现的，它的高度是使用CSS根据音频数据分析结果即时改变。为了让更加顺滑，Patrick Wied将CSS的transition属性设置为0.1秒。

其实也是很简单，但需要运用更多的技巧。为了让物体按环状对齐，需要使用几何函数(还记得Cos & Sin吧?)

// a full circle
var twoPi = 2*Math.PI;
var objectsCount = 12;
var radius = 100

// you want to align objectsCount objects on the circular path
// with constant distance between neiors
var change = twoPi/objectsCount;
for (var i=0; i < twoPi; i+=change) {
  var x = radius*cos(i);
  var y = radius*sin(i);
  // rotation of object in radians
  var rotation = i;
  // set the CSS properties to calculated values
}

想要实现更奇特的效果？你实际上是可以在这个2D空间里使用任何的弧形，比如，心型，泪滴型等等。但我还是更喜欢传统的视觉效果。

一条回应：用JavaScript和CSS3在HTML里实现音乐可视化效果

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/bofangqi/article-25102-2.html