3

Web Audio APIを使用して、再生中のオーディオの視覚化を表示しています。<audio>再生を制御している要素があり、要素MediaElementSourceからノードを作成してWebAudioAPIに接続し<audio>ます。次に、aGainNodeとに接続されAnalyserNodeます。'sはに設定されますAnalyserNodesmoothingTimeConstant0.6。次に、GainNodeがに接続されますAudioContext.destination。

次に、オーディオ処理関数を呼び出しますonAudioProcess()。その関数は、以下を使用して継続的に自分自身を呼び出します。

audioAnimation = requestAnimationFrame(onAudioProcess);

この関数は、オーディオからのAnalyserNodetoを使用してから、（現在入力されている）をループし、要素の2Dコンテキストで各周波数の大きさを描画します。これはすべて正常に機能します。getByteFrequencyDataUint8Array<canvas>

私の問題は、<audio>要素を一時停止すると、onAudioProcess関数がループし続け（それ自体でアニメーションフレームを要求することにより）、CPUサイクルを不必要に消費することです。できますcancelAnimationFrame(audioAnimation)が、最後に描画された周波数がキャンバスに残ります。キャンバスの2Dコンテキストも呼び出すことで解決できますclearRectが、オーディオ処理ループを続行するだけの場合と比べると、非常に奇妙に見えます（これにより、各バーがキャンバスの下部にゆっくりと下がりますsmoothingTimeConstant）。

だから私がやったの<audio>は、アニメーションフレームをキャンセルする前に、が一時停止したときにタイムアウトを設定することでした。これを行うことで、オーディオが再生されていないときにCPUサイクルを節約でき、に描画された周波数バーのスムーズな低下を維持することができました<canvas>。

私の質問：アニメーションフレームをキャンセルするためのタイムアウトを適切に設定できるように、AnalyserNodeの値に基づいて、255の周波数の大きさが0（範囲は0〜255）に達するまでにかかるミリ秒数を正確に計算するにはどうすればよいですか？smoothingTimeConstant？

4

1 に答える 1

2

私が仕様を読んだことに基づいて、あなたはそれを次のように理解すると思います：

var val = 255 
  , smooth = 0.6
  , sampl = 48000
  , i = 0
  , ms;
for ( ; val > 0.001; i++ ){
  val = ( val + val * smooth ) / 2;
}
ms = ( i / sampl * 1000 );

問題は、この種の平均化では、実際にはゼロに到達することは決してないということです。したがって、ループ条件は一種の任意です。その数を小さくすると、予想どおり、の値msが大きくなります。

とにかく、私はここで完全にオフベースになる可能性があります。しかし、実際のChromiumソースコードをざっと見てみると、これがどのように機能するかが確認されているようです。私が最初に私のC++がかなり悪いことを認めるでしょうが。

于 2013-03-21T19:53:23.793 に答える