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

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);
}

至此，完美解决~

---

2021-06-26追更

目前实现不了用户一打开页面就自动播放声音，必须用户有交互之后才行，比如弹个窗口，用户点了确认，或者用户有输入，点击等等交互都行。

---

如果看了觉得有帮助的，我是@鹏多多i，欢迎 点赞 关注 评论；
END

公众号

往期文章

• 微信小程序实现上传多张本地图片到服务器和图片预览
• JS实用方法DataUrl转为File、url转base64
• 微信小程序API交互的自定义封装

个人主页

• CSDN
• GitHub
• 简书
• 博客园
• 掘金