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

Source: Internet
Author: User

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.