zoukankan      html  css  js  c++  java
  • 微信中音乐播放在ios不能自动播放解决

    在微信中,ios手机下面音乐被自动禁掉无法自动播放,我们可以执行触发body上的元素,自动进行播放。

        //音乐
        var x = document.getElementById("myAudio");
        var at=$("#myAudio")
        var audobtn=true;
        function playAudio(at){
            var faf=at[0];
            faf.play();//播放
            $(".audio-btn").addClass("move1");
        }
        var autopa=true;    
            $("body").on("click",function(){
                if(autopa){
                    playAudio(at);
                    autopa=false;
                }
            })
        $(".audio-btn").on("click",function(){
            if(audobtn){
                $(".audio-btn").removeClass("move1");
                x.pause();
                audobtn=false;             
            }else{
                $(".audio-btn").addClass("move1");
                x.play(); 
                audobtn=true;
            }
        })
    需要引入jq以及微信的js
    <script src="./jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="./jweixin-1.0.0.js"></script> 
    <script>
    
    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);
            }
            document.addEventListener('DOMContentLoaded', musicInWeixinHandler);
        }
      function musicPlay(isPlay) {
            var audio = document.getElementById('audio2');
            if (isPlay && audio.paused) {
                audio.play();
            }
            if (!isPlay && !audio.paused) {
                audio.pause();
            }
        };
      autoPlayMusic();
    
    // 关闭音乐
    $('.music-pic').click(function () {
        if($('.music-pic').hasClass('close')){
            document.getElementById("audio2").muted=false;
            $('.music-pic').removeClass('close');
        }else {
            $('.music-pic').addClass('close');
            document.getElementById("audio2").muted=true;
        }
    });
    
  • 相关阅读:
    input表单元素的默认padding不一致问题
    【转】iOS25彩票 幸运转盘
    微分起源
    转载--微分几何为何必然兴起?
    前缀和?or差分序列?
    noip2014 小结
    2019艾瑞(北京)年度高峰会议-数能驱动新变量
    MSF初体验
    s实现指定时间自动跳转到某个页面
    css实现居中
  • 原文地址:https://www.cnblogs.com/qdlhj/p/10749991.html
Copyright © 2011-2022 走看看