<!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. angula组件－通过键盘实现多选（原创）

    在刚刚结束的angular交易系统项目中有几个需求是让我感觉要花点时间的 如何更优雅的使用angular-bootstrap 的 Modal框. 通过键盘实现ctrl多选,shfit批量选的功能. 如 ...

  2. EL探索

  3. [转] MMO即时战斗：地图角色同步管理和防作弊实现

    一.前言 无论是端游.页游.手游如果是采用了MMO即时战斗游戏模式,基本都会遇到同屏多角色实时移动.释放技能.战斗等场景,于是自然也需要实现如何管理同屏内各种角色的信息同步:例如角色的位置.以及角色身 ...

  4. 天梯赛决赛 L2-1.红色警报 并查集

    L2-013. 红色警报 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 陈越 战争中保持各个城市间的连通性非常重要.本题要求你编写一 ...

  5. ASP.NET MVC3中的路由系统（Routes） .

    MVC中,用户访问的地址并不映射到服务器中对应的文件,而是映射到对应Control里对应的ActionMethod,由ActionMethod来决定返回用户什么样的信息.而把用户访问的地址对应到对应的 ...

  6. FMDB增删查改

    创建,插入,更新和删除:使用executeUpdate方法,而查询则用executeQuery 1.实例化FMDatabase //paths: ios下Document路径,Document为ios ...

  7. JQuery使用和选择器

    1.优点 (1)能解决浏览器的兼容性JS问题 (2)解决JS代码冗余的问题 (3)动画效果更容易实现 2.压缩过的和不压缩的区别 (1)开发过程中用未压缩的:上线后用压缩版本. (2)版本问题:1.X ...

  8. 使用MySQL命令行新建用户并授予权限的方法

    MySQL命令行能否实现新建用户呢?答案无疑是肯定的.而且在使用使用MySQL命令行新建用户后,还可以为用户授予权限. 首先要声明一下:一般情况下,修改MySQL密码,授权,是需要有mysql里的ro ...

  9. PHP 领域模型与数据库映射文章

    1. http://blog.csdn.net/happen_zhang/article/details/12761747 2. http://blog.csdn.net/hguisu/article ...

  10. 无法访问 ASP 兼容性模式

    <%@ Page Title="" Language="C#" MasterPageFile="../theme/classic/content ...