Vue 3.0 加载 播放本地音频

最近在写一个生日贺卡的小网页（可以作为特别生日礼物送给想送的人），上面可以动效展示她的图片，和想对她说的话。播符合场景的音乐。最后，有个类似于微信红包的抽礼物环节，你可以把想送的礼物或者特别的愿望放里面。然后把做好的网页做成二维码送出去，

然后在里面做好一切，发现因为播放是有问题的。主要有意思三个问题。

1 静态音频资源加载不了报错

2 音频播放不了

3 音频不能再进入网页时自动播放

接下来我们来一一解决这些问题。网上没有和系统的来讲这个问题，我也是自己怕了很多坑才完成。就写一下，希望对别人有所帮助。

1 静态资源加载不了了

之前vue要加载静态资源，图片是放在 assets 文件夹里的。但是音频是不能直接也放在 assets文件夹里的。因为Vue自己写了格式解析器，图片就能很好的识别，音频放在assets 里面加载不了。 如果一定要这样玩，就要去配置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 属性的内容转换为模块。

  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 添加audio标签，引入资源文件

<audio autoplay="autoplay" 
       controls="controls"
       preload="auto"
       src="../assets/allright.mp3">
</audio>

此时的资源文件放置在assets目录下即可。

跟多细节参考： www.jianshu.com/p/ff6698eed…

我并没有用这种方法，看着有点麻烦

之前如果是音频文件可以放在 static目录中 也是可以进行调用的，但是你会发现到Vue3.0 后根本就没有static文件夹了。这是你会说拿自己创建一个不就好了，淡然可以，但是要在 vue.config.js 配置一下，让Vue认识。

 // 放置静态资源的地方 (js/css/img/font/...)
    assetsDir: "static",

这样就可以在代码中直接引入音频资源了。

2 音频播放不了

音频播放我没用其他插件用的是 audio

<audio ref="audio" id="audio">&nbsp;</audio>

Play(){

let audioPlay = this.$refs.audio;
audioPlay.src = this.playPath  //本地音频路劲
audioPlay.play()
audioPlay.onended = function() {
audioPlay.play();
}
}

上面的是修改过的，我之前不能播是因为我获取audio的时候用的是document.getElementById('audio') 这个是也可以获取到元素而且这个是html自带的，refs 获取有个优点是获取到的是渲染之后的，而前者就不一定。进入界面可能还没渲染完，导致获取不到。而且如果多次用 document.getElementById('audio') 可能产生多个对象，产生内耗。 $refs 只是获取 最后改了，就可以播了

3 音频不能再进入网页时自动播放

能播了就结束了吗？然鹅并没有，你会发现你虽然在进入页面的时候调用了播放，但是它是不会主动播的。为什么呢？因为google浏览器为了节约用户流量和强植入的广告或者什么是禁止音 视频自动播放的。只有在用户主动触发点击事件的时候才可以播放。 但你会发现，有很多进去自动播放的网页。肯定是可以解决的，别人行我应该也可以。然后就上网爬坑。有人说既然是主动点击可以触发，那我在进入界面的时候代码触发点击事件不就行了。然而我试了一下好像并不可行。最后发现了比较完美的解决方案

 Play(){

let audioPlay = this.$refs.audio;
audioPlay.src = this.playPath
if (window.WeixinJSBridge) {
                   window.WeixinJSBridge.invoke('getNetworkType', {}, (res) => {
// this.$refs.audio.load()
setTimeout(() => {
  audioPlay.play()
  audioPlay.onended = function() {
  audioPlay.play();
 }
 }, 300)
 })
} else {
             document.addEventListener('WeixinJSBridgeReady', () => {
          window.WeixinJSBridge.invoke('getNetworkType', {}, (res) => {
// this.$refs.audio.load()
setTimeout(() => {
audioPlay.play()

 }, 300)
 })
 }, false)
}

之所以有个300毫秒的延时是因为部分手机会出现js报错，加上后就没了。 这个 // this.$refs.audio.load() 感觉本地音频就没什么大必要了。

然后我的小生日贺卡就完成了，前前后后还是遇到很多坑的。但好赖解决了，希望碰到相同问题的小伙伴可以看到，节约一点时间。 我也是之前移动端开发转过来的，如果那里写的不太好，欢迎指正。