So fügen Sie Audiodateien in Vue hinzu

Dieses Mal zeige ich Ihnen, wie Sie Audiodateien in Vue hinzufügen. Was sind die Vorsichtsmaßnahmen für das Hinzufügen von Audiodateien in Vue? Werfen wir einmal einen Blick.

Manchmal müssen wir Audiodateien in Vue hinzufügen, aber wenn wir die Audiodateien direkt im Assets-Verzeichnis ablegen, werden wir feststellen, dass sie nicht normal abgespielt werden können. Die folgenden zwei häufig verwendeten Konfigurationsmethoden sind:

Methode 1. Platzieren Sie die Audiodatei im statischen Verzeichnis und rufen Sie sie dann auf, wie unten gezeigt

<audio class="success" 
    src="/static/audios/do_wrong.mp3">
</audio>

Die obige Methode kann dieses Problem lösen.

Methode 2: Konfigurieren Sie den MP3-Format-Parser für das Projekt

1. Fügen Sie den Loader wie folgt zu webpack.base.conf.js hinzu

{
   test: /\.(mp3)(\?.*)?$/,
   loader: 'url-loader',
   options: {
    name: utils.assetsPath('assets/[name].[hash:7].[ext]')
   }
}

2. Fügen Sie die Konvertierungsattributoption zum src-Attribut von Audio in der Datei vue-loader.conf.js hinzu, um Vue-Loader darüber zu informieren, dass der Inhalt des src-Attributs von Audio in ein Modul konvertiert werden muss.

var utils = require('./utils')
var config = require('../config')
var isProduction = process.env.NODE_ENV === 'production'
module.exports = {
 loaders: utils.cssLoaders({
  sourceMap: isProduction
   ? config.build.productionSourceMap
   : config.dev.cssSourceMap,
  extract: isProduction
 }),
 transformToRequire: {
  "audio": "src"
 }
}

3. Fügen Sie das Audio-Tag hinzu und stellen Sie die Ressourcendatei vor

<audio autoplay="autoplay" 
    controls="controls"
    preload="auto"
    src="../assets/allright.mp3">
</audio>

Die Ressourcendateien können zu diesem Zeitpunkt im Assets-Verzeichnis abgelegt werden.

4. Starten Sie das Projekt neu oder verpacken Sie es und veröffentlichen Sie es, und Sie können den Ton hören.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen Website php.

Empfohlene Lektüre:

So exportieren Sie Excel aus der Element-Benutzeroberfläche

Detaillierte Erläuterung der Schritte zur Implementierung der HLS-Wiedergabe mit vue-dplayer

Das obige ist der detaillierte Inhalt vonSo fügen Sie Audiodateien in Vue hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!