javascript - 音声を画像カルーセルに同期する

Question

キャンバスを使用せずに音声を画像カルーセルに同期することはできますか? 現在、カルーセルを実現するために setInterval を使用しています。私はフラッシュを使用したくありません。可能であれば、実現するのが難しくないので、キャンバスなしでこれを行いたいです。

Answer 1

キャンバスを試しましたか？

要素を使用していると仮定すると、そのプロパティ<audio>を取得できます。currentTimeこれにより、再生ヘッドがどこにあるかがわかります。この情報を使用して、オーディオが特定の位置を通過したときにカルーセルを変更したり、カルーセルが変化したときにオーディオの位置を変更するように設定したりできます。あなたがしていることには何でもうまくいきます。

Answer 2

カルーセルを実現するとはどういう意味ですか?

画像を表示したいときに特定のタイムスタンプを設定します。したがって、12 秒で画像を表示します。

オーディオがロードされていることを確認することもできます。を使用canPlayThroughして、再生するのに十分な量がロードされているかどうかを確認したり、 を使用audio.buffered.end(0)してオーディオ ファイルの長さをチェックしたり、すべてがロードされていることを確認したりできます。

詳細については、こちらの記事をご覧ください: http://html5doctor.com/html5-audio-the-state-of-play/

オーディオがロードされたら、関数を呼び出してタイムスタンプを渡し、それを setInterval 時間として設定します。そのため、 attimestamp * 1000関数が起動し、そのタイムスタンプで渡された画像が表示されます。

audio.currentTime上記の記事でも詳しく説明しています。より具体的な質問がある場合はお知らせください。