Question

有许多音乐播放器，甚至是HTML5音频播放器，但我怎样才能为它们添加均衡器？通过均衡器我的意思是：image （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的例子无法正常工作的原因）。

我用均衡器创建了简单的音乐播放器，你可以检查它here。你必须首先搜索一些东西（即使是空行也行），然后开始播放音乐 - 画布位于底部。

Answer 2

Web Audio API 是一个非常有用的javascript工具，以下网站显示了如何使用此API可视化音频的示例：

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

Answer 3

现在它得到浏览器的部分支持。您可以将Web Audio API用于Google Chrome和新的Safari，并使用Audio Data API用于Firefox。

Answer 4

顺便提一下，这里有一些示例代码可以执行视觉均衡器：http://updates.html5rocks.com/2012/02/HTML5-audio-and-the-Web-Audio-API-are-BFFs。

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

4 个答案: