<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Auto play html audio in iOS WeChat InAppBrowser the right way</title>
</head>
<body>
<h1>在 iOS 微信浏览器中自动播放 HTML5 audio(音乐) 的正确方式</h1>
<p>核心原理: 在微信的JS-API 中 play 一下 audio 即可达到自动播放的目的(应该是微信自己做了处理)</p>
<br>
<br>
<br>
<audio id="bgmusic" src="http://oj1hxt5z0.bkt.clouddn.com/123.mp3" autoplay preload loop controls></audio>
<!-- 当使用方法1时必须加载 JS-SDK 的 JS 文件, 方法2不需要加载这个 JS -->
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
// 方法1: 现在微信官方已经推出了微信JS-SDK, 最好还是不要使用"野生"方式, 因为不知道什么时候就可以不能用了!
// http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
// 通过config接口注入权限验证配置后, 在 ready 中 play 一下 audio
function autoPlayAudio1() {
wx.config({
// 配置信息, 即使不正确也能使用 wx.ready
debug: false,
appId: '',
timestamp: 1,
nonceStr: '',
signature: '',
jsApiList: []
});
wx.ready(function() {
document.getElementById('bgmusic').play();
});
}
// 方法2: "野生"方法, 借用原来老的 WeixinJSBridge
function autoPlayAudio2() {
window.onload = function() {
// alert(typeof WeixinJSBridge);
WeixinJSBridge.invoke('getNetworkType', {}, function(e) {
// 在这里拿到 e.err_msg, 这里面就包含了所有的网络类型
// alert(e.err_msg);
document.getElementById('bgmusic').play();
});
};
}
// 大家或多或少都知道 iOS Safari 不允许自动播放 audio, 可能已经被坑过了,
// 但微信内嵌的浏览器应该是做了一些定制化, 允许自动播放 audio.
// 测试了以下机型在微信内嵌浏览器中仅需设置 audio autoplay 即可自动播放(audio)音乐, 无需特殊处理.
// * iPhone5 iOS 7.0.6 WeChat 6.2
// * iPhone5s iOS 8.1.2 WeChat 6.3.7
// * iPhone6Plus iOS 8.1.3 WeChat 6.3.7
// * MI1S Android 4.1.2 WeChat 6.3.7
//
// 但是当手机是 iPhone6s iOS 9.1 WeChat 6.3.7 时, 必须做如下特殊处理才能在微信中自动播放(audio)音乐,
// 我可以推测是 iOS 9 的兼容性问题么?
//
autoPlayAudio1(); // 推荐使用方法1
// autoPlayAudio2(); // 也可以试一试方法2
</script>
</body>
</html>

在iOS微信浏览器中自动播放HTML5 audio(音乐)的2种正确方式的更多相关文章

  1. 【bug解决】ios微信浏览器中背景音乐无法播放

    我记得之前在一次项目中,出现过浏览报错: 当时的文档链接如右:[解决]HTML5新标签audio的autoplay自动播放属性失效的解决方案 所以在这次H5的制作中,我使用了iframe来加载音频文件 ...

  2. [JavaScript] audio在浏览器中自动播放

    audio 在浏览器中自动播放 autoplay 属性 autoplay 属性规定一旦音频就绪马上开始播放. 如果设置了该属性,音频将自动播放. 使用 autoplay 属性进行播放 //使用auto ...

  3. iOS 微信 音频 视频自动播放

    iOS 微信 音频 视频自动播放 http://www.w3ctech.com/topic/1165

  4. ios微信浏览器中video视频播放问题

    微信ios只支持几种特定的视频格式,一般使用mp4格式的视频(腾讯官方就是用的这种视频格式)

  5. video 安卓ios系统 浏览器 全屏播放以及自动播放的问题

    ios自动播放 <body onload="load()"> <div class="result_box"> <div clas ...

  6. 解决audio 在部分移动端浏览器不能自动播放(目前包括ios、微博)

    问题描述:项目需要在页面加载完成后自动播放音乐,但在ios中却无法自动播放,需要用户主动触发 解决办法: $('html').one('touchstart',function(){ document ...

  7. video 在iphone手机的ios系统和微信端无法自动播放

    描述:video 在iphone手机,微信端无法自动播放,ios系统下不能自动播放视频.而且如果没有autoplay属性,在微信端点击一次,弹不出视频,要一直触着两秒后才可以打开视频.如果点击播放的话 ...

  8. vue-router 在微信浏览器中操作history URl未改变的解决方案

    在PC端和手机浏览器中router.replace() or router.push()能够正常使用,页面的地址和页面都正常显示:但是在微信中,从/a页面通过router.push('/b')跳转到/ ...

  9. JS动态修改微信浏览器中的title

    JS动态修改微信浏览器中的title我们的原理是设置一个ifame然后我们再加载一下就可以实现了,具体的例子如下所示. 平时使用JS修改title,直接document.title=新标题就好了 这样 ...

随机推荐

  1. CentOS 6.5 开机启动指定服务

    gedit /etc/rc.d/rc.local #关闭防火墙 service iptables stop #开启samba服务 service smb start #开启ntopng 端口5000 ...

  2. myeclipse导出javadoc时特殊字符 尖括号

    源字符<?xml version="1.0" encoding="UTF-8" standalone="yes"?> javad ...

  3. 最后的配置部分:LNMP+Tomcat

    Nginx与PHP部分 mkdir /www/php -p echo -e "<?php\n\tphpinfo();\n?>" > /www/php/index. ...

  4. Android4.4KitKat支持u盘功能

    Android4.4KitKat支持u盘功能 作者:  发布日期:2014-05-14 23:16:13 我来说两句(0) 0 Tag标签:功能   Android U 盘功能实现和分析 u 盘功能实 ...

  5. CodeForces 616B Dinner with Emma

    水题 #include<cstdio> #include<cstring> #include<algorithm> using namespace std; +; ...

  6. UWSGI配置文件---ini和xml示例

    一   conf.ini文件: [uwsgi] http = $(HOSTNAME):9033 http-keepalive = 1 pythonpath = ../ module = service ...

  7. jsp显示计算数值, 四舍五入

    <script>document.write(Math.round(<%= rs_MFM.getInt("PVRCompl") %>/<%= rs_M ...

  8. Ubuntu“无法解析或打开软件包的列表或是状态文件”的解决办法。_StarSasumi_新浪博客

    Ubuntu"无法解析或打开软件包的列表或是状态文件"的解决办法. (2011-04-30 14:56:14) 转载▼ 标签: ubuntu apt 分类: Ubuntu/Linu ...

  9. 关于NOMINMAX这个预处理宏

    标准库在<algorithm>头中定义了两个模板函数std::min() 和 std::max().通常用它可以计算某个值对的最小值和最大值.可惜在 Visual C++ 无法使用它们,因 ...

  10. C#设计模式(6)——原型模式

    一.概念 二.模型 三.代码实现 ///火影忍者中鸣人的影分身和孙悟空的的变都是原型模式 class Client { static void Main(string[] args) { // 孙悟空 ...