获取音频然后将其绘制到画布上

Question

我如何获得html5音频的声音频率，然后将其绘制到画布上？

Answer 1

您可以使用新的Web Audio API来获取FFT处理数据（以及样本数据）。

Web Audio API是一种低级高度优化的API，可直接在浏览器中支持。但是有几点注意事项：

• 处于工作状态（未完成）
• 它还不是widely supported跨浏览器（但在体面的浏览器中）。

摘录下面的第一个链接：

function setupAudioNodes() {

    // setup a javascript node
    javascriptNode = context.createJavaScriptNode(2048, 1, 1);
    // connect to destination, else it isn't called
    javascriptNode.connect(context.destination);

    // setup a analyzer
    analyser = context.createAnalyser();
    analyser.smoothingTimeConstant = 0.3;
    analyser.fftSize = 512;

    // create a buffer source node
    sourceNode = context.createBufferSource();
    sourceNode.connect(analyser);
    analyser.connect(javascriptNode);
}

（请注意，其中一些示例可能是使用webkit前缀调用编写的，因此您可能需要使用Chrome查看它们，但其他浏览器也可以使用Web Audio API。）

频谱分析仪的一些例子：
http://www.smartjava.org/content/exploring-html5-web-audio-visualizing-sound
http://tx81z.blogspot.mx/2012/10/quick-project-d3-html5-web-audio.html
http://www.storiesinflight.com/jsfft/visualizer_webaudio/