2

オーディオ バッファの波形データを html5 キャンバスに視覚化しようとしています。

以前buffer.getChannelData(0)は各サンプルの値を取得していました。次に、for ループを使用して各サンプル値をバッファーに描画しました。

現在は機能していますが、問題はサンプルに各ピクセルを使用することです。つまり、1 秒間のオーディオを描画するには 44100px サイズのキャンバスが必要です。

これは描画に使用するコードです：

for (var i = 0; i < data.length; i++) {

ctx.fillStyle = 'black';
ctx.fillRect(i, height / 2, 0.5, (data[i] * height));
        }

そして、ここでコード全体を見ることができます http://jsfiddle.net/ehsanziya/KKNFL/1/

canvas.widthバッファがロードされるたびに、ロードされたバッファサイズに応じてサイズを調整するにはどうすればよいですか?

ありがとう

4

5 に答える 5

3

キャンバスの幅が 500 で、オーディオの長さが 60 秒で、サンプル レートが 44100 kHz であるとします...

必要なことは、キャンバス上の 1 つのピクセルを表すサンプルの数を計算することです。そのために、あなたは基本的に言うvar binSize = ( audioBuffer.duration * 44100 ) / 500;

次に、すべてのサンプルを繰り返し処理し、それらをbinSize長さのセクションにグループ化します。各ビンについて、最大値を見つけて配列にプッシュします。完了すると、キャンバスに描画するために使用できる 500 個の値を持つ配列が作成されます。

于 2013-07-03T18:32:36.350 に答える
1

これを行うためのサンプル ライブラリを作成しました: https://github.com/cwilso/Audio-Buffer-Draw。

于 2013-07-05T15:35:11.450 に答える
0

enhzflep によって書かれた解決策は正しい方法ですが、大きなオーディオ バッファ配列を持つオーディオ ファイルでは、ブラウザのクラッシュを防ぐために、オーディオ配列のバッファ長を反復するときに処理をチャンクする必要があります。setTimeout を使用するのではなく、チャンク プロセスが完了したときに確認できる値に変数を設定します。私がやった方法は次のようなものでした：

 function processChunk(ctx, cwidth, cheight){

    var chsize = 6000;
    var index=0;
    var chComplete;

    function doChunk(){

        var chunk = chsize;

        while(chunk-- && index<data.length){

            var x = (index*cwidth)/data.length;
            var y = ((data[index]*cheight/2)+cheight/2)
            ctx.lineTo(x,y);
            index++;
            chComplete=1;

        }

        chComplete=0;

        if(index < data.length){

            function checkChunk(){
                if(chComplete==0){
                    doChunk()
                    console.log('chunking');
                }else{

                    setTimeout(checkChunk(), 500);  
                }
            }

            checkChunk();
        }


    }

    doChunk();

}
于 2015-04-28T10:07:33.727 に答える