/ /単一ページの個々のオーディオ要素のjQueryプリローダー-javascript、jquery、css、html5

個々のオーディオ要素のjQueryプリローダー - javascript、jquery、css、html5

私は持っている単一ページアプリケーションを持っていますドキュメントにロードされている複数のオーディオファイル。 「.spinner」というクラスでプリローダースピナーを作成しました。ロードが完了するまで、個々のオーディオ要素ごとにこのプリローダースピナーを表示するにはどうすればよいですか?

回答:

回答№1は0

による この そして この ロードプロセス中に、次のイベントがこの順序で発生します。

  1. ロードスタート -メディアのロードが開始されたときに送信されます。
  2. 期間の変更 -メタデータがロードまたは変更され、メディアの期間が変更されたことを示しています。これは、たとえば、メディアが十分にロードされて期間がわかっている場合に送信されます。
  3. ロードされたメタデータ -メディアのメタデータの読み込みが完了しました。すべての属性に、必要なだけの有用な情報が含まれるようになりました。
  4. ロードされたデータ -メディアの最初のフレームの読み込みが完了しました。
  5. 進捗 -関係者に通知するために定期的に送信されますメディアのダウンロードの進捗状況。ダウンロードされたメディアの現在の量に関する情報は、media要素のbuffered属性で利用できます。
  6. 遊べる -少なくとも数フレームの間、メディアを再生できる十分なデータが利用可能になったときに送信されます。
  7. カンプススルー -準備完了状態がに変化したときに送信されますCAN_PLAY_THROUGHは、ダウンロードレートが少なくとも現在のレベルにとどまっていると仮定して、メディア全体を中断することなく再生できることを示します。注:currentTimeを手動で設定すると、最終的にFirefoxでcanplaythroughイベントが発生します。他のブラウザはこのイベントを発生させない場合があります。

したがって、これらのイベントを見ると、そのうちの2つで遊ぶことができます。 loadstart そして progress。または代わりに使用できます duration そして currentTime のようなオーディオ要素のプロパティ ここに.