So erstellen Sie einen Audio-Fortschrittsbalken in Uniapp

Bevor Sie beginnen, müssen Sie die beiden in der Uniapp-Entwicklung verwendeten Komponenten verstehen: Audio-Audio-Komponente und Schieberegler-Auswahlkomponente. Als nächstes können wir uns auf die folgenden Schritte beziehen, um das Design des Audio-Fortschrittsbalkens zu implementieren.

1. Fügen Sie die Audiokomponente zur Seite hinzu

Verwenden Sie das Audio-Tag, um die Audiokomponente in der Vorlage der Seite hinzuzufügen, und legen Sie src auf den Pfad der Audiodatei fest.

2. Fügen Sie die Fortschrittsbalken-Schiebereglerkomponente hinzu

Fügen Sie die Schiebereglerkomponente hinzu und setzen Sie den gebundenen V-Modellwert auf die aktuelle Wiedergabezeit, um die Position des Fortschrittsbalkens zu steuern.

3. Legen Sie den Stil des Audio-Fortschrittsbalkens fest

Verwenden Sie CSS-Stile, um den Stil des Schiebereglers festzulegen, einschließlich der Farbe des Fortschrittsbalkens, des Stils des Fortschrittsbalken-Schiebereglers, der maximalen und minimalen Werte des Fortschrittsbalkens usw.

4. Realisieren Sie die Aktualisierung des Audio-Fortschrittsbalkens

Verwenden Sie die setInterval-Funktion in uniapp, um die Position des Fortschrittsbalkens zu aktualisieren und die aktuelle Position des Fortschrittsbalkens basierend auf der aktuellen Wiedergabezeit und der Gesamtwiedergabezeit zu berechnen.

5. Implementieren Sie die Ziehfunktion des Fortschrittsbalkens

Wenn der Benutzer den Fortschrittsbalken zieht, können Sie das @change-Ereignis des Schiebereglers verwenden, um den aktuellen Ziehwert abzurufen, und zum Springen die Suchmethode der Audiokomponente verwenden zur entsprechenden Wiedergabeposition.

Der endgültige Code lautet wie folgt:

<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>

Auf diese Weise können wir das Design des Audio-Fortschrittsbalkens in Uniapp implementieren, sodass Benutzer den Fortschritt der Audiowiedergabe bequemer steuern können.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie einen Audio-Fortschrittsbalken in Uniapp. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!