<!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. word2016怎么从第三页开始设置页码

    在Word中,默认为一节,每节的页码是连续的,若想在一个Word文档中,前2页不设页码,从第3页开始设置页码,必须插入分节符,使文档分成两节,这样就可以单独设置页码.操作步骤:1.将光标放在第4页的首 ...

  2. 使用PowerDesigner画ER图详细教程

    转:http://www.360doc.com/content/11/0624/15/2617151_129276457.shtml 一.概念数据模型概述数据模型是现实世界中数据特征的抽象.数据模型应 ...

  3. NAVICAT 拒绝链接的问题

    处理步骤 1.先在原有的建一个新的用户 2.成功后,再点击原有的,即可使用

  4. MountService初探

    MountService作为Vold的客户端,会接收来自vold的消息,并且内部定义保存了各种Volume相关的状态定义: 1.VolumeState class VolumeState { publ ...

  5. Highcharts选项配置详细说明文档

    Highcharts提供大量的选项配置参数,您可以轻松定制符合用户要求的图表,目前官网只提供英文版的开发配置说明文档,而中文版的文档网上甚少,且零散不全.这里,我把Highcharts常用的最核心的参 ...

  6. PAT (Advanced Level) 1080. Graduate Admission (30)

    简单题. #include<cstdio> #include<cstring> #include<cmath> #include<vector> #in ...

  7. SDWEBImage和collectionView的组合，以及collectionView的随意间距设置

    #import "ViewController.h" #import <ImageIO/ImageIO.h> #import "UIImageView+Web ...

  8. mybatis+spring事务

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

  9. Laravel 数据插入

    Laravel 的数据库操作基于 Eloquent ORM,在插入数据时有以下几种方式,返回结果也不会不同: 1.insert 插入后会返回 true or false: 2.create 插入成功后 ...

  10. CABasicAnimation 基本动画

    几个可以用来实现热门APP应用PATH中menu效果的几个方法 +(CABasicAnimation *)opacityForever_Animation:(float)time //永久闪烁的动画 ...