Comment ajouter des fichiers audio mp3 en utilisant vue

Cet article présente principalement la méthode d'ajout de fichiers audio mp3 dans vue. Maintenant, je le partage avec vous et le donne comme référence.

Parfois, nous devons ajouter des fichiers audio dans vue, mais lorsque nous plaçons les fichiers audio directement dans le répertoire des ressources, nous constatons qu'ils ne peuvent pas être lus normalement. Voici deux méthodes de configuration couramment utilisées :

Méthode 1. Placez le fichier audio dans le répertoire statique, puis appelez-le, comme indiqué ci-dessous

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

Ci-dessus Cette façon peut résoudre ce problème.

Méthode 2 : Configurez l'analyseur de format mp3 pour le projet

1 Ajoutez le chargeur à webpack.base.conf.js, comme suit<🎜. >

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

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"
 }
}

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

À propos de la liaison bidirectionnelle des composants parents et des composants enfants dans Vue2.x (tutoriel détaillé)

Introduction détaillée aux changements dans la syntaxe d'itération v-for dans Vue2.0 (tutoriel détaillé)

Boucle et chargement de différentes images dans vue2.0 (tutoriel détaillé)

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!