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

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

惯例 , ios下的safari和微信内置浏览器都不支持audio的自动播放 , 通常的解决方案都是通过 document.addEventListener('WeixinJSBridgeReady',function(){audio.play()},false) 来实现的自动播放 , 但是 WeixinJSBridgeReady 事件从页面加载开始到结束只会加载一次 ,  而且不能通过 removeEventListener 来移除 , 所以会有两个问题:

1.从首页面到答题页面是路由切换的 , 但是处于开始页面时候 , WeixinJSBridgeReady这个事件已经加载完了 , 跳转到答疑页面的时候已经无法监听到该事件了;

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

经过不断的测试 , 发现ios下不支持的原因是 不支持动态创建的audio标签自动播放 , 包括页面第一次加载 , 所以转化了思路 ,把audio标签放在顶层的App.vue里面 , 不随着组件的切换创建和销毁 , 然后在App.vue里面写一个的方法 , 接受src和callback的参数 , 在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()加载一次 ,否则后续也无法自动播放 ;

总结