Comment importer de la musique vue

Avec le développement continu et la popularisation de la technologie Internet, la musique est devenue un élément indispensable de la vie quotidienne des gens. Vue, un framework frontal populaire, facilite également le développement de sites Web musicaux. Cependant, lorsque vous utilisez Vue pour développer un site Web de musique, il faut prêter attention à la manière d'importer des fichiers musicaux. Cet article présentera plusieurs méthodes courantes d'importation de musique.

1. Introduisez des fichiers audio via src

Dans le composant Vue, vous pouvez introduire des images et des fichiers vidéo en utilisant les balises img et video dans le modèle. utilisez également Utilisez la balise audio dans le modèle pour introduire les fichiers audio.

Exemple de code :

<template>
  <div>
    <audio src="./audio/music.mp3"></audio>
  </div>
</template>

Le "./audio/music.mp3" est ici un chemin relatif, ce qui signifie que sous le dossier audio du projet en cours, il y a un dossier nommé Le fichier audio music.mp3. Vous pouvez le modifier avec votre propre chemin de fichier et nom de fichier en fonction de la situation réelle. Avec cette méthode, vous pouvez simplement importer le fichier audio dans le composant Vue et le lire dans la page.

2. Utilisez la syntaxe modulaire ES6

Lors du développement avec Vue, elle est souvent combinée avec webpack pour l'empaquetage et la construction. Les fichiers audio peuvent être importés dans les composants vue en tant que modules en utilisant la syntaxe modulaire d'ES6.

1. Installer le chargeur de fichiers

Tout d'abord, vous devez installer le chargeur de fichiers. Utilisez la commande suivante dans le terminal pour installer :

npm install file-loader --save-dev

2. Nouveau fichier audio.js

Créez un nouveau fichier audio.js dans le src Écrivez-y le code suivant :

import music from "./audio/music.mp3";

export default {
  music
}

La syntaxe modulaire d'ES6 est utilisée ici, music.mp3 est importé dans le fichier audio.js et une variable nommée music est exportée via l'exportation par défaut. De cette façon, music.mp3 devient un fichier de module qui peut être importé et utilisé dans d'autres composants.

3. Utilisez

dans le composant vue qui doit utiliser des fichiers audio, vous pouvez utiliser l'instruction import pour introduire le. fichier audio : #🎜🎜 #

<script>
import audio from '@/audio';

export default {
  name: "Music",
  data() {
    return {
      music: audio.music
    }
  }
}
</script>

<template>
  <div>
    <audio :src="music" controls>
      Your browser does not support the audio element.
    </audio>
  </div>
</template>

Le "@/audio" représente ici le contenu exporté dans le fichier audio.js du répertoire src. Utilisez :src pour lier les données et transmettre l'adresse du fichier audio dans la balise audio pour lire le fichier audio sur la page.

3. Utilisez des plug-ins tiers

S'il est difficile d'importer des fichiers audio en utilisant la méthode ci-dessus, vous pouvez également envisager d'utiliser un plug-in tiers . Voici plusieurs plug-ins audio Vue couramment utilisés :

vue-audio : utilisez Vue.js pour créer un plug-in qui lit l'audio d'une page Web.

Adresse Github : https://github.com/shershen08/vue-audio

vue-audio-player : un lecteur basé sur Vue Plug-in de lecteur audio .js qui prend en charge la lecture audio locale et en ligne.

Adresse Github : https://github.com/shawjia/vue-audio-player

vue-audio-recorder : Vue. js, prend en charge l'enregistrement audio, la lecture de l'audio enregistré, la pause de l'enregistrement, la suppression de l'audio enregistré et d'autres fonctions.

Adresse Github : https://github.com/grishkovelli/vue-audio-recorder

Les plug-ins ci-dessus peuvent être sélectionnés et utilisés en fonction besoins spécifiques.

Résumé :

Cet article présente trois méthodes courantes d'importation de fichiers audio dans Vue, à savoir l'introduction de fichiers audio via src, l'utilisation de la syntaxe modulaire ES6 pour importer des fichiers audio et l'utilisation de fichiers tiers. plug-ins de fête. Lors du développement d'un site Web musical, choisir la méthode appropriée pour importer des fichiers audio peut rendre le développement plus efficace, le code plus simple et l'expérience utilisateur meilleure.

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!