Comment ajouter des fichiers audio dans vue

Cette fois, je vais vous montrer comment ajouter des fichiers audio dans vue. Quelles sont les précautions pour ajouter des fichiers audio dans vue. Jetons un coup d'oeil une fois.

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>

La méthode ci-dessus peut résoudre ce problème.

Méthode 2 : Configurer 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 l'option d'attribut de conversion à l'attribut src de l'audio dans le fichier vue-loader.conf.js pour indiquer à vue-loader que le contenu de l'attribut src de l'audio doit être converti en module.

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 peuvent alors être placés dans le répertoire des ressources.

4. Re-démarrez le projet ou emballez et publiez, et vous pourrez entendre le son.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois php !

Lecture recommandée :

Comment exporter Excel à partir de l'interface utilisateur de l'élément

Explication détaillée des étapes pour implémenter la lecture hls avec vue-dplayer

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!