如何为音频播放器创建可视化工具

Question

有许多音乐播放器,甚至HTML5音频播放器,但我怎样才能为它们添加均衡器？均衡器我的意思是:图像 (OP链接到音频可视化图片)

知道如何将它添加到音乐播放器吗？

提前致谢

Answer 1

好吧,也许已经太晚了,但仍然可以帮助任何人.

如果你想只想象光谱,那么这不是什么大不了的事.

首先,创建您的AudioContext,然后从中创建分析器.

如果需要,添加填充器或增益节点,然后相应地连接它们(即一个连接到另一个,然后另一个连续到最后.).最后,连接您的音频目的地.

代码示例:

var canvas = document.querySelector('canvas'),
    ctx = canvas.getContext('2d');



// here we create our chain
var audio = document.querySelector('audio'),
    audioContext = new AudioContext(),
    source = audioContext.createMediaElementSource(audio),
    analyser = audioContext.createAnalyser();

source.connect(analyser);
analyser.connect(audioContext.destination);

setInterval(function(){
  var freqData = new Uint8Array(analyser.frequencyBinCount);

      analyser.getByteFrequencyData(freqData);

      ctx.clearRect(0, 0, width, height);

      for (var i = 0; i < freqData.length; i++ ) {
        var magnitude = freqData[i];
        ctx.fillRect(i*1.5, height, 1, -magnitude * 2);
      }
 }, 33);

像这样的东西.虽然你应该知道这个API的快速变化(这就是很多web音频API的例子不能正常工作的原因).

我用均衡器创建了简单的音乐播放器,你可以在这里查看.你必须首先搜索一些东西(即使是空白行也行),然后开始播放音乐 - 画布位于底部.

Answer 2

该网络音频API是一个非常有用的JavaScript工具和下面的网站给出了如何使用可视化这个API音频的例子:

http://css.dzone.com/articles/exploring-html5-web-audio