<!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 安装Nvidia驱动后出现"no screens found "错误

    参考官网文档 http://cn.download.nvidia.com/XFree86/Linux-x86_64/280.13/README/editxconfig.html 进入更改文档: vi ...

  2. Split()特殊字符

    关于点的问题是用string.split("[.]") 解决. 关于竖线的问题用 string.split("\\|")解决. 关于星号的问题用 string. ...

  3. linux下安装tomcat和部署web应用

      孤傲苍狼 只为成功找方法,不为失败找借口! Linux下安装Tomcat服务器和部署Web应用 一.上传Tomcat服务器

  4. 认识ExtJS(04)--常见Web框架的ExtJS改造

    常见Web框架的ExtJS改造 怎样开始改造工作? 改造主要集中在对表现层的修改,底层的数据库访问不需要进行任何的变动.也就是说主要集中早这2个方面:一方面是表现部分即是JSP页面:另一方面是客户端与 ...

  5. db2 sqlcode

    DB2错误信息(按sqlcode排序) sqlcode sqlstate 说明 000 00000 SQL语句成功完成 01xxx SQL语句成功完成,但是有警告 +012 01545 未限定的列名被 ...

  6. PHP json不转义

    json_encode($result, JSON_UNESCAPED_UNICODE);

  7. Hibernate---第一个helloworld程序 (XML版本, annotation版本)

    Hibernate作为JPA的一种实现,jpa的注解已经是hibernate的核心,hibernate只提供了一些补充,而不是两套注解.hibernate对jpa的支持够足量,在使用hibernate ...

  8. SpringMVC轻松学习-环境搭建（二）

    基于spring2.5的采用XML配置的spring MVC项目 注:本项目全部基于XML配置.同时,集成了hibernate.采用的是:spring MVC+hibernate+spring的开发架 ...

  9. POJ 2686 Traveling by Stagecoach

    状压DP dp[s][p]用了哪几张票,到哪个节点的最小费用. 注意:G++ %.3lf输出会WA,但C++能过:改成%.3f,C++,G++都能AC #include<cstdio> # ...

  10. Linux 环境编译安装mysql (源码安装包)

    标注: Linux需要先配置网络yum源,确定yum能在线安装软件包,方便测试过程中安装部分依赖包.配置163网易提示的网络yum源参考博客  http://www.cnblogs.com/zoulo ...