How to add audio files in vue

This time I will show you how to add audio files in vue, what are the precautions for adding audio files in vue, the following is a practical case, let's take a look one time.

Sometimes we need to add audio files in vue, but when we place the audio files directly in the assets directory, we will find that they cannot play normally. The following are two commonly used configuration methods:

Method 1. Place the audio file in the static directory and then call it, as shown below

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

The above method can solve this problem.

Method 2: Configure the mp3 format parser for the project

1. Add the loader in webpack.base.conf.js, as follows

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

2. Add the conversion attribute option to the src attribute of audio in the vue-loader.conf.js file to let vue-loader know that the content of the src attribute of audio needs to be converted into a 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. Add the audio tag and introduce the resource file

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

The resource files at this time can be placed in the assets directory.

4. Restart the project or package and publish, and you can hear the sound.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

The above is the detailed content of How to add audio files in vue. For more information, please follow other related articles on the PHP Chinese website!