重点: 这个解决方法仍然最少还是需要点击一次才可以, 完全不点击就自动播放的方法暂时还是没有找到
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. 尝试结果
竟然这样是可以的...不算完美吧, 总算是绕过了无法自动播放的问题, 按照这个逻辑推断, 具体实现的时候, 页面中任何一个必须要点击的地方, 都可以作为触发点.
