はあなたのコードをレンダリングするすべてのオープンソースだとモジュール(および進行中の作業)を目的とし
それがために44100個のピクセルをレンダリングしますので、非常に非効率的ですオーディオの各秒。好ましくは、縮小されたデータセットで最大でビューポートの幅をレンダリングする必要があります。
波形をビューポートに収めるために必要なピクセル単位のサンプル範囲は、audioDurationSeconds * samplerate/viewPortWidthPxで計算できます。したがって、1000pxのビューポートと44100で2秒のオーディオファイルをサンプリングすると、ピクセルあたりのサンプル数=(2 * 44100)/ 1000 =〜88になります。 画面上の各ピクセルについて、そのサンプル範囲から最小値と最大値を取る場合は、このデータを使用して波形を描画します。
これを行うアルゴリズムの例ですが、仮想スクロールとズームを可能にするスクロール位置と同様に、ピクセルごとのサンプルを引数として与えることができます。あなたが代わりにlineToを使用する必要があり、それを滑らかにするために、そこにdrawメソッドは、あなたに似ている Drawing zoomable audio waveform timeline in Javascript
:それはあなたのパフォーマンスを微調整することができ、解像度パラメータを含んで、これはどのように多く、それが画素サンプル範囲ごとに取るべきサンプルを示していますこの差は実際には巨大ではありません。キャンバスに幅と高さの属性を設定するのを忘れるかもしれないと思います。 cssでこれを設定すると描画がぼやけますので、属性を設定する必要があります。
let drawWaveform = function(canvas, drawData, width, height) {
let ctx = canvas.getContext('2d');
let drawHeight = height/2;
// clear canvas incase there is already something drawn
ctx.clearRect(0, 0, width, height);
ctx.beginPath();
ctx.moveTo(0, drawHeight);
for(let i = 0; i < width; i++) {
// transform data points to pixel height and move to centre
let minPixel = drawData[i][0] * drawHeigth + drawHeight;
ctx.lineTo(i, minPixel);
}
ctx.lineTo(width, drawHeight);
ctx.moveTo(0, drawHeight);
for(let i = 0; i < width; i++) {
// transform data points to pixel height and move to centre
let maxPixel = drawData[i][1] * drawHeigth + drawHeight;
ctx.lineTo(i, maxPixel);
}
ctx.lineTo(width, drawHeight);
ctx.closePath();
ctx.fill(); // can do ctx.stroke() for an outline of the waveform
}
多分これは出発点です:http://www.storiesinflight.com/jsfft/visualizer/indexhtml – Mika
@Mika、それは遠方のデモベルを鳴らします。 – katspaugh
これはトピックです:http://softwarerecs.stackexchange.com/ – kenorb