How to add mp3 audio files to vue, and how to add mp3 audio to vue

How to add mp3 audio files to vue, and how to add mp3 audio to vue

Sometimes we need to add an audio file to the vue, but when we directly place the audio file under the assets Directory, we will find that it cannot be played normally. Below are two common configuration methods:

Method 1: place the audio file in the static directory and call the file as follows:

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

The above method can solve this problem.

Method 2: Configure an mp3 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 the conversion property option to the src attribute of audio in the vue-loader.conf.js file so that vue-loader knows that the content of the src attribute of audio needs to be converted to 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>

In this case, the resource file is placed in the assets Directory.

4. Restart the project or package and release the project to hear the sound.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.