0

オーディオ ファイルの視覚化をレンダリングする可能性はありますか?

おそらく、SoundManager2 / Canvas / HTML5 Audio でしょうか? いくつかのテクニックを知っていますか？

私はこのようなものを作成したい:

代替テキスト

4

5 に答える 5

6

ここにサンプルとチュートリアルのトーンがあります: http://www.html5rocks.com/en/tutorials/#webaudio

今のところ、最後の Chrome と最後の最後の Firefox (Opera ?) で動作します。

デモ: http://www.chromeexperiments.com/tag/audio/

これを行うには、Web サイトのすべての訪問者に対して、オーディオ データにアクセスするためにフラッシュ「プロキシ」を通過する SoundManagerV2.js を確認できますhttp://www.schillmania.com/projects/soundmanager2/demo/api/ (彼らはすでに HTML5 オーディオ エンジンに取り組んでおり、主要なブラウザーが実装したらすぐにリリースする予定です)。

WaveForm、Equalizer、Peak の 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

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

ソースコードをチェックして、オーディオがどのように視覚化されているかを確認してください

于 2010-01-21T21:57:31.507 に答える
0

サンプルを FFT で実行し、特定の周波数範囲内のエネルギーを特定のポイントでのグラフの高さとして表示します。通常は、左側の約 20 Hz から右側のサンプリング レート/2 (サンプリング レートが 40 KHz を超える場合は 20 KHz) までの周波数範囲が必要です。

ただし、JavaScriptでこれを行うことについてはよくわかりません。誤解しないでほしいのですが、JavaScript は FFT を完全に実装できますが、リアルタイムで実行できるかどうかはまったくわかりません。OTOH、ユーザー表示の場合、1 秒あたり約 5 ～ 10 回の更新で十分です。これは、かなり到達しやすいターゲットになる可能性があります。たとえば、200 ミリ秒ごとに更新される 20 ミリ秒のサンプルは、期待するのに中途半端に合理的かもしれませんが、それについていくことができるかどうかは保証できません。

于 2010-01-21T21:39:29.947 に答える
-1

オーディオをバイナリデータとしてフェッチしてMP3（JavaScriptの強みではない）を解凍するか、JavaまたはFlashを使用して必要な情報を抽出する以外は、これはまだ不可能です（可能と思われますが、頭痛の種も多いようです）。私が個人的に引き受けたいと思うよりも）。

しかし、あなたはDaveHumphreyのオーディオ実験に興味があるかもしれません。これにはいくつかのクールな視覚化のものが含まれています。彼はブラウザのソースコードに変更を加えて再コンパイルすることでこれを行っているので、これは明らかに現実的な解決策ではありません。<audio>しかし、これらの実験により、将来、要素に新しい機能が追加される可能性があります。

于 2010-01-21T22:01:11.250 に答える
-1

このためには、フーリエ変換 (FFT を探す) を行う必要がありますが、これは javascript では遅く、現在リアルタイムでは不可能です。

本当にブラウザーでこれを行いたい場合は、java/silverlight で実行することをお勧めします。これは、ブラウザーで最速の数値処理速度を提供するためです。

于 2010-01-21T21:34:30.733 に答える