如何为音频播放器创建可视化工具[重复]答案

【问题标题】：How to create a visualizer for audio player [duplicate]如何为音频播放器创建可视化工具[重复]
【发布时间】：2013-10-05 15:56:23
【问题描述】：

有很多音乐播放器，甚至是 HTML5 音频播放器，但我怎样才能给它们添加均衡器呢？均衡器是指：image （OP 链接到音频可视化图片）

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

提前致谢

【问题讨论】：

这不属于这里...请访问此页面：What topics can I ask about here?
为什么不呢？这是一个有效的问题，它帮助我找到了我正在寻找的东西
你的意思不是 均衡器。 均衡器 改变声音。您正在寻找的东西称为 visualizer
图片链接失效

标签： javascript jquery html html5-audio audio-player

【解决方案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 的快速变化（这就是为什么很多网络音频 API 示例无法正常工作的原因）。

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

【讨论】：

这真的很酷。不幸的是，我试图在 chromecast 设备上使用它，目前存在一个错误，其中他们的音频元素无法与分析器一起使用。 code.google.com/p/google-cast-sdk/issues/detail?id=270

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

现在浏览器部分支持它。您可以将 Web Audio API 用于 google chrome 和 new safari，将 Audio Data API 用于 Firefox。

【讨论】：

【解决方案4】：

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

【讨论】：