Comment créer une barre de progression audio dans Uniapp

Avant de commencer, vous devez comprendre les deux composants utilisés dans le développement d'Uniapp : le composant audio et le composant de sélection coulissante. Ensuite, nous pouvons nous référer aux étapes suivantes pour implémenter la conception de la barre de progression audio.

1. Ajouter le composant audio à la page

Utilisez la balise audio dans le modèle de la page pour ajouter le composant audio, et définissez src au chemin du fichier audio.

2. Ajouter un composant de curseur de barre de progression

Ajouter un composant de curseur et définir la valeur du modèle V liée à l'heure de lecture actuelle pour contrôler la position de la barre de progression.

3. Définir le style de la barre de progression audio

Utilisez les styles CSS pour définir le style du curseur, y compris la couleur de la barre de progression, le style du curseur de la barre de progression, Valeurs maximales et minimales de la barre de progression, etc.

4. Réaliser la mise à jour de la barre de progression audio

Utilisez la fonction setInterval dans uniapp pour mettre à jour la position de la barre de progression en fonction de l'actuelle temps de lecture et temps de lecture total pour calculer la position actuelle de la barre de progression.

5. Implémenter la fonction de déplacement de la barre de progression

Lorsque l'utilisateur fait glisser la barre de progression, vous pouvez utiliser l'événement @change du curseur pour obtenir la fonction de glissement actuelle, déplacez la valeur et utilisez la méthode de recherche du composant audio pour passer à la position de lecture correspondante.

Le code final est le suivant :

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

De cette façon, nous pouvons implémenter la conception de la barre de progression audio dans uniapp, permettant aux utilisateurs de contrôler plus facilement la progression de lecture audio.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!