摘要：最近在做一个英语答题项目项目需求是通过答题取的成绩答题的题型是分为听音选图看图选词和填空题项目总共分为了个页面开始页答题页和结束页面答题页关于每种题型我做了相应的组件每次切换题目的时候显示对应的的组件要求听音选图的时候会自动播放音频惯例下的
最近在做一个英语答题项目 , 项目需求是通过答题取的成绩 , 答题的题型是分为 , 听音选图 , 看图选词 , 和填空题 . 项目总共分为了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()加载一次 ,否则后续也无法自动播放 ;
以上就是最近做项目时候的总结的一个方法 , 所有的测试均为个人测试 ,可能不具普适性 ,仅提供一种思路和解决方法 . 第一次写文章 ,可能有很多没写清楚的地方 ,截图内也有项目的一些需求代码 ,请忽视 .有错误的地方 还希望大佬们指正.
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/107409.html
摘要：避免在页面的主体布局中使用，要等其中的内容完全下载之后才会显示出来，显示比布局慢。实现多行文本溢出显示效果实现方法适用范围因使用了的扩展属性，该方法适用于浏览器及移动端 在过去的一年很多人不满于公司没有福利、人际关系不好相处、没有发展前途的境遇等等，想着在开年来换一份工作来重新开始自己，那么 你 准备好了吗？ 下面是本人整理的一份面试材料，本想自己用的，但是新年第一天 公司突然给了我个...
摘要：避免在页面的主体布局中使用，要等其中的内容完全下载之后才会显示出来，显示比布局慢。实现多行文本溢出显示效果实现方法适用范围因使用了的扩展属性，该方法适用于浏览器及移动端 在过去的一年很多人不满于公司没有福利、人际关系不好相处、没有发展前途的境遇等等，想着在开年来换一份工作来重新开始自己，那么 你 准备好了吗？ 下面是本人整理的一份面试材料，本想自己用的，但是新年第一天 公司突然给了我个...
摘要：调起的注意事项年初，微信下全面封禁了，所以在微信下是调不起的，暂时是没有什么办法。所以安卓下调不起是一件十分正常的事情。表示的包名，比如，表示调起的安卓下判断是否调起成功其实有一种方法可以判断安卓下是否调起成功。 背景 在H5页面或者app的webview中调起第三方app 核心 调起app是操作系统(iOS、Android)的机制，在h5页面，我们可以做的不多。 在调起之前，h5页面...
摘要：微信分享签名错误单页应用模式下微信分享一直提示签名错误按照微信官网文档，已经引入，正确的配置安全域名，后台开发人员生成的签名也通过微信签名工具验证，但是前端的自定义分享一直报签名错误，没有办法自定义分享，如果确保了哪些基本配置没有问题，并且 微信分享签名错误invalid signature vue单页应用history模式下微信分享一直提示签名错误invalid signature ...
阅读 3451·2021-11-24 09:39
阅读 2991·2019-08-30 15:56
阅读 1211·2019-08-30 15:55
阅读 839·2019-08-30 15:53
阅读 1716·2019-08-29 18:37
阅读 3439·2019-08-29 18:32
阅读 2951·2019-08-29 16:30
阅读 2692·2019-08-29 15:14
