Utilisez uniapp pour implémenter la fonction de lecture audio

Utilisez uniapp pour implémenter la fonction de lecture audio

Avec le développement de l'Internet mobile, la fonction de lecture audio est devenue l'une des fonctions essentielles pour de nombreuses applications. La fonction de lecture audio peut être facilement mise en œuvre à l'aide d'uniapp. Elle présente des caractéristiques multiplateformes et peut s'exécuter sur différents terminaux mobiles.

Avant de développer uniapp, nous devons d'abord préparer les fichiers de ressources audio. Dans cet article, nous utiliserons comme exemple un fichier audio nommé « music.mp3 ».

Tout d'abord, nous devons créer une page de lecture audio dans le projet uniapp. Sous le dossier pages, créez un nouveau dossier nommé « audio » et créez un fichier nommé « audio.vue » sous le dossier. Dans le fichier "audio.vue", nous écrirons le code lié à la lecture audio.

Dans le fichier "audio.vue", nous devons d'abord introduire les composants pertinents d'uniapp, y compris le composant uni-audio. Le code est le suivant :

<template>
  <view>
    <uni-audio :src="audioUrl" :autoplay="autoplay" :loop="loop" @ended="audioEnded"></uni-audio>
    <view>
      <button @tap="playAudio">播放</button>
      <button @tap="pauseAudio">暂停</button>
      <button @tap="stopAudio">停止</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      audioUrl: '/static/music.mp3',
      autoplay: false,
      loop: false,
    }
  },
  methods: {
    playAudio() {
      uni.createAudioContext('uni-audio').play()
    },
    pauseAudio() {
      uni.createAudioContext('uni-audio').pause()
    },
    stopAudio() {
      uni.createAudioContext('uni-audio').stop()
    },
    audioEnded() {
      console.log('音频播放结束')
    },
  },
}
</script>

<style>
</style>

Dans le code ci-dessus, nous utilisons le composant uni-audio et définissons les propriétés liées à l'audio via des accessoires. Parmi eux, audioUrl représente le chemin du fichier audio, autoplay indique s'il faut lire automatiquement et loop représente s'il faut boucler.

Sur la page, nous avons créé trois boutons pour contrôler la lecture, la pause et l'arrêt de l'audio. En appelant la méthode uni.createAudioContext, nous pouvons obtenir l'objet contextuel du composant uni-audio et appeler sa méthode correspondante pour contrôler la lecture audio.

Lorsque la lecture audio se termine, nous écoutons l'événement de fin de lecture audio en utilisant l'événement @ended sur le composant uni-audio. Dans la fonction de rappel d'événement, nous pouvons effectuer les opérations correspondantes, telles que la sortie d'un journal.

Après avoir terminé l'écriture du code ci-dessus, nous devons enregistrer la page "audio" dans le fichier de configuration uniapp app.json. Les étapes spécifiques sont les suivantes :

1. Ouvrez le fichier app.json ;
2. Ajoutez "pages/audio/audio" dans le champ des pages ;
3. Enregistrez le fichier.

Maintenant, nous pouvons visualiser et tester la fonction de lecture audio dans l'environnement d'exécution d'uniapp. Cliquez sur le bouton Exécuter dans l'outil de développement uniapp pour afficher la page de lecture audio sur le simulateur et effectuer les opérations correspondantes.

En résumé, la fonction de lecture audio peut être facilement implémentée à l'aide d'uniapp. En introduisant le composant uni-audio et en définissant les propriétés et événements correspondants, dans le développement réel, nous pouvons personnaliser notre propre page de lecture audio selon nos besoins et implémenter des fonctions plus riches.

(Le code ci-dessus est à titre de référence uniquement, l'implémentation spécifique peut varier en fonction de la version uniapp et de l'environnement de développement utilisé.)

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!