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

Question

<分区>

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 的快速变化(这就是为什么许多网络音频 API 示例无法正常工作的原因)。

我用均衡器创建了一个简单的音乐播放器，你可以看看here . 你必须先搜索一些东西(即使是空行也可以)，然后开始播放音乐—— Canvas 在底部。