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]')
   }
}

2. Ajoutez une option d'attribut de conversion pour l'attribut src de l'audio dans le fichier vue-loader.conf.js pour que vue-loader le sache. doit convertir le src de l'audio. Le contenu de l'attribut est converti en modules.

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. Ajoutez la balise audio et introduisez le fichier ressource

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

Les fichiers de ressources à ce moment peuvent être placés dans le répertoire des actifs.

4. Redémarrez le projet ou le package et publiez, et vous pourrez entendre le son.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles associés :

À 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!