vue项目JS播放音频音效和背景音乐

最新推荐文章于 2024-08-09 09:32:19 发布

鹏多多.

最新推荐文章于 2024-08-09 09:32:19 发布

阅读量5.8k

点赞数 4

分类专栏： Vue3 Vue2 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/pdd11997110103/article/details/108476777

版权

Vue3 同时被 2 个专栏收录

28 篇文章 7 订阅

订阅专栏

4 篇文章 0 订阅

订阅专栏

1，起因

最近在做一个线上直播互动课堂的Vue项目，里面有一些这样的交互：老师奖励学生A一个奖章，要自动播放得奖的音效。

2，摸索过程

直接写一个function

myPlay(){
    let mp3 = new Audio();
    mp3.src = "./奖励的声音.mp3";
    mp3.load();
    mp3.play();
    setTimeout(() => {
        mp3.pause();
    }, 3000);
}

结果一直报错

度娘告诉我，浏览器18年更新后抽风了，谷歌66版本以上不允许Audio自动播放，必须要用户交互发生后才能播放，但是我疯狂触发事件交互，还是报错。所以我改用Web AudioContext;

async myPlay() {
	const audioContext = new AudioContext();
    const  res = await fetch('./倒计时的声音.mp3');
    const arraybuffer = await res.arrayBuffer();
    const audioBuffer = await audioContext.decodeAudioData(arraybuffer);
    const source = audioContext.createBufferSource();
    source.connect(audioContext.destination); //连接上实例
    source.buffer = audioBuffer;
    source.start();//播放
    setTimeout(() => {
        source.stop();//停止
    }, 3000);
}

结果还是不行…而且最后铃声播放地址改成了网络地址，解码需要转为arraybuffer格式，比较麻烦(其实是不会)，于是又换了种方法。

3，功能实现

在html中写上audio标签，带上hidden属性。

<audio controls="controls" hidden :src="'https://www.xxxx" ref="audio"></audio>

在methods中定义方法。

playMusic(type) {
  this.$refs.audio.currentTime = 0;//从头开始播放
  this.$refs.audio.play(); //播放
  setTimeout(()=>{
    this.$refs.audio.pause();//停止
  },3000);
}