So importieren Sie Vue-Musik

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.

1. File-Loader installieren

Zuerst müssen Sie den File-Loader installieren. Verwenden Sie zum Installieren den folgenden Befehl im Terminal:

npm install file-loader --save-dev

2. Erstellen Sie eine neue audio.js-Datei

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.

3. Wird in Vue-Komponenten verwendet

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:

1. vue-audio: Verwenden Sie Vue.js, um ein Plug-In zu erstellen, das Webseiten-Audio wiedergibt.

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

2. vue-audio-player: Ein Audio-Player-Plug-in basierend auf Vue.js, das die Wiedergabe von lokalem und Online-Audio unterstützt.

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

3. vue-audio-recorder: Vue.js Audiorecorder-Plug-in, unterstützt die Aufnahme von Audio, die Wiedergabe aufgezeichneter Audiodaten und das Anhalten der Aufnahme , aufgenommenes Audio löschen und andere Funktionen.

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!