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

重点: 这个解决方法仍然最少还是需要点击一次才可以, 完全不点击就自动播放的方法暂时还是没有找到

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" onclick="btnPlay()" value="Play">
<audio id="audiome"></audio>
</body>

c. 代码解释:

当点击Play按钮时, 调用了playURL(''), 播放一下无效的URL, 只是为了audio控件是由点击事件进行播放的. 随后的setInterval方法, 只是为了模拟多次异步的从服务器上获取语音文件进行播放.

d. 尝试结果

竟然这样是可以的...不算完美吧, 总算是绕过了无法自动播放的问题, 按照这个逻辑推断, 具体实现的时候, 页面中任何一个必须要点击的地方, 都可以作为触发点.

微信小程序web-view使用audio标签播放音频文件时无法自动播放的问题相关推荐

控制微信小程序web view的返回按钮
需求:点击web-view页面的左上角返回按钮时,显示弹窗,点击取消或确认后才能返回.(实际上点击返回按钮会直接返回上一页) 解决方法:由于webview使用的是微信浏览器打开的,我们可以使用js的H ...
微信小程序学习——view的显示与隐藏
微信小程序学习--view的显示与隐藏需要在全局数据块中,设定一个控制键. data: {......//省略其他代码showView: true}, 然后是在wxml中,view的class中设置 ...
微信小程序拍照视频上传php,微信小程序-拍照或选择图片并上传文件
微信小程序-拍照或选择图片并上传文件调用拍照API:https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-picture.html?t=201612 ...
微信小程序开发 - 实现pdf、word等格式文件上传到后端的方法
写在前面我发现,微信的wx.uploadFile接口限制好多,而且会经常性出现bug,所以今天搜了一上午的资料, 看看能不能不要通过这个接口上传multipart/form-data格式的文件. 后 ...
微信小程序打开项目提示读取project.config.json文件失败
前几天一个月薪35k的兄弟,给我推了一个人工智能学习网站,看了一段时间挺有意思的.包括语音识别.机器翻译等从基础到实战都有,很详细,分享给大家.大家及时保存,说不定啥时候就没了. 微信小程序打开项目提 ...
audio标签有的浏览器不支持音乐自动播放
audio标签有的浏览器不支持音乐自动播放 H5中的audio标签有的IOS设备和安卓设备不支持自动播放,也就是不支持autoplay属性,并且,这些浏览器只支持用户click点击事件触发audio. ...
微信小程序把view居中_初识微信小程序
"晓程序" 小程序连载笔记,通俗易懂,欢迎各位转发关注学习.未经作者授权,禁止转载初识小程序什么是微信小程序微信小程序,小程序的一种,英文名Wechat Mini Progr ...
微信小程序首行缩进 text 标签 text-indent 不起作用
一.y微信小程序首行缩进,text标签中text-indent是不起作用的使用view标签代替text标签,text-indent:2em是可以起到首行缩进作用的. 二.皕杰报表连接数据库失败,请检 ...
微信小程序－view的创建和使用
今天写第一篇关于微信小程序的学习,view的创建和使用. 微信小程序开发需要学习基本的标签,这对我来说是一个挑战,不过加油啊. 1.创建一个View 在wxml中 <view class=& ...

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

微信小程序web-view使用audio标签播放音频文件时无法自动播放的问题相关推荐

最新文章

热门文章