Question

是否有可能呈现音频文件的可视化效果？

也许使用SoundManager2 / Canvas / HTML5音频？你知道一些技术吗？

我想创建这样的东西：

alt text

Answer 1

您可以在此处获得示例和教程：http://www.html5rocks.com/en/tutorials/#webaudio

目前它适用于最后一个Chrome和最后一个Firefox（Opera？）。

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

现在，对于网站的所有访问者，您可以检查通过闪存“代理”的SoundManagerV2.js来访问音频数据http://www.schillmania.com/projects/soundmanager2/demo/api/（他们已经在HTML5音频引擎上工作，到一旦专业浏览器实现它就会发布它）

最多可以在画布中绘制3种不同的音频数据：WaveForm，Equalizer和Peak。

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 */
}

上班时间！ ;）

Answer 2

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

我不太确定在JavaScript中这样做。不要误会我的意思：JavaScript完全有能力实现FFT - 但我不能确定实时做到这一点。 OTOH，对于用户查看，您可以获得每秒大约5-10次更新，这可能是一个相当容易达到的目标。例如，每200毫秒更新20毫秒的样本可能是希望的一半，但我当然不能保证你能够跟上它。

Answer 3

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

查看源代码以了解它们如何可视化音频

Answer 4

为此你需要进行傅立叶变换（寻找FFT），这在javascript中会很慢，而且目前还不能实时实现。

如果您真的想在浏览器中执行此操作，我建议您在java / silverlight中执行此操作，因为它们在浏览器中提供了最快的数字运算速度。

Answer 5

除了将音频作为二进制数据取出并解压缩MP3（不是JavaScript的强项）或可能，使用Java或Flash提取所需的信息时，这是不可能的（这似乎有可能，但它似乎比我个人想要承担的更令人头疼。）

但您可能对Dave Humphrey's audio experiments感兴趣，其中包括一些很酷的可视化内容。他通过修改浏览器源代码并重新编译它来做到这一点，所以这对你来说显然不是一个现实的解决方案。但是这些实验可能会导致将来在<audio>元素中添加新功能。

从音频渲染图像

5 个答案: