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>
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 發現 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 12,252評論 4 61
  • 那一年,她18歲,父親早逝,母親拖著她和三個弟弟艱苦度日,勤勞懂事的她,小學剛讀到二年級就主動輟學,回家幫...
    犀牛洞洞主閱讀 280評論 0 2
  • 2017.6.13 1、財富播種恩田敬田悲田√ 2、在表姐那兒買紙尿褲,種下信守承諾和促使她人交易成功的種子。 3...
    鵲曾閱讀 118評論 0 0