<!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. 1317: Square(DFS+剪枝)

    Description Given a set of sticks of various lengths, is it possible to join them end-to-end to form ...

  2. openwrt系统之字符设备驱动软件包加载、测试程序加载

    .首先将软件包(如mydrv)放到ubuntu虚拟机openwrt/trunk/package/kernel/目录下 .回到openwrt/trunk/目录下,make menuconfig进行配置, ...

  3. 扩展方法实现DevExpress控件校验

    DevExpress控件中,如果要控件的值进行校验,需要用到DXValidationProvider控件和DXErrorProvider控件,按照正常思路,无论使用哪个控件要实现校验效果时都需要对每个 ...

  4. PAT (Advanced Level) 1029. Median (25)

    scanf读入居然会超时...用了一下输入挂才AC... #include<cstdio> #include<cstring> #include<cmath> #i ...

  5. BNU OJ 50997 BQG's Programming Contest

    #include<cstdio> #include<cstring> #include<cmath> #include<algorithm> using ...

  6. Python正则表达式学习笔记

    [] 字符类,只要匹配里面的任意字符,都算匹配 . 元字符,可以匹配除换行符之外的所有字符 大小写敏感,但是可以关闭 \d  可以匹配0-9中的任意数字 {3}大括号里面的数字,边上前面一个字符匹配的 ...

  7. mybatis+spring事务

    http://www.mybatis.org/spring/zh/transactions.html 第四章 事务 一个使用 MyBatis-Spring 的主要原因是它允许 MyBatis 参与到 ...

  8. CentOS7 开源跳板机(堡垒机) Jumpserver

    开源跳板机(堡垒机)Jumpserver 环境 CentOS 7   x64       关闭 selinux  firewalld jumpserver: 172.24.0.14 testserve ...

  9. strlen sizeof strcat strcpy区别

      strlen(p): 能计算出p指向字符串的长度(以当前p的位置开始),不包含终止字符'\0': p可以声明为char* p或者char p[],这两种形式strlen均能正确计算. sizeof ...

  10. 函数之局部变量和使用global语句

    局部变量当你在函数定义内声明变量的时候,它们与函数外具有相同名称的其他变量没有任何关系,即变量名称对于函数来说是 局部 的.这称为变量的 作用域 .所有变量的作用域是它们被定义的块,从它们的名称被定义 ...