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项目组件切换并自动播放音频的解决方案相关推荐

微信公众号网页 H5 video 标签自动播放
目录微信公众号网页 H5 video 标签自动播放问题描述解决方案微信公众号网页 H5 video 标签自动播放环境:微信公众号网页需求:H5 video 标签自动播放视频 video 标 ...
[vue] 分析下vue项目本地开发完成后部署到服务器后报404是什么原因呢？
[vue] 分析下vue项目本地开发完成后部署到服务器后报404是什么原因呢? 1.检查nginx配置,是否正确设置了资源映射条件: 2.检查vue.config.js中是否配置了publicPath ...
通过howler.js实现在Android下的微信浏览器自动播放音频
howler.js是一个把webaudio进行封装的一个js库,通过它可以轻松的对音频文件进行控制播放.暂停.甚至指定播放音频中的某个片段.以及加快等等,这里我们只关注它在微信浏览器中自动播放的问题, ...
Vue中使用can-autoplay插件实现浏览器不支持自动播放音频时提示点击
场景 Vue中使用speak-tts插件实现点击按钮后进行语音播报(TTS/文字转语音): Vue中使用speak-tts插件实现点击按钮后进行语音播报(TTS/文字转语音)_BADAO_LIUMAN ...
微信小程序进入某一页面自动播放背景音乐
前言:微信小程序进入某一个页面自动播放背景音乐,当退出这个页面时,音乐关闭 wxml代码: <audioloopid="greetings"src="https:/ ...
iOS下vue项目微信签名出错
一般情况下,我们是获取当前页面URL地址去请求后端得到微信签名,但是iOS下URL的解析机制与安卓不一样.特别是在vue这种spa页面中,iOS中默认是第一次进入应用的URL,这样就会导致签名错误.竟 ...
Vue——Windows 10下Vue项目启动步骤[vue-cli-service启动版本]
基本概念 vue-cli:A simple CLI for scaffolding Vue.js projects. 一个简单的Vue.js工程命令行脚手架工具. 官网:https://cli.vue ...
windows下vue项目启动步骤
原创,转载请标注引用地址,谢谢~ 前后端分离项目,要做前后端联动测试,没整过前端用vue, nodejs和webpack的开发管理方式.来回折腾终于把已经建好的vue项目启动起来,做个笔记记录下步骤备 ...
微信 android 平台应用签名错误,详解IOS微信上Vue单页面应用JSSDK签名失败解决方案...
背景手机型号: 型号:iphone 7 / iphone xs max 版本:ios 10.3.1 / ios 12.1 微信版本:WeChat 6.7.3 问题还原: Vue应用(vue-rout ...

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

ios微信下vue项目组件切换并自动播放音频的解决方案相关推荐

最新文章

热门文章