微信开发常见问题:自动音乐播放,alert 显示网址
前言
在做各种HTML5场景页面的时候,插入背景音乐是一个很普遍的需求。我们都知道,IOS下的safari是无法自动播放音乐的,以至一直以来造成一种错误的认识,iso是无法自动播放媒体资源的。直到微信火爆起来,我们发现IOS的微信里面打开的页面却可以实现自动播放。这种情况颠覆了我之前的认知。但是,但是。。。最近的项目,又发现了一个头疼的问题。部分的IOS微信,打开有自动播放背景音乐的页面没有声音!!最头疼的是同款机子,相同的IOS系统,相同的微信版本!!没错,前端就是要经常这么折腾的,同一个问题,你以为找到了最终的解决方案,但是各种浏览器更新快速,昨天没问题,也许今天就有问题了。还好,这个问题暂时找到原因了,详情请看下文。
解决方案
先看下平时使用audio标签插入背景音乐的代码:
正常来说,上面的写法在安卓和大部分IOS机子的微信是可以播放的(safari这里就忽略讨论),可以扫一扫demo测试下你的手机:
如果上面的demo,你的ios微信可以播放,说明你的是大部分正常的手机。如果不能播放,哈哈,你成为了少部分不能正常播放的幸运者。。。
那代码有办法解决这少部分用户呢?如何解决呢?
答案的关键就是微信的WeixinJSBridgeReady事件。这个是微信自带提供的事件,测试发现,上面说的少部分的机子微信只要做微信ready后执行播放,就可以用代码实现自动播放功能了!具体代码请看下面:
<audio id="Jaudio" class="media-audio" src="http://game.163.com/weixin/gfxm3_gc/images/bg.mp3" preload loop="loop"></audio >
function audioAutoPlay(id){var audio = document.getElementById(id);audio.play();document.addEventListener("WeixinJSBridgeReady", function () {audio.play();}, false);
}
audioAutoPlay(‘Jaudio’);
刚才如果你第一个demo不能播放的童鞋可以再扫一扫测试下(如果第一个demo已经测试正常的,这个肯定是正常的啦)
是不是听到声音了呢?!!解决方案就是这么简单。
后语
总结下吧,关于音乐自动播放的问题,现在可以分为三种:
1-支持audio的autoplay,大部分安卓机子的自带浏览器和微信,大部分的IOS微信(无需特殊解决)
2-不支持audio的autoplay,部分的IOS微信(本文提供的解决方案)
3-不支持audio的autoplay,部分的安卓机子的自带浏览器(比如小米,开始模仿safari)和全部的ios safari(这种只能做用户触屏时就触发播放了)
那么针对已知的三种情况,关于自动播放背景音乐的问题,我们来总结一下综合解决方案代码吧:
```javascript
<audio id="Jaudio" class="media-audio" src="http://game.163.com/weixin/gfxm3_gc/images/bg.mp3" preload loop="loop"></audio >
function audioAutoPlay(id){var audio = document.getElementById(id),play = function(){audio.play();document.removeEventListener("touchstart",play, false);};audio.play();document.addEventListener("WeixinJSBridgeReady", function () {//微信play();}, false);document.addEventListener('YixinJSBridgeReady', function() {//易信play();}, false);document.addEventListener("touchstart",play, false);
}
audioAutoPlay('Jaudio');
二、alert弹窗网址
如图所示,iOS版本的微信中alert弹框上部会有当前项目的服务器地址解决办法很简单,将下面代码粘贴到你的初始页面中即可```javascript
window.alert = function(name){var iframe = document.createElement("IFRAME");iframe.style.display="none";iframe.setAttribute("src", 'data:text/plain,');document.documentElement.appendChild(iframe);window.frames[0].window.alert(name);iframe.parentNode.removeChild(iframe);
}
三。微信缓存图片导致无法实时更新
可以在图片/css 资源路径后面加上
tp框架下的写法↓↓
?time=<php> echo time()</php>
四。微信jssdk关闭页面方法
setTimeout(function () {wx.closeWindow();},1500);
用setTimeout主要是兼容IOS。
微信开发常见问题:自动音乐播放,alert 显示网址相关推荐
- 微信小程序实现音乐播放器(5)
文章目录 前情提要 pubsubjs实现页面通信 moment.js实现时间格式化 BackgroundAudioManager 小程序项目 app.json app.wxss app.js page ...
- OPhone程序开发入门之音乐播放器
OPhone程序开发入门之音乐播放器 OPhone平台提供了完整的多媒体解决方案.为开发者提供了统一的,简单易用的开发接口.本文首先介绍了OPhone平台的多媒体框架,然后详细介绍了 在OPhone平 ...
- 好程序员前端分享使用JS开发简单的音乐播放器
好程序员前端分享使用JS开发简单的音乐播放器,最近,我们在教学生使用JavaScript,今天就带大家开发一款简单的音乐播放器.首先,最终效果如图所示: 首先,我们来编写html界面index.htm ...
- html5音乐播放器设计论文,基于微信小程序的音乐播放器设计和毕业论文
摘 要 随着通信技术的发展和智能设备的普及,移动互联网在近两年发展迅猛,新兴的移动社交软件"微信"逐渐走进了手机用户的生活,深受全国数亿用户的欢迎.随着微信版本的不断更新,微信也 ...
- 微信小程序实现音乐播放器(2)
文章目录 前情提要 BackgroundAudioManager API:wx.setNavigationBarTitle() 搭建静态资源服务器 小程序项目 app.json app.wxss pa ...
- 微信小程序之音乐播放
微信小程序之音乐播放 这次用的是API中的wx.createInnerAudioContext()接口 (创建内部 audio 上下文 InnerAudioContext 对象.) InnerAudi ...
- java计算机毕业设计vue开发一个简单音乐播放器源码+mysql数据库+系统+lw文档+部署
java计算机毕业设计vue开发一个简单音乐播放器源码+mysql数据库+系统+lw文档+部署 java计算机毕业设计vue开发一个简单音乐播放器源码+mysql数据库+系统+lw文档+部署 本源码技 ...
- 基于MSP430G2553官方开发板的音乐播放器
基于MSP430G2553官方开发板的音乐播放器 实现目标 硬件资源 芯片资源使用情况 外接硬件 程序实现 开发环境配置 各部分硬件驱动 主循环功能实现 实现目标 实现以蜂鸣器为播放设备,能够对简谱乐 ...
- 搬砖之路----MusicPlayer 一个基于Vlc(2.0+)开发的android音乐播放器--浅析在android开发过程中播放器选择之路!
前言 MusicPlayer 是一款基于vlc播放器开发的一个音乐播放器,你也可以理解为在此核心上的搬砖之路,核心的内容并不是我写的,因此在正式写blog之前,感谢那些vlc核心的开发人员让我用到这么 ...
- java计算机毕业设计vue开发一个简单音乐播放器MyBatis+系统+LW文档+源码+调试部署
java计算机毕业设计vue开发一个简单音乐播放器MyBatis+系统+LW文档+源码+调试部署 java计算机毕业设计vue开发一个简单音乐播放器MyBatis+系统+LW文档+源码+调试部署 本源 ...
最新文章
- 2022-2028年中国镀金属膜行业市场研究及前瞻分析报告
- 麦肯锡顾问的核心意识:成果决定价值
- c++常见的排序表与复杂度
- node配置ssl证书_在Linux服务器上部署node项目(git部署,forever持续运行,配置SSL证书)...
- ActiveMQ简单介绍+简单实例
- java datasource mysql_java – 添加新的Datasource(mysql)wildfly
- IntelliJ IDEA激活破解有效方法
- Sublime Text安装及配置Python3
- 小爱同学app安卓版_小爱同学手机版安卓下载_小爱同学app下载 v2.7.43 - 87G手游网...
- 新pop账户服务器信息,添加 POP 账户
- [分布式系列]Gossip协议
- 【网络】Padavan 路由器固件开启教育网 IPv6
- html中绝对定位的父级,【CSS学习笔记】绝对定位的父类参照物的确定
- 今天脚被蜈蚣“啃”了
- 【小程序源码】头像组合多种分类并支持姓氏头像制作生成
- 小型机、PC服务器、大型机常识
- 【Windows7系统装什么浏览器好用】
- linux动画制作软件,你也可以成为设计师!宫崎骏御用2D动画制作软件
- 查看手机包名方法介绍
- 如何用晶体管进行计算