使用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
}

結論#

通過按照這些步驟，您可以輕鬆更新媒體播放器應用程序中的進度條。這使用戶可以直觀地了解播放進度，並提升他們的整體體驗。祝編碼愉快！