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产生交互时,不允许播放器执行播放操作的,具体解决方案可另行查询,这边建议做一个类似弹窗的东西,引导用户产生交互动作。以上三个例子均由点击事件触发播放,因此不存在上述问题。
相关推荐
Mr_Xuhhh1 小时前
重生之我在学环境变量
linux·运维·服务器·前端·chrome·算法
永乐春秋2 小时前
WEB攻防-通用漏洞&文件上传&js验证&mime&user.ini&语言特性
前端
鸽鸽程序猿2 小时前
【前端】CSS
前端·css
ggdpzhk2 小时前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
runing_an_min2 小时前
ffmpeg视频滤镜:提取缩略图-framestep
ffmpeg·音视频·framestep
小曲曲3 小时前
接口上传视频和oss直传视频到阿里云组件
javascript·阿里云·音视频
学不会•4 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
安静读书5 小时前
Python解析视频FPS(帧率)、分辨率信息
python·opencv·音视频
佑华硬盘拷贝机5 小时前
音频档案批量拷贝:专业SD拷贝机解决方案
音视频
EasyNVR6 小时前
NVR管理平台EasyNVR多个NVR同时管理:全方位安防监控视频融合云平台方案
安全·音视频·监控·视频监控