0

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

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

我想创建这样的东西：

替代文字

4

5 回答 5

6

您在这里有一些示例和教程：http: //www.html5rocks.com/en/tutorials/#webaudio

目前它在最后一个 Chrome 和最后一个 Firefox (Opera ?) 中工作。

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

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

由您在画布中绘制 3 个不同的音频数据：波形、均衡器和峰值。

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

该工作了 ！;)

于 2012-05-14T18:57:08.600 回答
0

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

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

于 2010-01-21T21:39:29.947 回答
0

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

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

于 2010-01-21T21:57:31.507 回答
-1

为此，您需要进行傅里叶变换（查找 FFT），这在 javascript 中会很慢，并且目前无法实时进行。

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

于 2010-01-21T21:34:30.733 回答
-1

这是不可能的，除非通过将音频作为二进制数据获取并解压缩 MP3（不是 JavaScript 的强项），或者使用Java 或 Flash 来提取您需要的信息位（这似乎是可能的，但也似乎更令人头疼比我个人愿意承担的）。

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

于 2010-01-21T22:01:11.250 回答