前端设计吧 关注:91贴子:114
  • 1回复贴,共1

解决ios下的微信页面背景音乐无法自动播放问题

只看楼主收藏回复

在做各种html5场景页面的时候,插入背景音乐是一个很普遍的需求,我们都知道,ios下的safari是无法自动播放音乐的,以至于现在行程一种认知,ios是没有办法自动播放媒体资源的,这个认知其实是错误的,是有解决方案的,解决方案如下:


1楼2019-08-09 11:39回复
    总结:关于音乐自动播放有三种情况:1:支持audio的autoplay,大部分安卓机子自带的浏览器和微信,部分的ios微信(不用解决)2:不支持audio的autoplay,部分的ios微信(解决方案以提供)3:不支持audio的autoplay,部分的安卓机子自带的浏览器(例:小米)和全部的ios Safari(这种只能做用户触屏时播放代替自动播放)根据上面三种情况解决方案如下:
    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');


    3楼2019-08-09 11:40
    回复