Comment faire correspondre des chansons avec vue

Vue est un framework JavaScript populaire avec lequel vous pouvez créer des applications Web étonnantes. En plus de l'implémentation frontale, Vue fournit également des outils pour créer et empaqueter des applications à l'aide de Vue CLI et Vue Loader. Lors de l'écriture d'applications Web, vous devez souvent utiliser divers composants d'interface utilisateur tels que des curseurs, des onglets et des boîtes de dialogue. Cependant, dans les futurs sites Web d'écoute de musique, nous devrons généralement utiliser un lecteur de musique, et le framework Vue lui-même ne fournit pas cette fonction. Alors, comment devrions-nous utiliser le lecteur de musique dans le framework Vue ? Discutons de la façon d'accompagner des chansons dans le framework Vue.

Tout d'abord, nous devons trouver un plug-in de lecteur de musique utile. Le framework Vue ne fournit pas cette fonction. Il existe de nombreux plug-ins de lecteurs de musique sur le marché, tels que APlayer, MetingJS, etc. Ces plug-ins de lecteur sont très faciles à utiliser, prennent en charge les fichiers musicaux dans une variété de formats et prennent également en charge des fonctions telles que les listes de lecture, la lecture en boucle et la lecture aléatoire. Nous pouvons choisir un plug-in de lecteur de musique qui nous convient, puis l'installer et l'utiliser conformément à la documentation du plug-in.

Parmi les deux plug-ins de lecteur de musique mentionnés ci-dessus, APlayer est un plug-in de lecteur de musique basé sur HTML5. Il se caractérise par sa facilité d'utilisation, sa bonne compatibilité et prend en charge une variété de formats audio. et les téléphones portables. MetingJS est un plug-in de lecteur de musique basé sur WordPress. S'il est utilisé dans le framework Vue, il doit coopérer avec MetingJS pour appeler l'API NetEase Cloud. L'inconvénient est qu'il ne prend pas en charge la lecture de fichiers audio locaux.

La prochaine étape consiste à utiliser le plug-in du lecteur de musique dans le framework Vue. Nous devons installer et configurer conformément à la documentation du plug-in. Les plug-ins fournissent généralement un composant pour simplifier l'utilisation. Par exemple, lorsque vous utilisez le plug-in APlayer, vous pouvez directement utiliser le code suivant pour appeler :

<template>
   <div>
       <aplayer ref="aplayer"
                :audio="audio"
                :autoplay="true"
                :showlrc="1"
                :theme="#ebd0c2"
                :mutex="true"
                :preload="true"
          ></aplayer>
    </div>
</template>

Dans ce code, nous appelons le composant lecteur APlayer via la balise <aplayer> et passons dans certains paramètres. Par exemple, configurez des listes de lecture, la lecture automatique, les méthodes d'affichage des paroles, etc. Dans le framework Vue, nous pouvons également personnaliser certains composants pour implémenter les fonctions du lecteur de musique. Par exemple, nous pouvons personnaliser un composant de contrôle du lecteur pour contrôler la lecture de la musique, la pause, la progression, etc. Le code est le suivant : <aplayer>标签调用APlayer播放器组件，同时传入了一些参数，例如设置了播放列表、自动播放、歌词显示方式等等。在Vue框架中，我们也可以自定义一些组件来实现音乐播放器的功能。例如，我们可以自定义一个播放器控制组件，来控制音乐的播放、暂停、进度等。代码如下：

<template>
  <div class="player-control">
    <button @click="togglePlay">{{ playing ? '暂停' : '播放' }}</button>
    <div class="progress" :style="{ width: progressPercent + &#39;%&#39; }"></div>
  </div>
</template>

<script>
export default {
  name: 'PlayerControl',
  props: {
    playing: Boolean,
    progress: Number,
  },
  computed: {
    progressPercent() {
      return this.progress / this.duration * 100;
    },
  },
  methods: {
    togglePlay() {
      this.$emit('togglePlay');
    },
  },
};
</script>

在这个自定义组件中，我们定义了一个播放/暂停按钮和一个进度条，并通过计算属性来控制进度条的宽度。在方法中，我们定义了一个togglePlayrrreee

Dans ce composant personnalisé, nous définissons un bouton lecture/pause et une barre de progression, et contrôlons la largeur de la barre de progression via des propriétés calculées. Dans la méthode, nous définissons une méthode togglePlay pour contrôler l'état de lecture/pause du lecteur. Cette méthode est déclenchée lorsque le bouton est cliqué et transmis au composant parent via l'événement.

Pour résumer, si l'on souhaite utiliser un lecteur de musique dans le framework Vue, il faut d'abord choisir un plug-in de lecteur de musique qui nous convient, puis l'installer et le configurer selon la documentation du plug-in, et enfin appeler le joueur à travers le composant. Si le plug-in ne peut pas répondre à nos besoins, nous pouvons également personnaliser certains composants pour implémenter les fonctions du lecteur de musique. 🎜

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!