这个问题在这里已有答案:
有许多音乐播放器,甚至HTML5音频播放器,但我怎样才能为它们添加均衡器?通过均衡器我的意思是:image(OP链接到音频可视化的图片)
知道如何将它添加到音乐播放器吗?
提前致谢
Web Audio API是一个非常有用的javascript工具,以下网站显示了如何使用此API可视化音频的示例:
好吧,也许已经太晚了,但仍然可以帮助任何人。
如果你想只想象光谱,那么这不是什么大不了的事。
首先,创建您的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的快速变化(这就是很多web音频API的例子不能正常工作的原因)。
我用均衡器创建了简单的音乐播放器,你可以检查它here。你必须首先搜索一些东西(即使是空白行也行),然后开始播放音乐 - 画布位于底部。
现在它部分受浏览器支持。你可以使用Web Audio API用于谷歌浏览器和新的safari和Audio Data API用于Firefox。
顺便提一下,这里有一些示例代码可以实现视觉均衡器:http://updates.html5rocks.com/2012/02/HTML5-audio-and-the-Web-Audio-API-are-BFFs。