E企盈营销工具技术服务商 热线:4006-838-530

微信小程序webview使用audio标签播放音频文件时无法自动播放的问题

E企盈直播平台营销卖货系统

重点: 这个解决方法仍然最少还是需要点击一次才可以, 完全不点击就自动播放的方法暂时还是没有找到1. 背景我要实现的功能是语音导航, 需要将导航的信息通过文字转换成语音, 然后播放出来. 现在就差播放出来这一步.由于使用的是web-view, 所以无法使用微信原生提供的wx.createInnerAudioContext方法(jweixin-1.3.2.js 中没有 wx.createInnerAudioContext方法), 也看了下web-view中支持的其他音频播放JSSDK, 都跟需求不符合.所以就想到使用html5中的audio标签。 2. 问题描述在使用audio标签后发现,ios系统中,无法播放语音,找了很久只是在网上找到的说法是:ios中的audio没有自动播放功能,必须要有用户交互才可以播放。(从安全角度,以及流量角度看,这也是可以理解的)但是,对于我目前要实现的功能,没办法不停的让用户去点击操作。 3. 解决思路在网上找了各种解决方法,都是播放一次就行了, 但是基本也是要监听了点击事件的。所以就考虑看,能不能:不允许自动播放嘛…我就试试点击”开始导航”按钮的时候, 播放一段空的语音, 然后再需要导航的地方, 用代码去控制播放要的语音…结果一试,还真可以。(就怕以后IOS更新后,把这个地方给堵住了,目前我IOS版本是11.4.1,感觉是个漏洞) 4. 测试代码实现a. 小程序加入web-view, 并将src地址指测试页面:<web-view src=”{{url}}”></web-view>b. 测试页面代码:<script src=”plugins/jquery/jquery.min.js”></script><script>function playURL(url){alert(‘play: ‘ + url);$(“#audiome”).attr(“src”, url);var audio = $(“#audiome”)[0];audio.pause();audio.play();}function btnPlay(){/* 注意这一行playURL(”)如果点击按钮的时候, 不调用一下, 则ios中, 后续setInterval方法中的调用是无法播放出声音的*/playURL(”)setInterval(“playURL(‘https://xxx.xxx.xxx/speech/xxxxx.mp3’)”, 5000);}</script><body><input id=”btnTest” type=”button” οnclick=”btnPlay()” value=”Play”><audio id=”audiome”></audio></body>c. 代码解释:当点击Play按钮时, 调用了playURL(”), 播放一下无效的URL, 只是为了audio控件是由点击事件进行播放的. 随后的setInterval方法, 只是为了模拟多次异步的从服务器上获取语音文件进行播放.d. 尝试结果竟然这样是可以的…不算完美吧, 总算是绕过了无法自动播放的问题, 按照这个逻辑推断, 具体实现的时候, 页面中任何一个必须要点击的地方, 都可以作为触发点.微信小程序

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序webview使用audio标签播放音频文件时无法自动播放的问题
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏