vue中添加mp3音頻文件，無法播放？

當我們需要在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>

 

此時重新啟動項目或者重新打包，即可聽到聲音。