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()加载一次 ,不然后续也没法自动播放 ;

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