2

こんにちは、私は現在、純粋な HTML5 w/Javascript で書かれたオーディオ波形エディターに取り組んでいます。

Mozilla<audio>の.MozAudioAvailable イベントを使用して、各フレームのデータを取得し、キャンバスに描画することで、ある程度の進歩を遂げました。ただし、MozAudioAvailable では、現在再生中のフレームしか取得できません。

波形エディタとして、私のプログラムは、現在再生中の約数秒前にデータを検索して前処理する必要があります。つまり、00:05:00 を再生するとき、私のプログラムはおそらく 00:04:50 から 00:05 までの波形を表示する必要があります。 :10 なので、再生する前に 00:05:00 から 00:05:10 までのデータを前処理する必要があります。

解決策を得るためにインターネットを検索しました (Mozilla のアプローチに限定されず、Chrome または Opera のアプローチも受け入れられます) が、回答がありませんでした。preload プロパティと onprogress イベントは役に立ちません。<audio>現在、元の音楽と同じ音楽を再生する別のタグを作成しようとしていますが、事前にデータを取得するために数秒速くなります。ただし、ご覧のとおり、ソリューションはかなり汚いです。

HTML5 グループがマルチメディア オブジェクトを処理するためのより柔軟な方法に取り組んでいるのか、それともブラウザ開発チームがこれに取り組んでいるのか疑問に思っています。このトピックに関するアイデアや経験があれば、教えてください。どうも。

アップデート：

多分私は私の質問を明確に説明していません。以下は、私のターゲットを示す可能性のある Audacity から取得した写真です。

Audacity のスクリーンショット

約 1:55.10 の縦線は、現在再生中のフレームを示します。行の左側のフレームについては、プログラムによって保存された履歴フレームを使用できます。しかし、まだ再生されていない行の右側のフレームについては、再生される前に取得できません。

醜い解決策は<audio>、元のタグよりも速く再生される別のタグを追加することです (スクリーンショットでは 1:55.90 で再生されるはずです)。これにより、垂直線の右側にフレームを取得できます。しかし、それは醜く、実装するのは簡単ではありませんよね?

4

1 に答える 1

3

https://wiki.mozilla.org/Audio_Data_APIから

探しているデータは、リスナー関数に渡されるイベントオブジェクトのframebufferプロパティにあります

履歴データの特定のセクションにアクセスするには、以前のフレームバッファキャプチャをキャッシュするだけです。

var channels,
    rate,
    frameBufferLength,
    samples;

function audioInfo() {
  var audio = document.getElementById('audio');

  // After loadedmetadata event, following media element attributes are known:
  channels          = audio.mozChannels;
  rate              = audio.mozSampleRate;
  frameBufferLength = audio.mozFrameBufferLength;
}

function audioAvailable(event) {
  var samples = event.frameBuffer;
  var time    = event.time;

  for (var i = 0; i < frameBufferLength; i++) {
    // Do something with the audio data as it is played.
    processSample(samples[i], channels, rate);
  }
}

補遺：

さて、あなたは将来を見据えるためにあなたのプログラムが必要です。私の知る限り、これはある種の巧妙なプリロードソリューションを使用できない限り実行できません（これも機能しないと思われますが、おそらくmozメーリングリストへのサブスクリプションにより、将来の機能としてこれをリクエストできる可能性があります）。

何をしようとしているのかまだ正確にはわかりませんが、サーバー上のオーディオファイルから自分でリッピングしたRAWオーディオデータを使用して、再生中に描画された波形の背景を使用し、オシロスコープを描画するHTML5プレーヤーがあります--oggをサポートするすべてのブラウザで動作させたいのでmozillaAPIを使用しないので、別のデータブロブをまとめてロードします。これはもちろん、a）純粋なHTML5やJavascriptではなく、b）プレーヤーがサーバーから発信されたファイルのみを再生することを意味します。いずれにせよ、ステージは次のとおりです。

1）コマンドラインユーティリティ（私はsoxをお勧めします）を使用してRAWデータを抽出します-比較的小さいが十分に高い解像度（1kb /秒）であるモノラルの8ビット1khzPCMにダウンミックスします。それを保持したい場合（非Mozillaブラウザーでの再生中にオシロスコープを描画するため）、それをblobとしてデータベースにキャッシュします。

2）RAW PCMを使用して、php_gdを使用してwaveのPNGを描画し、それをキャッシュします（プレーヤーの背景用）

3）RAWデータを使用する場合は、base64でエンコードされた文字列としてjavascriptに読み込むことができます

サーバーを単にプロキシとして使用してRAWデータを抽出する場合は、外部オーディオファイルでもこれを行うことは不可能ではありませんが、その場合は、発生するセキュリティの問題に注意する必要があります。

これが当てはまる場合は、お知らせください。これらのソースコードを投稿します。問題のプログラムは、少し整理したらすぐにhttp://jukenix.orgでオープンソースプロジェクトとしてリリースされます。

この動作のPSスクリーンショットは上のリンクのページの下部にあります

于 2012-05-27T11:32:29.213 に答える