使用howlでオーディオを再生する際の進行状況バーの処理

更新メディアプレーヤーの進行状況バー#

メディアプレーヤーを構築する際には、現在の再生位置を正確に反映する進行状況バーが非常に重要です。この記事では、JavaScript と Vue.js を使用して進行状況バーをリアルタイムで更新する方法について説明します。

ステップ 1：環境の設定#

まず、必要な環境を設定する必要があります。Vue.js がインストールされており、メディアプレーヤー用の新しい Vue コンポーネントが作成されていることを確認してください。

ステップ 2：進行状況の追跡#

メディア再生の進行状況を追跡するために、progressという名前のリアクティブオブジェクトを使用します。このオブジェクトには、現在の再生時間、総時間、および進行状況のパーセンテージが格納されます。

const isDragging = ref(false)

const progress = reactive({
  percent: 0,
  current: 0,
  total: 0,
})

ステップ 3：進行状況の更新#

進行状況バーを更新するために、定期的に呼び出される関数を作成する必要があります。この関数は、進行状況バーが手動でドラッグされていないかどうかをチェックします。ドラッグされていない場合、progressオブジェクトのcurrentとpercentプロパティが更新されます。

function updateProgress() {
  if (!isDragging.value) {
    progress.current = store.howl.seek()
    progress.percent = progress.current / progress.total
  }
  if (store.howl.playing()) {
    requestAnimationFrame(updateProgress)
  }
}

ステップ 4：進行状況バーのバインディング#

これで進行状況のデータが揃ったので、Vue テンプレートの進行状況バー要素にバインドすることができます。

<input
  v-model="progress.percent"
  type="range" min="0" max="1" step="0.001"
  @input="onProgressInput"
  @change="changeProgress"
/>

ステップ 5：手動ドラッグの処理#

手動ドラッグと自動進行状況の更新の間の競合を避けるために、進行状況バーがドラッグされた場合にisDraggingというフラグを設定する必要があります。

function onProgressInput() {
  isDragging.value = true
}

function changeProgress() {
  store.howl.seek(progress.total * progress.percent)
  isDragging.value = false
}

結論#

これらのステップに従って、メディアプレーヤーアプリケーションの進行状況バーを簡単に更新することができます。これにより、ユーザーは再生の進行状況を直感的に把握することができ、全体的な体験が向上します。楽しいコーディングを！