也许现在已经晚了,但这仍然可以帮助任何人。
如果你只想可视化频谱,那么这不是什么大问题。
首先,创建你的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的示例无法正常工作的原因)。
我使用均衡器创建了一个简单的音乐播放器,您可以在这里检查它。 您首先需要搜索某些内容(即使是空白行也可以),然后开始播放音乐-画布位于底部。
现在它在浏览器中得到了部分支持。您可以在Google Chrome和新版Safari中使用Web Audio API,在Firefox中使用Audio Data API。
顺便提一下,这里有一些示例代码可以实现可视化均衡器:http://updates.html5rocks.com/2012/02/HTML5-audio-and-the-Web-Audio-API-are-BFFs。