使用JavaScript和CSS3实现HTML中的音乐可视化

Patrick Wied的灵感来自一个漂亮的Youtube音频可视化工具，并认为: “嘿，为什么我不开发自己的音乐可视化程序？”

（请使用Google Chrome浏览器观看演示）

本文将介绍Patrick Wied用于开发此效果的技术. 尽管WebGL和Canvas 2D技术看起来都非常有前途（并且很有趣，但是我更喜欢学习有关WebGL的知识！），但是对于Patrick Wied想要实现的功能，请使用纯HTML并使用CSS3来实现效果. 足够了（Patrick Wied计划在将来将其转移到其他技术中. ）

这个实验特别有趣. 对于Patrick Wied来说，这是他第一次将所学的数学知识应用于编程. 尽管所涉及的数学是肤浅的，但Patrick Wied对其工作原理感到非常兴奋.

让我们来谈谈Patrick Wied是如何实现的.

可视化的前提是需要获取音频数据. 幸运的是，现代浏览器（Google Chrome，Firefox等）中的Web Audio API提供了丰富的Web音频操作功能. 这里最重要的是调用AnalyserNode. AnalyserNode将为我们提供实时音频数据以进行视觉显示. 有关更详细的音频操作，您可以阅读.

让我们看一下获取音频数据的准备工作.

首先，我们需要在页面上添加

<audio id="myAudio" src="path-to-audio.mp3"></audio>

以下是如何使用AnalyserNode获取数据:

window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext;
  window.onload = function() {
  var ctx = new AudioContext();
  var audio = document.getElementById('myAudio');
  var audioSrc = ctx.createMediaElementSource(audio);
  var analyser = ctx.createAnalyser();
  // we have to connect the MediaElementSource with the analyser 
  audioSrc.connect(analyser);
  // we could configure the analyser: e.g. analyser.fftSize (for further infos read the spec)
  // frequencyBinCount tells you how many values you'll receive from the analyser
  var frequencyData = new Uint8Array(analyser.frequencyBinCount);
  // we're ready to receive some data!
  // loop
  function renderFrame() {
     requestAnimationFrame(renderFrame);
     // update data in frequencyData
     analyser.getByteFrequencyData(frequencyData);
     // render frame based on values in frequencyData
     // console.log(frequencyData)
  }
  audio.start();
  renderFrame();
};

现在，我们拥有非常好的音乐和数据. 帕特里克·韦德（Patrick Wied）测试了许多歌曲，发现频率为[0，255] between之间的数据是有意义的. 在某些地方，frequencyData数据始终为零，可以更好地显示，但是可能会丢失一些音频信息.

这是最有趣的部分. 帕特里克·维德（Patrick Wied）首先实现了柱状条形效果，每个条形代表frequencyData中的一组数据. 每列均以纯HTML格式实现，并且其高度根据音频数据的分析结果使用CSS进行即时更改. 为了使更流畅，Patrick Wied将CSS的过渡属性设置为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空间中使用任何弧形，例如心形，泪滴形等. 但是我仍然喜欢传统的视觉效果.

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