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()