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;
        }
    });
    
  • 相关阅读:
    【翻译】Ext JS最新技巧——2014-9-10
    Ext JS 5的声明式事件监听
    SpringBoot启动方式讲解和部署war项目到tomcat9
    异常处理
    SpringBoot2.x个性化启动banner设置和debug日志
    实用博客
    SpringBootTest单元测试实战、SpringBoot测试进阶高级篇之MockMvc讲解
    SpringBoot注解把配置文件自动映射到属性和实体类实战
    SpringBoot2.x配置文件讲解
    SpringBoot2.x使用Dev-tool热部署
  • 原文地址:https://www.cnblogs.com/qdlhj/p/10749991.html
Copyright © 2011-2022 走看看