jQuery 如何为音频播放器创建可视化工具
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19199670/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create a visualizer for audio player
提问by Alex
There are many music players, like even HTML5 audio player, but how can I add an equalizer to them? By equalizer I mean this: image(OP link to a picture of audio visualization)
有很多音乐播放器，甚至像 HTML5 音频播放器，但我如何为它们添加均衡器？均衡器我的意思是：图像（OP链接到音频可视化图片）
Any idea how to add it to a music player?
知道如何将它添加到音乐播放器吗？
Thanks in advance
提前致谢
采纳答案by Dylan Kay
The Web Audio APIis a very useful javascript tool and the following website shows an example of how to visualize audio with this API:
该网络音频API是一个非常有用的JavaScript工具以及如何与可视化这个API音频以下网站给出了一个例子：
回答by Bloomca
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.
首先，创建您的 AudioContext，然后从中分析。
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);
Something like this one. Though you should aware of rapid changes in this API (this is why a lot of example of web audio API don't work properly).
像这样的东西。虽然你应该意识到这个 API 的快速变化（这就是为什么很多 web 音频 API 的例子不能正常工作）。
I created simple music player with equalizer, you can check it here. You have to search something first (even blank line is ok) and then start music – canvas is at the bottom.
我用均衡器创建了简单的音乐播放器，你可以在这里查看。你必须先搜索一些东西（即使是空行也可以）然后开始音乐——画布在底部。
回答by Alexandr Subbotin
Now it is partly supported by browsers. You can use Web Audio APIfor google chrome and new safari and Audio Data APIfor Firefox.
现在浏览器部分支持它。您可以为 google chrome使用Web Audio API，为 Firefox使用新的 safari 和Audio Data API。
回答by cwilso
Incidentally, here's some sample code that does a visual equalizer: http://updates.html5rocks.com/2012/02/HTML5-audio-and-the-Web-Audio-API-are-BFFs.
顺便说一下，这里有一些执行视觉均衡器的示例代码：http: //updates.html5rocks.com/2012/02/HTML5-audio-and-the-Web-Audio-API-are-BFFs。
