ios微信下vue项目组件切换并自动播放音频的解决方案

Posted by Cai jian on 2018-08-22

最近在做一个英语答题项目 , 项目需求是通过答题取的成绩 , 答题的题型是分为 , 听音选图 , 看图选词 , 和填空题 . 项目总共分为了3个页面 , 开始页 ,答题页 和结束页面 ,答题页关于每种题型 , 我做了相应的组件 , 每次切换题目的时候 ,显示对应的的组件 , 要求听音选图的时候会自动播放音频 .

惯例 , ios下的safari和微信内置浏览器都不支持audio的自动播放 , 通常的解决方案都是通过document.addEventListener('WeixinJSBridgeReady',function(){audio.play()},false)
来实现的自动播放 , 但是WeixinJSBridgeReady
事件从页面加载开始到结束只会执行一次 , 而且通过removeEventListener来移除后就无法再次监听到,除非刷新页面, 所以会有两个问题:
1.从首页面到答题页面是路由切换的 , 但是处于开始页面时候 , WeixinJSBridgeReady这个事件已经加载完了 , 跳转到答疑页面的时候已经无法监听到该事件了;

2.首页就是答题页面的时候,在题型组件切换的时候只会在第一次加载听力题型的时候会自动播放 , 再次切换到这种题目的时候无法再次自动播放 .

经过不断的测试 , 发现ios下不支持的原因是 不支持动态创建的audio标签自动播放 , 包括页面第一次加载 , 所以转化了思路 ,把audio标签放在顶层的App.vue里面 , 不随着组件的切换创建和销毁 , 然后在App.vue里面写一个的方法 , 接受srccallback的参数 , 在main.js挂在全局上, 每次切换的时候 ,调用该方法传入对应的src , 代码如下:App.vue


(关于为什么用document.getElementById , 其实本来是准备用$refs的 , 但是不知为何在app.vue中无法获取 , 控制台打印的$ref能看到有audio 了, 但是不可读)

main.js

组件内:

这里要注意的两点:
1.app.vue中的audio标签必须设置 controls , 然后通过css隐藏该audio ,否则无法播放 ;

2.在页面加载的时候需要通过 监听 document.addEventListener('WeixinJSBridgeReady',function(){audio.load()},false) 让audio.load()加载一次 ,否则后续也无法自动播放 ;

以上就是最近做项目时候的总结的一个方法 , 所有的测试均为个人测试 ,可能不具普适性 ,仅提供一种思路和解决方法 . 第一次写文章 ,可能有很多没写清楚的地方 ,截图内也有项目的一些需求代码 ,请忽视 .有错误的地方 还希望大佬们指正.