最近在做一个英语答题项目,项目需求是通过答题取的成绩,答题的题型是分为,听音选图,看图选词,和填空题。项目总共分为了3个页面,开始页,答题页和结束页面,答题页关于每种题型,我做了相应的组件,每次切换题目的时候,显示对应的的组件,要求听音选图的时候会自动播放音频。
惯例,ios下的safari和微信内置浏览器都不支持音频的自动播放,通常的解决方案都是通过<代码> document.addEventListener (WeixinJSBridgeReady,函数(){audio.play()},假> removeEventListener>
1。从首页面到答题页面是路由切换的,但是处于开始页面时候,WeixinJSBridgeReady这个事件已经加载完了,跳转到答疑页面的时候已经无法监听到该事件了,
2。首页就是答题页面的时候,在题型组件切换的时候只会在第一次加载听力题型的时候会自动播放,再次切换到这种题目的时候无法再次自动播放。
经过不断的测试,发现ios下不支持的原因是不支持动态创建的音频标签自动播放,包括页面第一次加载,所以转化了思路,把音频标签放在顶层的应用程序。vue里面,不随着组件的切换创建和销毁,然后在应用。vue里面写一个的方法,接受src和回调的参数,在主要。js挂在全局上,每次切换的时候,调用该方法传入对应的src,代码如下:App.vue
(关于为什么用文档。getElementById,其实本来是准备参用美元的,但是不知为何在应用。vue中无法获取,控制台打印的$ ref能看到有音频了,但是不可读)
main.js
