网站建设资讯

NEWS

网站建设资讯

vue中实现解决chrome浏览器自动播放音频和MP3语音打包到线上-创新互联

本篇文章为大家展示了vue中实现解决chrome浏览器自动播放音频和MP3语音打包到线上,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。

成都创新互联公司是一家专业提供武定企业网站建设,专注与网站建设、网站设计H5响应式网站、小程序制作等业务。10年已为武定众多企业、政府机构等服务。创新互联专业网站设计公司优惠进行中。

一、vue中解决chrome浏览器自动播放音频

需求

有新订单的时候,页面自动语音提示和弹出提示框;

问题

chrome浏览器在18年4月起,就在桌面浏览器全面禁止了音视频的自动播放功能。严格地来说,是Chrome不允许在用户对网页进行触发之前播放音频。不光是这样,在页面加载完毕的情况下,用户没有click、dbclick、touch等主动交互行为,使用js直接调用.play() 方法的话,chrome都会抛出如下错误:Uncaught (in promise) DOMException;

解决

在网上找了很多方法都不行,最后试出一种可行:语音播放显示出来才可以自动播放语音,如下图;

vue中实现解决chrome浏览器自动播放音频和MP3语音打包到线上

上代码:

//这里就是语音播放器,必须显示出来

//这里是调用语音播放
this.$refs.audio.currentTime = 0;
this.$refs.audio.play();

分享名称:vue中实现解决chrome浏览器自动播放音频和MP3语音打包到线上-创新互联
文章来源:http://cdweb.net/article/doejjo.html