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

Patrick Wied受到一个漂亮的Youtube音频可视化工具的启发，心想，“嗨，为什么我不开发一个自己的音乐可视化程序呢？”

(请使用谷歌浏览器观看演示)

本文里将介绍Patrick Wied开发出这种效果使用的技术。尽管WebGL和Canvas 2D技术看起来都非常的有前途(而且很有趣，本人更喜欢多学一点WebGL知识！)，但对于Patrick Wied想实现的这个功能，使用纯HTML，利用CSS3来实现效果，足够了(将来Patrick Wied有计划将它迁移到其它技术上)。音乐可视化效果

这个试验特别的有趣，对Patrick Wied来说这是他第一次运用学习的数学知识到编程中。尽管涉及到的数学部分很浅显，Patrick Wied还是对能掌握一些东西的工作原理感到非常的兴奋。音乐可视化效果

下面就来讲一讲Patrick Wied是如何实现它的。

可视化的前提是需要获取音频数据。幸运的是，现代浏览器(谷歌浏览器，火狐浏览器等)里的 Web Audio API 对Web音频提供了丰富的操作功能。这里最重要是调用AnalyserNode。AnalyserNode将会给我们提供实时的音频数据，用于可视化显示。关于更详细的音频操作，可以阅读。

下面里看看为获取音频数据做的准备。

首先我们需要在页面上添加一个<audio>标记，并指定音频源为你想要可视化的音乐文件。

<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 yser = ctx.createAnalyser();
  // we have to connect the MediaElementSource with the yser 
  audioSrc.connect(yser);
  // we could configure the yser: e.g. yser.fftSize (for further infos read the spec)

  // frequencyBinCount tells you how many values you'll receive from the yser
  var frequencyData = new Uint8Array(yser.frequencyBinCount);

  // we're ready to receive some data!
  // loop
  function renderFrame() {
     requestAnimationFrame(renderFrame);
     // update data in frequencyData
     yser.getByteFrequencyData(frequencyData);
     // render frame based on values in frequencyData
     // console.log(frequencyData)
  }
  audio.start();
  renderFrame();
};

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