So fügen Sie MP3-Audiodateien mithilfe von Vue hinzu

In diesem Artikel wird hauptsächlich die Methode zum Hinzufügen von MP3-Audiodateien in Vue vorgestellt. Jetzt teile ich sie mit Ihnen und gebe sie als Referenz.

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. Im Folgenden sind zwei häufig verwendete Konfigurationsmethoden aufgeführt:

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>

Das obige Dies Wie kann dieses Problem gelöst werden?

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 eine Konvertierungsattributoption für das src-Attribut von Audio in der Datei vue-loader.conf.js hinzu, um Vue-Loader darüber zu informieren, dass dies erforderlich ist Konvertieren Sie das src-Attribut von Audioinhalten, die in Module konvertiert werden.

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>

At Diesmal können Ressourcendateien im Assets-Verzeichnis abgelegt werden.

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

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Über die bidirektionale Bindung von übergeordneten und untergeordneten Komponenten in Vue2.x (ausführliches Tutorial)

Detaillierte Einführung in die Änderungen in der v-for-Iterationssyntax in Vue2.0 (ausführliches Tutorial)

Schleifen und Laden verschiedener Bilder in vue2.0 (ausführliches Tutorial)

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