Mit der kontinuierlichen Weiterentwicklung und Popularisierung der Internettechnologie ist Musik zu einem unverzichtbaren Bestandteil des täglichen Lebens der Menschen geworden. Vue, ein beliebtes Frontend-Framework, erleichtert auch die Entwicklung von Musik-Websites. Wenn Sie jedoch Vue zum Entwickeln einer Musik-Website verwenden, muss darauf geachtet werden, wie Musikdateien importiert werden. In diesem Artikel werden verschiedene gängige Methoden zum Importieren von Musik vorgestellt.
1. Audiodateien über src einführen
In der Vue-Komponente können Sie die Tags img und video in der Vorlage verwenden, um Bilder und Videodateien einzuführen. Ebenso können Sie das Audio-Tag in der Vorlage verwenden, um Audiodateien einzuführen .
Codebeispiel:
<template>
<div>
<audio src="./audio/music.mp3"></audio>
</div>
</template>"./audio/music.mp3" hier ist ein relativer Pfad, der angibt, dass sich im Audioordner des aktuellen Projekts eine Audiodatei mit dem Namen music.mp3 befindet. Sie können es entsprechend der tatsächlichen Situation in Ihren eigenen Dateipfad und Dateinamen ändern. Mit dieser Methode können Sie die Audiodatei einfach in die Vue-Komponente importieren und auf der Seite abspielen.
2. Verwenden Sie die modulare ES6-Syntax
Bei der Entwicklung mit Vue wird sie häufig mit Webpack zum Packen und Erstellen kombiniert. Audiodateien können mithilfe der modularen Syntax von ES6 als Module in Vue-Komponenten importiert werden.
Zuerst müssen Sie den File-Loader installieren. Verwenden Sie zum Installieren den folgenden Befehl im Terminal:
npm install file-loader --save-dev
Erstellen Sie eine neue audio.js-Datei im src-Verzeichnis und schreiben Sie den folgenden Code hinein:
import music from "./audio/music.mp3";
export default {
music
}Die modulare Syntax von Hier wird ES6 verwendet, music.mp3 in die Datei audio.js importiert und über den Exportstandard eine Variable mit dem Namen „music“ exportiert. Auf diese Weise wird music.mp3 zu einer Moduldatei, die importiert und in anderen Komponenten verwendet werden kann.
In Vue-Komponenten, die Audiodateien verwenden müssen, können Sie die Importanweisung verwenden, um Audiodateien einzuführen:
<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>Das „@/audio“ hier bedeutet, dass es sich in audio.js befindet Datei im src-Verzeichnis Exportierter Inhalt. Verwenden Sie :src, um Daten zu binden und die Adresse der Audiodatei an das Audio-Tag zu übergeben, um die Audiodatei auf der Seite abzuspielen.
3. Verwenden Sie Plug-Ins von Drittanbietern.
Wenn es schwierig ist, Audiodateien mit der oben genannten Methode zu importieren, können Sie auch die Verwendung eines Plug-Ins von Drittanbietern in Betracht ziehen. Im Folgenden sind einige häufig verwendete Vue-Audio-Plug-Ins aufgeführt:
Github-Adresse: https://github.com/shershen08/vue-audio
Github-Adresse: https://github.com/shawjia/vue-audio-player
Github-Adresse: https://github.com/grishkovelli/vue-audio-recorder
Die oben genannten Plug-Ins können je nach Bedarf ausgewählt und verwendet werden.
Zusammenfassung:
In diesem Artikel werden drei gängige Methoden zum Importieren von Audiodateien in Vue vorgestellt, darunter die Einführung von Audiodateien über src, die Verwendung der modularen ES6-Syntax zum Importieren von Audiodateien und die Verwendung von Plug-Ins von Drittanbietern. Bei der Entwicklung einer Musik-Website kann die Wahl der geeigneten Methode zum Importieren von Audiodateien die Entwicklung effizienter, den Code einfacher und die Benutzererfahrung verbessern.
Das obige ist der detaillierte Inhalt vonSo importieren Sie Vue-Musik. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
