Vue 使用Audio或AudioContext播放本地音频

使用Audio 第一种 使用标签方式
    <audio src="./tests.mp3" ref="audio"></audio>
    <el-button @click="audioPlay()">播放Audio</el-button>
    audioPlay() {
      this.$refs.audio.currentTime = 0;
      this.$refs.audio.play();
      // this.$refs.audio.pause(); //暂停
    },
使用Audio 第二种 利用js构建Audio对象
audioJs() {
    var audio = new Audio();
    var url = require("./tests.mp3");
    audio.src = url;
    // audio.loop = true; //设置循环播放
    audio.play();
    // audio.pause(); //暂停
},
使用AudioContext播放
<template>
  <div>
    <el-button @click="playAudio()" v-show="!hasPlay">播放</el-button>
    <el-button @click="resumeAudio()" v-show="hasPlay">{{
      isPause ? "继续" : "暂停"
    }}</el-button>
    <el-button @click="stopAudio()" v-show="hasPlay">结束</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ctx: null,
      source: null,
      loop: false, //是否循环
      hasPlay: false, //是否播放 助变量 可忽略辅
      isPause: false, //是否暂停 助变量 可忽略辅
    };
  },
  methods: {
    // 播放
    async playAudio() {
      this.ctx = new (window.AudioContext || window.webkitAudioContext())();
      this.source = this.ctx.createBufferSource(); // 创建音频源头姐点
      const audioBuffer = await this.loadAudio();
      this.playSound(audioBuffer);
    },
    async loadAudio() {
      // const audioUrl = require("./test.mp3");
      const audioUrl = require("./tests.mp3");
      const res = await fetch(audioUrl);
      const arrayBuffer = await res.arrayBuffer(); // byte array字节数组
      const audioBuffer = await this.ctx.decodeAudioData(
        arrayBuffer,
        function (decodeData) {
          return decodeData;
        }
      );
      return audioBuffer;
    },
    async playSound(audioBuffer) {
      this.source.buffer = audioBuffer; // 设置数据
      this.source.loop = this.loop; //设置,循环播放
      this.source.connect(this.ctx.destination); // 头尾相连
      // 可以对音频做任何控制
      this.source.start(0); //立即播放
      this.hasPlay = true;
    },
    // 暂停
    async resumeAudio() {
      if (this.ctx.state === "running") {
        this.ctx.suspend();
        this.isPause = true;
      } else if (this.ctx.state === "suspended") {
        this.ctx.resume();
        this.isPause = false;
      }
    },
    // 结束
    async stopAudio() {
      this.source.stop();
      this.hasPlay = false;
      this.isPause = false;
    },
  },
};
</script>
需要注意的是,以谷歌播放器为例,用户还没有跟document产生交互时,不允许播放器执行播放操作的,具体解决方案可另行查询,这边建议做一个类似弹窗的东西,引导用户产生交互动作。以上三个例子均由点击事件触发播放,因此不存在上述问题。
相关推荐
逐·風3 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫3 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦4 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子4 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山5 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享5 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
程序媛小果5 小时前
基于java+SpringBoot+Vue的旅游管理系统设计与实现
java·vue.js·spring boot
从兄6 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
凉辰7 小时前
设计模式 策略模式 场景Vue (技术提升)
vue.js·设计模式·策略模式
清灵xmf7 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询