Handling the progress bar when using howl to play audio

Update the progress bar in the media player#

When building a media player, it is crucial to accurately reflect the current playback position with a progress bar. In this article, we will explore how to use JavaScript and Vue.js to update the progress bar in real-time.

Step 1: Set up the environment#

First, we need to set up the necessary environment. Make sure Vue.js is installed and create a new Vue component for the media player.

Step 2: Track the progress#

To track the media playback progress, we will use a reactive object called progress. This object will store the current playback time, total duration, and progress percentage.

const isDragging = ref(false)

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

Step 3: Update the progress#

To update the progress bar, we need to create a function that is called periodically. This function will check if the progress bar is being manually dragged. If not, it will update the current and percent properties of the progress object.

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

Step 4: Bind the progress bar#

Now that we have the progress data, we can bind it to the progress bar element in the Vue template.

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

Step 5: Handle manual dragging#

To avoid conflicts between manual dragging and automatic progress updates, we need to set a flag called isDragging when the progress bar is being dragged manually.

function onProgressInput() {
  isDragging.value = true
}

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

Conclusion#

By following these steps, you can easily update the progress bar in your media player application. This allows users to have a visual understanding of the playback progress and enhances their overall experience. Happy coding!