解決H5微信瀏覽器中audio兼容-- 背景音樂沒法自動播放

時間 2019-11-11

標籤解決 h5 微信瀏覽器 audio 兼容背景音樂沒法自動播放欄目瀏覽器简体版

原文原文鏈接

咱們知道，ios 在safari瀏覽器中，audio標籤不能在沒有用戶交互的狀況下自動播放或有js直接控制播放，這是系統限制的一些緣由。javascript

可是背景音樂在微信瀏覽器能夠設置自動播放，config配置一下就ok！html

1.引入Js文件java

在須要調用JS接口的頁面引入以下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.4.0.jsios

2.經過config接口注入權限驗證配置瀏覽器

wx.config({
                // 配置信息, 即便不正確也能使用 wx.ready
                debug: false
                , appId: ''
                , timestamp: 1
                , nonceStr: ''
                , signature: ''
                , jsApiList: []
            });

3.經過ready接口用js處理播放微信

 wx.ready(function () {
              document.getElementById("bgmusic").play();
            });

demoapp

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>解決背景音樂沒法播放問題</title>
</head>
<body>
  <audio id="bgmusic" src="http://www.w3school.com.cn/i/song.mp3" autoplay preload loop></audio>
  <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js" type="text/javascript"></script>
 <script>
    window.onload = function(){
      function autoPlayAudio() {
            wx.config({
                // 配置信息, 即便不正確也能使用 wx.ready
                debug: false
                , appId: ''
                , timestamp: 1
                , nonceStr: ''
                , signature: ''
                , jsApiList: []
            });
            wx.ready(function () {
              document.getElementById("bgmusic").play();
            });
        }
    autoPlayAudio();
  }
  </script>
</body>
</html>

附加背景音樂和視頻禁止同時播放ide

  function controlMusic() {
    video.addEventListener("play", function() {
      audio.pause(); //暫停
      on.style.display = "none";
      off.style.display = "block";
    });
    video.addEventListener("pause", function() {
      audio.play();
      off.style.display = "none";
      on.style.display = "block";
    });
  }
  controlMusic();