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

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

当我们需要在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>

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

以上是 vue中添加mp3音频文件，无法播放？ 的全部内容， 来源链接： utcz.com/z/376267.html

回到顶部