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

　　介绍

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

<强>需求

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

<强>问题

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

<强>解决

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

上代码:

//这里就是语音播放器,必须显示出来　　& lt;音频控制=癱ontrols":src=https://www.yisu.com/zixun/鄙簟皉ef=耙羝怠? //这里是调用语音播放　　refs.audio美元。currentTime=0; 　　美元。refs.audio.play ();

功能的全部代码:

& lt; div> 　　& lt; v-btn颜色=笆襩ighten-1"@click=癶andleDispatch"small> & lt; v-icon left> mdi-account</v-icon>人工派单& lt;/v-btn>//这里就是语音播放器,必须显示出来　　& lt;音频控制=癱ontrols":src=https://www.yisu.com/zixun/鄙簟皉ef=耙羝怠? 　　

　　　　<脚本>//语音的路径(这样引入是方便打包上,传下面有介绍) 　　进口的声音从“@ 1./资产/声音/mp3”; 　　出口默认{ 　　数据(){ 　　返回{ 　　声音:听起来, 　　} 　　} 　　安装(){//这是列表的分页查询　　this.getLinePageWithParams ();//这里因为后端没使用websocket,就1分钟循环调用一次; 　　这一点。计时器=setInterval (()=> { 　　this.newOreder (); 　　},60000); 　　}, 　　　　方法:{ 　　newOreder () { 　　api.main.op_order_existNewOrder_get ()。然后(res=> { 　　如果(res.data.success) {//res.data.data后端返回的是否有新订的单,有:正确;没有:假　　如果(res.data.data) { 　　refs.audio美元。currentTime=0; 　　美元。refs.audio.play ();//ui元素右上角提示窗　　通知({美元。　　标题:“新订单”, 　　消息:“您有新的订单待处理”, 　　}); 　　this.getLinePageWithParams (); 　　} 　　} 　　返回res; 　　}) 　　.catch (()=> {}); 　　}, 　　}

去看webpack.config。js文件的配置,这里MP3会打包到媒体文件,但是没生成;

{ 　　测试:/\ mp4。| webm | ogg | | mp3 wav | flac | aac)(\, # 63;。*), # 63;美元/, 　　用途:[ 　　{ 　　装载机:& # 39;url-loader& # 39; 　　选择:{ 　　限制:4096 　　回退:{ 　　装载机:& # 39;file-loader& # 39; 　　选择:{ 　　　　名称:& # 39;媒体/[名字]。[散列:8]。[ext] & # 39;, 　　}, 　　}, 　　}, 　　}, 　　), 　　},

最后去看webpack官方文档,解决是要在使用语音的地方,当模块进口引入,才会打包;

& lt; script>//语音的路径(当模块引入,webpack好将MP3打包) 　　从& # 39;进口声音@ 1./资产/声音/mp3 # 39;; 　　出口默认{ 　　数据(){ 　　返回{ 　　声音:听起来, 　　} 　　}

最后就打包成功

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

最后看到一种,直接URL使用百度播报,我没试过。啊,他的微博:https://www.cnblogs.com/gfweb/p/11726365.html

1,在工具文件夹跑龙套,创建一个js文件(voicePrompt。js)

函数voicePrompt(文本){
　　新音频(& # 39;http://tts.baidu.com/text2audio& # 63; cuid=baiduid&局域网=zh& ctp=1, pdt=311,特克斯=& # 39;+文本).play ();
　　}
　　
　　{出口
　　voicePrompt
　　}

2在分钟。js

进口*从& # 39;voicePromptFun。/跑龙套voicePrompt& # 39;
　　Vue.prototype。voicePrompt=voicePromptFun。voicePrompt//语音提醒

3在其他页面调用

this.voicePrompt(& # 39;皮卡丘& # 39;);

上述内容就是vue中实现解决chrome浏览器自动播放音频和MP3语音打包到线上,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注行业资讯频道。