当前位置: 首页 > Web前端 > HTML5

处理Google自2018年更新后的Audio报错问题(未完全解决,待更新)

时间:2023-04-05 16:51:13 HTML5

写一个商城后台系统需要有新订单时有提示音....首先想到的mind是在html中创建一个Audiob标签或者js创建,当有订单通知的时候执行audio.play(),然后在谷歌浏览器上会看到错误信息:`Uncaught(inpromise)DOMException:play()`的意思其他浏览器不允许您执行播放音频的操作,因为Chrome的自动播放政策在2018年4月更改。更改后,音乐的自动播放仅在以下集中情况下有效:有用户操作(单击,点击,etc)对于桌面程序,用户已经提前播放了音频对于移动用户,音频URL主屏幕知道原因,你用鼠标点击页面,消息再次出现时不会报错,并且有会有提示音,但当用户不操作时,总是需要解决错误。百度给出的答案基本是修改浏览器配置,在url中输入chrome://flags/#autoplay-policy,然后在Autoplaypolicy中将Default改为Nousergestureisrequired,最后点击“RELAUNCHNOW”下面,你完成了!作为一名程序员,一定不能让用户修改浏览器配置,以上方法会增长你的见识。虽然百度没有找到Audio标签的解决方法,但是在浏览器中找到了一个音频APIAudioContextplayAudio(){//有订单时调用这个方法window.AudioContext=window.AudioContext||window.webkitAudioContext||窗口.mozAudioContext||窗口.msAudioContext;尝试{varcontext=newwindow.AudioContext();;变量源=空;varaudioBuffer=null;functionstopSound(){if(source){source.stop(0);//立即停止}}functionplaySound(){source=context.createBufferSource();source.buffer=audioBuffer;source.loop=true;//循环source.connect(context.destination);来源.开始(0);//立即播放}functioninitSound(arrayBuffer){context.decodeAudioData(arrayBuffer,function(buffer){//解码成功时的回调函数audioBuffer=buffer;playSound();},function(e){//解码失败时的回调函数console.log('E错误解码文件',e);});}functionloadAudioFile(url){varxhr=newXMLHttpRequest();//通过XHR下载音频文件xhr.open('GET',url,true);xhr.responseType='arraybuffer';xhr.onload=function(e){//下载完成的initSound(this.response);};xhr.发送();}loadAudioFile('../../../static/mp3/12774.wav');vart=setTimeout(function(){context.close()//两秒后关闭,释放所有占用的系统资源},2000);}catch(e){console.log('!您的浏览器不支持AudioContext');}},切换到AudioContext后,即使用户没有进行交互操作,浏览器也不会报红色错误,而是黄色警告。虽然这个bug还没有完全解决,但是又学到了一个知识点,值得记录,完整的处理方法稍后更新