Safari 自动播放背景音乐开关

iOS中是不支持自动播放的，除非与用户进行过交互，哪怕是弹出个Alert()然后点掉也是可以的。

研究了半天也没有解决掉，不过最后的效果也不错，代码如下：

<script>   
        function autoLoad(){       
                document.getElementById('bgmusic').play();              
                document.addEventListener(\"WeixinJSBridgeReady\", function () {                
                WeixinJSBridge.invoke('getNetworkType', {}, function (e) {                
                           document.getElementById('bgmusic').play();       
                });  
        }, false);   
        }    
        function switchIt() {     
               var audio = document.getElementById('bgmusic');    
               audio.paused ? audio.play() : audio.pause();    
        }
</script>

顺便分享一下，图片居中显示的css，大神请绕过🙏

<style>   
       body {       
              margin: 0;    
       }   
       img {    //这里是居中显示的
              clear: both;    
              display: block;     
              margin:auto;  
              width: 100%;    //这是额外加上去的
       }   
       div.wrapper{
              float:left;position:relative;  
              width: 100vw;
              background-color: #ca392d
      }   
       div div{       // 这个是在图片上显示文字的
              font-size: 1.9em;      
              position:absolute;left:0; 
              top:38%;       
              width: 100%; 
              height: 5em;    
              font-family: 'Hannotate SC';   
      }
      p { 
              line-height: 120%;    text-align: center;    
      }
</style>

然后是主体部分，在图片上直接做了一个音符，表示音乐的开关：

<body bgcolor='#ca392d' onload=\"autoLoad()\" style=\"overflow-x:hidden;overflow-y:hidden\"> // 通过autoLoad()自动加载， 禁止左右滑动
<div class=\"wrapper\">     
<audio preload=\"preload\" id=\"bgmusic\" src=\"jingleBells.mp3\" loop></audio>   // 预加载 循环 不显示播放器
<img src=\"bg.png\" onclick=switchIt()>    // 音乐的开关 
<div><p>一些文字</p></div></div></body>

Safari 自动播放背景音乐开关

推荐阅读更多精彩内容