微信公衆プラットフォームにバックグラウンドミュージックを追加

一.問題の再述

ある公衆アカウントのメッセージ点击进入後に自動的に音楽を再生でき、ユーザーが手動でトリガーして play する必要はありません。これはどのように実装されているのでしょうか？

二.方案の試行

###1.audio に autoplay 属性を設定して再生

audio タグに autoplay="autoplay" を設定

結果：一部のAndroid マシンでは自動再生可能、IOS はサポートしない

###2.setTimeout で再生

ページ進入後に遅延実行 audio.play()

結果：Safari、IOS 微信はサポートしない

###3.ボタンで再生

ボタンクリックまたは touch イベントを通じて再生をトリガー

結果：一部の Android 微信はサポートしない

###4.旧微信 API コールバックで再生

ネットワーク状態を取得するインターフェースのコールバックで再生（成功失敗に関わらず、すべて play を実行）

var audio = document.getElementById('audio');

if (window.WeixinJSBridge) {
    WeixinJSBridge.invoke('getNetworkType', {}, function(e) {
        audio.play();
    }, false);
}else{
    document.addEventListener("WeixinJSBridgeReady", function() {
        WeixinJSBridge.invoke('getNetworkType', {}, function(e) {
            audio.play();
        });
    }, false);
}

結果：IOS 微信はサポートしない、Safari はサポートしない（互換性処理をしていない）

###5.新微信 API コールバックで再生

原理は同上、新しい微信 API を使用しただけです。詳細情報は微信 JS-SDK 説明ドキュメントを参照

var audio = document.getElementById('audio');

if (window.WeixinJSBridge) {
    wx.getNetworkType({
        success: function (res) {
            audio.play();
        },
        fail: function (res) {
            audio.play();
        }
    });
}else{
    document.addEventListener("WeixinJSBridgeReady", function() {
        wx.getNetworkType({
            success: function (res) {
                audio.play();
            },
            fail: function (res) {
                audio.play();
            }
        });
    }, false);
}

結果：IOS のサポート性は不明

###6.微信 API コールバックで AudioAPI を使用して再生

AudioAPI は IOS システムが自動的にオーディオをダウンロードできない制限を打破できません（詳細は後文参照）。そのため、コールバック内で AudioAPI を使用してオーディオを再生することを試みました

注意：低バージョン IOS は AudioAPI をサポートしない、Android のサポート性は不明

// 获取 AudioContext
window.context = getAudiocontext();
// 获取音频数据
window.source = null;
window.bufs = [];

// 执行
getBufs();


/**
 * 获取 AudioContext
 * @return {AudioContext} andio 元素相关的环境对象
 */
function getAudiocontext() {
    window.AudioContext = (window.AudioContext || window.webkitAudioContext);
    if(window.AudioContext) {
        return new window.AudioContext();
    } else {
        console.log('not support web audio api');
    }
}

/**
 * 播放
 * @param {Integer} 1: 多个 source 直接连接输出设备 2: 多个 source 通过 GainNode 再连接输出设备
 * @return nth
 */
function getBufs() {
    var audioURL = 'didi.mp3'; // 这里替换为音频文件 URL
    var xhr1 = new XMLHttpRequest();

    xhr1.open('GET', audioURL, true);
    xhr1.responseType = 'arraybuffer'; // XMLHttpRequest 2 的新东西
    xhr1.onload = function() {
        // 音频数据在 xhr.response 中，而不是 xhr.requestText
        bufs.push(xhr1.response);
    }
    xhr1.send();
}

//////////
// 微信回调 //
//////////

var audio = document.getElementById('audio');

function runNow() {
    context.decodeAudioData(bufs[0], function(buffer) {
        source = context.createBufferSource();
        source.buffer = buffer;
        // 源直接连接到输出设备
        source.connect(context.destination);
        source.start(0);
    });
}

if (window.WeixinJSBridge) {
    WeixinJSBridge.invoke('getNetworkType', {}, function(e) {
        setTimeout(runNow, 3000);
    }, false);
}else{
    document.addEventListener("WeixinJSBridgeReady", function() {
        WeixinJSBridge.invoke('getNetworkType', {}, function(e) {
            setTimeout(runNow, 3000);
        });
    }, false);
}

結果：iPhnoe5 はサポートしない、6p は不明、コールバックをトリガーできるが、play コードは無効

###7.その他実現可能な方法

イベントトリガーのシミュレーション（trigger）

手動でイベントをトリガーし、イベントハンドラ内でオーディオを再生。未テスト

新 API

公式公開の 1.0.0 バージョン API はオーディオ再生をサポートしない（録音再生のみサポート）。後続でより多くのオーディオ API が開放される可能性があります。もちろん、それは後の話

三.解決策

完璧に互換性のある解決策はありません。テストによると、iPhone 5S 及び 6 では JS API コールバック方式で再生可能、Android の自動再生は比較的容易ですが、一部の深度カスタマイズ機種では依然として再生できません

自動再生の難点は主に IOS から来ています。IOS システムの制限により、自動的にオーディオビデオをダウンロードできず、ユーザーアクションで再生をトリガーする必要があります：

In Safari on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and autoplay are disabled. No data is loaded until the user initiates it. This means the JavaScript play() and load() methods are also inactive until the user initiates playback, unless the play() or load() method is triggered by user action. In other words, a user-initiated Play button works, but an onLoad="play()" event does not.

(Safari HTML5 Audio and Video Guide より引用)

IOS 自動再生オーディオのより多くの解決策については、Autoplay audio files on an iPad with HTML5 を参照

もう 1 つの解決策も見ました：

if ("wView" in window) {
    window.wView.allowsInlineMediaPlayback = "YES";
    window.wView.mediaPlaybackRequiresUserAction = "NO";
}

上記コードを追加後、直接 preload、autoplay すればよい据说

注意：未テスト、効果は不明

四.DEMO

http://www.ayqy.net/t/autoplay.html

参考資料

[黯羽轻揚：微信 API](/articles/微信 api/)
关于 ios 不能自动播放视频、音频的解决方案

一.問題の再述

二.方案の試行

三.解決策

四.DEMO

参考資料

コメント

コメントを書く