How to create audio progress bar in uniapp

Before you start, you need to understand the two components used in uniapp development: audio audio component and slider sliding selector component. Next, we can refer to the following steps to implement the design of the audio progress bar.

1. Add the audio component to the page

Use the audio tag in the template of the page to add the audio component, and set src to the path of the audio file.

2. Add the progress bar slider component

Add the slider component and set the bound v-model value to the current playback time to control the position of the progress bar.

3. Set the audio progress bar style

Use CSS styles to set the slider style, including progress bar color, progress bar slider style, progress bar maximum and minimum values wait.

4. Realize the update of the audio progress bar

Use the setInterval function in uniapp to update the position of the progress bar, and calculate the current progress bar based on the current playback time and total playback time Location.

5. Implement the dragging function of the progress bar

When the user drags the progress bar, you can use the @change event of the slider to get the current dragged value, and use The seek method of the audio component jumps to the corresponding playback position.

The final code is as follows:

<template>
  <view>
    <audio :src="audioSrc" @timeupdate="updateTime"></audio>
    <slider v-model="currentTime" :max="duration" @change="changeTime"></slider>
  </view>
</template>
 
<script>
  export default {
    data() {
      return {
        audioSrc: 'your-audio-src',
        duration: 0,
        currentTime: 0,
        timeUpdate: null
      }
    },
    mounted() {
      this.initAudio()
    },
    methods: {
      initAudio() {
        let audio = uni.createInnerAudioContext()
        audio.src = this.audioSrc
        audio.onTimeUpdate(() => {
          this.duration = audio.duration
          this.currentTime = audio.currentTime
        })
        audio.play()
        this.timeUpdate = setInterval(() => {
          this.currentTime = audio.currentTime
        }, 500)
      },
      updateTime(e) {
        this.currentTime = e.detail.currentTime
        this.duration = e.detail.duration
      },
      changeTime(e) {
        let audio = uni.createInnerAudioContext()
        audio.src = this.audioSrc
        audio.seek(e.detail.value)
      }
    }
  }
</script>

<style scoped>
  .uni-slider-wrapper {
    height: 8px;
    border-radius: 4px;
    background-color: #ccc;
  }
 
  .uni-slider-track {
    height: 8px;
    border-radius: 4px;
    background-color: #1cbbb4;
  }
 
  .uni-slider-thumb {
    border-radius: 12px;
    background-color: #1cbbb4;
  }
</style>

In this way, we can implement the design of the audio progress bar in uniapp, allowing users to more conveniently control the progress of audio playback.

The above is the detailed content of How to create audio progress bar in uniapp. For more information, please follow other related articles on the PHP Chinese website!