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产生交互时，不允许播放器执行播放操作的，具体解决方案可另行查询，这边建议做一个类似弹窗的东西，引导用户产生交互动作。以上三个例子均由点击事件触发播放，因此不存在上述问题。