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

最新推荐文章于 2025-04-12 13:46:47 发布

原创最新推荐文章于 2025-04-12 13:46:47 发布 · 3.6k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#音视频

在Vue2和iview的技术场景下，遇到使用audio标签无法播放条码扫描成功提示音的问题。错误信息显示找不到支持的源。原因是音频文件需通过import或require导入。解决方案是使用require动态获取音频路径，然后加载并播放音频。提供了一个play方法，通过点击按钮触发播放不同音频的例子。

项目场景：

技术场景：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()。