从音频渲染图像

Question

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

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

我想创建这样的东西:

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

该工作了 !;)