解决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()
加载一次 ,否则后续也无法自动播放 ;
总结
以上所述是小编给大家介绍的解决ios微信下vue项目组件切换并自动播放音频问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
- 《微信小程序七日谈》- 第二天:你可能要抛弃原来的响应式开发思维
- 《微信小程序七日谈》- 第三天:玩转Page组件的生命周期
- 《微信小程序七日谈》- 第四天:页面路径最多五层?导航可以这么玩
- 《微信小程序七日谈》- 第五天:你可能要在登录功能上花费大力气
- 《微信小程序七日谈》- 第六天:小程序devtool隐藏的秘密
- boi剖析 - 基于webpack的css sprites实现方案
- 深入JDK源码之ThreadLocal类
- 独家 | 一文读懂TensorFlow基础
- Webpack中hash与chunkhash的区别,以及js与css的hash指纹解耦方案
- RPC原理及实现
- RMI原理及实现
- webpack多页面开发与懒加载hash解决方案
- 前后端分离和模块化-58到家微信首页重构之路
- Node.js建站笔记-使用react和react-router取代Backbone
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 使用Keras训练好的.h5模型来测试一个实例
- python中查看.db文件中表格的名字及表格中的字段操作
- Ubuntu 16.04中Laravel5.4升级到5.6的步骤
- PHP SESSION机制的理解与实例
- Yii支持多域名cors原理的实现
- PHP实现的pdo连接数据库并插入数据功能简单示例
- php基于Redis消息队列实现的消息推送的方法
- mongodb和php的用法详解
- php多进程模拟并发事务产生的问题小结
- PHP中命名空间的使用例子
- 基于Python 的语音重采样函数解析
- TensorFlow的环境配置与安装教程详解(win10+GeForce GTX1060+CUDA 9.0+cuDNN7.3+tensorflow-gpu 1.12.0+python3.5.5)
- Keras模型转成tensorflow的.pb操作
- php使用array_chunk函数将一个数组分割成多个数组
- keras读取训练好的模型参数并把参数赋值给其它模型详解