ios为了用户隐私安全,禁止自动播放音频文件的解决办法(微信端)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ios为了用户隐私安全,禁止自动播放音频文件的解决办法(微信端)相关的知识,希望对你有一定的参考价值。

 

 

ios为了用户隐私安全,禁止自动播放音频文件

//通过参数给音频设置id和路径
utils = {
    playAudio: function (id, src) {
        var audio = $(‘#‘ + id);
        if (audio.attr(‘src‘) == undefined) {
            audio.attr(‘src‘, src);
        }

        //audio[0].play();
        function audioAutoPlay() {
            audio[0].play();
            document.addEventListener("WeixinJSBridgeReady", function () {
                audio[0].play();
            }, false);
        }
        audioAutoPlay();
    }
}
utils.playAudio(‘music‘,‘mp3/music.mp3‘);

 

// "野生"方法, 借用原来老的 WeixinJSBridge 未试过
function autoPlayAudio2() {
    window.onload = function() {
// alert(typeof WeixinJSBridge);
        WeixinJSBridge.invoke(‘getNetworkType‘, {}, function(e) {
// 在这里拿到 e.err_msg, 这里面就包含了所有的网络类型
// alert(e.err_msg);
            document.getElementById(‘music‘).play();
        });
    };
}

 

//通过ajax来播放音频,但没有试过
var processAudio = document.getElementById(‘music‘);
jQuery.ajax({
    url: ‘ajax.js‘,
    async: false,
    success: function() {
        processAudio.play(); // audio will play in iOS before 4.2.1
    }
});

 

//如果存在就播放音乐
var resultAudio = function(){
    if(document.getElementById("music"))
    {
        document.getElementById("music").play();
    }
};

 

//通过触摸屏幕来播放音乐
document.getElementById(‘music‘).addEventListener(‘touchstart‘,function(){
    document.getElementById(‘music‘).play();
},false)

 

//只能写一次,第二次的音乐会无效
function processAudio() {
    wx.config({
        // 配置信息, 即使不正确也能使用 wx.ready
        debug: false,
        appId: ‘‘,
        timestamp: 1,
        nonceStr: ‘‘,
        signature: ‘‘,
        jsApiList: []
    });
    wx.ready(function() {
        document.getElementById(‘music‘).play();
    });
}
processAudio();
<audio src="audio/bg5.mp3" loop id="music"></audio>

 

//通过监听“DOMContentLoaded”事件来触发音乐 WeixinJSBridgeReady微信接口
document.addEventListener(‘DOMContentLoaded‘, function () {
    var audio = document.getElementById(‘music‘);
    function audioAutoPlay() {
        audio.play();
        document.addEventListener("WeixinJSBridgeReady", function () {
            audio.play();
        }, false);
    }
    audioAutoPlay();
});

 

// 音乐播放
function autoPlayMusic() {
// 自动播放音乐效果,解决浏览器或者APP自动播放问题
    function musicInBrowserHandler() {
        musicPlay(true);
        document.body.removeEventListener(‘touchstart‘, musicInBrowserHandler);
    }

    document.body.addEventListener(‘touchstart‘, musicInBrowserHandler);
}

 

// 自动播放音乐效果,解决微信自动播放问题
function musicInWeixinHandler() {
    musicPlay(true);
    document.addEventListener("WeixinJSBridgeReady", function () {
        musicPlay(true);
    }, false);
    document.removeEventListener(‘DOMContentLoaded‘, musicInWeixinHandler);
}

function musicPlay(isPlay) {
    var media = document.querySelector(‘#bg-music‘);
    if (isPlay && media.paused) {
        media.play();
    }
    if (!isPlay && !media.paused) {
        media.pause();
    }
}

 

<audio id="Jaudio" class="media-audio" src="http://game.163.com/weixin/gfxm3_gc/images/bg.mp3" preload loop="loop"></audio >
    function audioAutoPlay(id){
        var audio = document.getElementById(id),
            play = function(){
                audio.play();
                document.removeEventListener("touchstart",play, false);
            };
        audio.play();
        document.addEventListener("WeixinJSBridgeReady", function () {//微信
            play();
        }, false);
        document.addEventListener(‘YixinJSBridgeReady‘, function() {//易信
            play();
        }, false);
        document.addEventListener("touchstart",play, false);
    }
audioAutoPlay(‘Jaudio‘);

 

以上是关于ios为了用户隐私安全,禁止自动播放音频文件的解决办法(微信端)的主要内容,如果未能解决你的问题,请参考以下文章

video自动播放问题+方案

h5页面自动播放视频音频_关于媒体文件自动全屏播放的实现方式

h5页面自动播放视频音频_关于媒体文件自动全屏播放的实现方式

请求自动播放音频文件的权限

解决在 iOS 微信浏览器中无法自动播放 HTML5 audio

解决在 iOS 微信浏览器中无法自动播放 HTML5 audio