How to add mp3 audio files by using vue

This article mainly introduces the method of adding mp3 audio files in vue. Now I will share it with you and give you a reference.

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 This way can solve this problem.

Method 2. Configure the mp3 format parser for the project

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

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

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

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

At this time Resource files can be placed in the assets directory.

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

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

About two-way binding of parent components and child components in Vue2.x (detailed tutorial)

Introducing in detail the changes in v-for iteration syntax in Vue2.0 (detailed tutorial)

Looping through and loading different images in vue2.0 (detailed tutorial)

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