从音频呈现图像

问题描述:

是否有可能呈现音频文件的可视化?从音频呈现图像

也许与SoundManager2 /帆布/ HTML5音频? 你知道一些工艺吗?

我想创造这样的事情:

alt text

+0

我很欣赏你的“something” - “sth”的新缩写。被过度使用。 – iandisme 2010-01-21 21:19:26

这是不可能的,除了还通过提取音频作为二进制数据和拆包的MP3(不是JavaScript的长处) ,或也许通过使用Java或Flash来提取您需要的信息位(这似乎是可能的,但它也似乎比我个人想要承担的更头痛)。

但您可能对Dave Humphrey's audio experiments感兴趣,其中包括一些很酷的可视化工具。他通过修改浏览器源代码并重新编译来做到这一点,所以这显然不适合您。但是这些实验可能会导致未来将新功能添加到<audio>元素中。

+0

更新:webAudio,mozAudio和像JS-Mad这样的项目让这种情况发生......甚至在无法支持它的浏览器中。事实上,一些疯狂的polyfilling jsMad可以解码像IE这样的超大型浏览器中的音频 – ShrekOverflow 2013-01-11 17:05:56

为此,您需要做的傅立叶变换(寻找FFT),这将是目前在实时在JavaScript慢,不可能。

如果你真的想在浏览器中这样做,我会建议用java/silverlight来做,因为它们可以在浏览器中提供最快的数字运算速度。

通过FFT运行样本,然后将给定频率范围内的能量显示为给定点处图形的高度。您通常希望频率范围从左边的20 Hz左右到大约右边的采样率/ 2(如果采样率超过40 KHz,则为20 KHz)。

虽然我不太确定如何在JavaScript中这样做。不要误解我的意思:JavaScript完全可以实现FFT - 但我并不十分确定要实时做到这一点。 OTOH,用户查看,每秒可以获得5-10次更新,这可能是一个相当容易达到的目标。例如,每200毫秒更新一次样本20毫秒可能是期望值的一半,但我当然不能保证您能够跟上这一点。

http://ajaxian.com/archives/amazing-audio-sampling-in-javascript-with-firefox

退房的源代码,看看他们是如何可视化音频

你有样本和教程的口吻在这里:(?歌剧)http://www.html5rocks.com/en/tutorials/#webaudio

它在过去的Chrome和最后的最后Firefox浏览器的时刻。

演示:http://www.chromeexperiments.com/tag/audio/

要做到这一点,现在,对于一个网站的所有访问者,您可以检查谁穿过闪光“代理” SoundManagerV2.js进入音频数据http://www.schillmania.com/projects/soundmanager2/demo/api/(他们已经在HTML5工作音频引擎,只要专业浏览器实现它就可以发布它)

由您决定在画布中绘制3种不同的音频数据:WaveForm,均衡器和峰值。

soundManager.defaultOptions.whileplaying = function() { // AUDIO analyzer !!! 
    $document.trigger({ // DISPATCH ALL DATA RELATIVE TO AUDIO STREAM // AUDIO ANALYZER 
     type    : 'musicLoader:whileplaying', 
     sound   : { 
      position   : this.position,   // In milliseconds 
      duration   : this.duration, 
      waveformDataLeft : this.waveformData.left, // Array of 256 floating-point (three decimal place) values from -1 to 1 
      waveformDataRight: this.waveformData.right, 
      eqDataLeft  : this.eqData.left,  // Containing two arrays of 256 floating-point (three decimal place) values from 0 to 1 
      eqDataRight  : this.eqData.right,  // ... , the result of an FFT on the waveform data. Can be used to draw a spectrum (frequency range) 
      peakDataLeft  : this.peakData.left,  // Floating-point values ranging from 0 to 1, indicating "peak" (volume) level 
      peakDataRight : this.peakData.right 
     } 
    }); 
}; 

有了HTML5,你可以得到:

var freqByteData = new Uint8Array(analyser.frequencyBinCount); 
var timeByteData = new Uint8Array(analyser.frequencyBinCount); 
function onaudioprocess() { 
    analyser.getByteFrequencyData(freqByteData); 
    analyser.getByteTimeDomainData(timeByteData); 
    /* draw your canvas */ 
} 

上班时间! ;)