Comment importer de la musique dans vue

Dans le développement Web moderne, Vue est devenu l'un des frameworks front-end les plus populaires. Si vous créez une application Vue et souhaitez ajouter des fichiers musicaux, cet article vous montrera comment importer des fichiers musicaux dans un projet Vue.

Étape 1 : Ajouter des fichiers musicaux au projet Vue

Dans le projet Vue, vous devez ajouter les fichiers musicaux à l'un des répertoires suivants : public, src/assets. Notez que si vous ajoutez un fichier musical au répertoire public, le fichier sera copié dans le répertoire dist au moment de la construction.

Deuxième étape : accéder aux fichiers musicaux à partir de fichiers JavaScript

Pour accéder aux fichiers musicaux dans votre application Vue, vous devez ajouter du code JavaScript. Dans le composant Vue, vous pouvez accéder au fichier musical en utilisant un code comme celui-ci :

new Audio(require('@/assets/soundtrack.mp3')).play()

Ici, nous utilisons un nouvel objet Audio et lui transmettons le chemin URL du fichier musical (remarque : le chemin du fichier doit commencer par @/assets/ ). Enfin, nous jouons la musique en appelant la méthode play().

Troisième étape : Lire de la musique dans le composant Vue

Pour lire de la musique dans le composant Vue, vous pouvez utiliser le code ci-dessus dans la méthode de cycle de vie Mounted() :

mounted() {
  new Audio(require('@/assets/soundtrack.mp3')).play()
}

Ici, nous avons le composant Vue en cours de montage sur When dans l'arborescence DOM , un nouvel objet Audio est initialisé et le fichier musical est joué.

Étape 4 : Contrôler la lecture de la musique dans le composant Vue

Si vous souhaitez ajouter plus d'options de contrôle pour la lecture de la musique, telles que la pause, l'arrêt, le réglage du volume, etc., veuillez utiliser le code suivant :

data() {
  return {
    audio: null,
    volume: 0.5,
    isPlaying: false
  }
},
mounted() {
  this.audio = new Audio(require('@/assets/soundtrack.mp3'))
  this.audio.volume = this.volume
},
methods: {
  togglePlay() {
    if (this.isPlaying) {
      this.audio.pause()
    } else {
      this.audio.play()
    }
    this.isPlaying = !this.isPlaying
  },
  stop() {
    this.audio.pause()
    this.audio.currentTime = 0
    this.isPlaying = false
  }
}

Ici, nous définissons Une propriété de données nommée « audio » qui suit les fichiers audio. Nous définissons également les méthodes togglePlay() et stop() pour contrôler les fichiers audio. Dans la méthode togglePlay(), nous vérifions si l'audio est en cours de lecture et lisons ou mettons en pause l'audio si nécessaire. Dans la méthode stop(), nous arrêtons l'audio et définissons son heure actuelle sur 0.

Enfin, nous espérons que vous pourrez réussir à ajouter de la musique et à la contrôler dans votre projet Vue. N'oubliez pas qu'il ne s'agit que d'une petite astuce dans le framework Vue, vous pouvez utiliser d'autres bibliothèques et frameworks tels que jQuery et React pour obtenir les mêmes résultats.

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!