別のチームによってプログラムされたフラッシュ プレーヤーがあります。現在、そのプレーヤーを HTML5 に再プログラムする必要があるプロジェクトが 1 つあります。フラッシュ プレーヤーのすべての機能が実行可能に見えます。オーディオの再生中にアニメーションを表示する方法がわかりません。例えば。ビートが高くなると、アニメーションの表示が少なくなり、少し無音になるとアニメーションの表示が増えます。誰でも私を助けてもらえますか?
アイデアを得るために、添付のスクリーンショットを次に示します。
別のチームによってプログラムされたフラッシュ プレーヤーがあります。現在、そのプレーヤーを HTML5 に再プログラムする必要があるプロジェクトが 1 つあります。フラッシュ プレーヤーのすべての機能が実行可能に見えます。オーディオの再生中にアニメーションを表示する方法がわかりません。例えば。ビートが高くなると、アニメーションの表示が少なくなり、少し無音になるとアニメーションの表示が増えます。誰でも私を助けてもらえますか?
アイデアを得るために、添付のスクリーンショットを次に示します。
SoundManager2を使用すると、波形データに簡単にアクセスして、それをグラフィカルに表示できます。
someSoundObject.whileplaying = function() {
// Move 256 absolutely-positioned 1x1-pixel DIVs, for example (ugly, but works)
var gPixels = document.getElementById('graphPixels').getElementsByTagName('div');
var gScale = 32; // draw -32 to +32px from "zero" (i.e., center Y-axis point)
for (var i=0; i<256; i++) {
graphPixels[i].style.top = (gScale+Math.ceil(this.waveformData.left[i]*-gScale))+'px';
}
}