在iOS微信瀏覽器中自動播放HTML5 audio(音樂)的2種正確方式

時間 2019-11-20

標籤 ios 微信瀏覽器自動播放 html5 html audio 音樂正確方式欄目 iOS 简体版

原文原文鏈接

<!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>