logo标签列表

如何为音频播放器创建可视化效果

javascriptjqueryhtmlhtml5-audioaudio-player
14

有许多音乐播放器，例如HTML5音频播放器，但我如何为它们添加均衡器？通过均衡器，我指的是这个： 图片 (OP链接到音频可视化图像)

你有什么想法如何将其添加到音乐播放器中吗？

提前致谢。

1
这不属于这里... 请访问此页面：我可以在这里提什么样的问题？ - Paritosh
为什么不呢？这是一个合理的问题，它帮助我找到了我想要的东西。 - Arturo
你的意思不是“均衡器”（equalizer）。“均衡器”会改变声音。你要找的是叫做“可视化器”（visualizer）。 - Julian F. Weinert
1
图片链接已失效。 - KANAYO AUGUSTIN UG
4个回答
19

也许现在已经晚了，但这仍然可以帮助任何人。

如果你只想可视化频谱，那么这不是什么大问题。

首先，创建你的AudioContext，然后从中创建分析器。

如果需要，添加过滤器或增益节点，然后将它们依次连接（即一个连接到另一个，再连接到最后）。最后，将音频目标连接起来。

代码示例：


```html Well, maybe it's too late, but still could help anyone.
If you want just visualize spectrum, then it's not big deal.
First of all, create your AudioContext, and then analyzer from it.
Add fillter, or gain node, if you want, and then consequentially connect them (i.e. one to other, and then another to last.). Finally, connect your audio destination.
example of code: ```
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的示例无法正常工作的原因）。

我使用均衡器创建了一个简单的音乐播放器，您可以在这里检查它。 您首先需要搜索某些内容（即使是空白行也可以），然后开始播放音乐-画布位于底部。

这真的很酷。不幸的是，我试图在chromecast设备上使用它，目前有一个已经报告的错误，他们的音频元素无法与分析器一起工作。https://code.google.com/p/google-cast-sdk/issues/detail?id=270 - Evan Layman
7
1

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

0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接