Comment créer un lecteur de musique dans le framework Vue

Le framework Vue est un framework JavaScript utilisé pour créer des interfaces utilisateur. Développer un lecteur de musique dans Vue est une tâche très difficile car vous devez gérer plusieurs aspects tels que les données audio, le contrôle de l'interface utilisateur et l'expérience utilisateur. Dans cet article, nous présenterons comment créer un lecteur de musique simple à l'aide du framework Vue.

1. Préparation

Avant de commencer, vous devez vous assurer que tous les fichiers et bibliothèques nécessaires sont prêts. Tout d'abord, vous devez télécharger la bibliothèque Vue.js depuis le site officiel de Vue, puis l'ajouter à votre projet.

De plus, vous devez utiliser une bibliothèque JavaScript pour lire l'audio. Nous utiliserons l'API Audio Markup, qui est une méthode JavaScript native qui nous aide à lire l'audio dans le navigateur. Cependant, pour rendre le framework plus facile à utiliser, nous utiliserons également un composant Vue appelé balise vue-audio.

2. Créer une application Vue

Ensuite, créons une application Vue. Pour cela, nous utiliserons Vue CLI. Entrez la commande suivante sur la ligne de commande pour installer Vue CLI :

npm install -g @vue/cli

Ensuite, créez et démarrez l'application Vue à l'aide de la commande suivante :

vue create music-player
cd music-player
npm run serve

Cela démarrera le serveur de développement local à l'adresse http://localhost:8080 et affichera la page de démarrage de Vue par défaut.

3. Ajouter un composant vue-audio

Maintenant, nous allons ajouter un lecteur audio à l'aide du composant Vue. L'installation du composant Vue-audio peut simplifier cette tâche. Entrez la commande suivante sur la ligne de commande pour installer le composant :

npm install vue-audio --save

Une fois l'installation terminée, créez un nouveau fichier nommé AudioPlayer.vue dans le répertoire src. Dans ce fichier, veuillez ajouter le code suivant :

<template>
  <div>
    <audio :src="source" ref="player"></audio>
    <button @click="play">
      {{ isPlaying ? 'Pause' : 'Play' }}
    </button>
  </div>
</template>

<script>
  import Audio from 'vue-audio'
  
  export default {
    components: { Audio },
    props: {
      source: String
    },
    data() {
      return {
        isPlaying: false
      }
    },
    methods: {
      play() {
        const player = this.$refs.player;
        if (this.isPlaying) {
          player.pause();
        } else {
          player.play();
        }
        this.isPlaying = !this.isPlaying;
      }
    }
  }
</script>

Ce composant est un simple lecteur audio composé d'une balise audio HTML, d'un bouton et d'une méthode. Le texte sur le bouton changera en fonction de l'état de lecture. Dans les données isPlaying, nous enregistrerons si l'audio est en cours de lecture. Si l'élément audio est en cours de lecture, nous rendrons le texte de pause dans le composant et mettrons en pause l'élément audio lorsque vous cliquerez sur le bouton. Si l'élément audio est en pause, le texte de lecture s'affiche et l'élément est lu en cliquant sur le bouton.

4. Utilisez vue-audio pour lire de l'audio

Maintenant, nous pouvons utiliser le composant AudioPlayer dans l'application Vue pour lire de l'audio. Tout d’abord, ajoutez vos fichiers audio au répertoire src/assets. Ensuite, ajoutez le code suivant dans App.vue :

<template>
  <div>
    <AudioPlayer :source="audioSrc" />
  </div>
</template>

<script>
  import AudioPlayer from './components/AudioPlayer.vue'
  
  export default {
    components: { AudioPlayer },
    data() {
      return {
        audioSrc: require('@/assets/audio_file.mp3')
      }
    }
  }
</script>

Dans ce composant, nous utilisons le composant AudioPlayer. Notre fichier audio est maintenant chargé dynamiquement et sera transmis comme source au composant AudioPlayer pour le lire.

5. UI personnalisée

Enfin, nous devons apporter quelques personnalisations de l'interface utilisateur au lecteur audio. Nous allons écrire quelques styles en utilisant CSS, veuillez ajouter le CSS suivant dans App.vue :

<style>
  button {
    background-color: #2e79bd;
    border: none;
    color: white;
    padding: 10px;
    border-radius: 5px;
    font-size: 18px;
    margin-top: 20px;
    cursor: pointer;
  }
  
  button:hover {
    background-color: #3a8ff7;
  }
  
  audio {
    width: 100%;
    margin-top: 20px;
    border-radius: 5px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
  }
</style>

Notre lecteur de musique est maintenant terminé. En utilisant le framework Vue et le composant vue-audio, nous avons réussi à créer un lecteur de musique avec une interface utilisateur et des commandes de lecture de base.

Conclusion

Dans cet article, nous avons présenté comment créer un lecteur de musique simple à l'aide du framework Vue et du composant vue-audio. En utilisant les composants Vue, nous pouvons rendre le lecteur audio plus facile à utiliser et à maintenir, et lui donner une interface utilisateur personnalisable. Si vous devez créer un lecteur de musique complexe, la fonctionnalité peut être étendue en intégrant d'autres bibliothèques JavaScript.

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!