Vue实现动态src实现播放音频(audio标签)本地

项目场景：

技术场景：Vue2,iview

需求场景：公司项目要实现一个扫码枪录入条码，并在录入条码后动态播放一段音频。

---

问题描述

使用原生audio标签无法成功播放音频。

<div>
    <audio controls ref="audio">
        <source src="./扫描成功.mp3" />
     </audio>
</div> 

报错信息：

Uncaught (in promise) DOMException: Failed to load because no supported source was found.

---

原因分析：

无法读取音频文件；

音频文件需要import 或require()导入本地；

---

解决方案：

直接上代码咯！！

<div>
      <audio controls ref="audio">
        <source src="./扫描成功.mp3" />
      </audio>
    </div>
    <z-button @click="play('扫描成功.mp3')">播放1</z-button>
    <z-button @click="play('未命名文本3.mp3')">播放2</z-button>
<div>
<script>
    play(val) {
      let music = new Audio()
      // 这里获取播放路径
      music = require(`./${val}`)
      this.$refs.audio.src = music
      this.$nextTick(res => {
        const { audio } = this.$refs
        audio.load()
        audio.play()
      })
    }
</script>

例如：新建一个 Message 对象，并将读取到的数据存入 Message，然后 mHandler.obtainMessage(READ_DATA, bytes, -1, buffer).sendToTarget();换成 mHandler.sendMessage()。