25

オーディオ ファイルから波形を表示する JavaScript プログラムを作成するにはどうすればよいですか? Web Audio と Canvas を使いたい。

私はこのコードを試しました：

(new window.AudioContext).decodeAudioData(audioFile, function (data) {
   var channel = data.getChannelData(0);
   for (var i = 0; i < channel; i++) {
       canvas.getContext('2d').fillRect(i, 1, 40 - channel[i], 40);
   }
});

しかし、結果は私が望むものとはかけ離れています (つまり、長方形で描画しているため、画像は滑らかではありません)。この画像のように滑らかに見せたい：

波形例

波形の実装方法に関するヒントはありますか?

4

4 に答える 4

45

結局、独自のライブラリーwavesurfer.jsを展開しました。

PCM データから波形を描画し、クリックしてオーディオの領域を探します。

イムグル

于 2012-03-15T09:03:11.400 に答える
9

AudioJeditに興味があるかもしれません。これは、 GitHub でホストされているオープン ソース プロジェクトです。オーディオ ファイルをロードするための小さなサーバー側 node.js スクリプトがありますが、オーディオとのすべてのやり取りはクライアント側 JavaScript で実装されています。これはあなたが探しているものに似ていると思います。

于 2012-03-06T15:19:53.550 に答える
2

(願わくば) 簡単に波形をアプリに統合したい場合は、IRCAM で行っていること、特にこの場合の波形可視化を確認してください。

それはすべてオープンソースであり、モジュール性を目指しています (そして進行中の作業)

ここでデモを見つけることができます
対応するgithug リポジトリ

于 2014-06-23T12:12:17.047 に答える