vue中添加mp3音频文件，无法播放？

Posted 2021-02-28 helloyoyo

当我们需要在Vue项目中添加音频文件时，发现放到assets目录下的时候并不能播放。

 

两种常见的配置方法：

方法一：将音频文件放在static目录中，然后进行调用

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

缺点：打包后的dist文件中会有两份音乐文件，一件是打包后的media媒体文件中打包的音乐文件，还有一份是static中的自己audio的文件夹。可删除~

 

方法二：给项目配置mp3格式的解析器（推荐~）

1、在webpack.base.conf.js中添加加载器，如下：

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

2、在vue-loader.conf.js文件中为audio的src属性添加转换属性选项，让vue-loader知道需要将audio的src 属性的内容转换为模块

module.exports = {
  loaders: utils.cssLoaders({
    sourceMap: sourceMapEnabled,
    extract: isProduction
  }),
  cssSourceMap: sourceMapEnabled,
  cacheBusting: config.dev.cacheBusting,
  transformToRequire: {
    video: [‘src‘, ‘poster‘],
    audio:‘src‘,  // 该属性
    source: ‘src‘,
    img: ‘src‘,
    image: ‘xlink:href‘
  }
}

3、在页面添加audio标签，引入资源即可，此时的资源放在assets目录下即可

<audio class=‘success‘ src="../assets/audios/bgm.mp3"></audio>

 

此时重新启动项目或者重新打包，即可听到声音