html - 音楽を画像と同期するHTML5

Question

HTML5オーディオ要素を使用して4秒の音楽ループを再生しています。同時に、48枚の画像を次々に表示する必要があります。オーディオがループの最初に戻ると、画像はフレーム1に戻る必要があります。

画像を音楽に同期させる必要があります。

これは、ループの数回の反復では問題になりませんが、音楽の処理がわずかに遅れると、画像との同期がわずかに失われ、時間の経過とともに増加します。

同期を維持するための最良の方法について何か考えがありますか？

Answer 1

audio 要素がtimeupdateイベントをスローしています。これを使用して、現在表示されている画像を JavaScript 経由で同期できます。