H5 使用audio无法自动播放

H5 使用 <audio> 的 autoplay 属性无效踩坑记

入坑背景：
要做一个全屏滚动的动画效果，所以用了一个fullpage.js的插件
然而这个插件通常用于PC端，对H5并不那么友好，在手机上看效果还是挺卡顿的。。。
最后改用了swiper.js作为底层滚动的插件。稍微好点了

第一个坑 和fullpage有关：

fullpage初始化的时候有一个阻止默认事件的方法，具体是那行代码还真忘了。而 <audio> 的 autoplay 属性实现就是H5在音频加载完毕后自动点击音频进行播放的。然后被阻止了？？。自然就播不出来

---

解决方法：

如果还是坚持要用fullpage。那么音频可以动态插入

  // fullpage 初始化的代码
  
  // 延迟一丢丢加载音频。
  setTimeout(function () {
    let bg_music_src = $('.bg_music').data('src');
    $(".bg_music").append(`<audio src="${音频地址}" autoplay="autoplay" controls loop id="bg_music"></audio>`);
    let audio = document.getElementById('bg_music');
    
    // 这段是兼容微信浏览器的。后面会说到
    document.addEventListener("WeixinJSBridgeReady", function () {
      audio.play();
    }, false);
  }, 200)

第二个坑 和微信浏览器有关：

emmm 毕竟很多H5做了都是给公众号用的。到了微信端播放不了。
主要就是用到 WeixinJSBridgeReady 这个api。

---

解决方法：

  let audio = document.getElementById('bg_music');

  // 兼容微信浏览器自动播放
  document.addEventListener("WeixinJSBridgeReady", function () {
    audio.play();
  }, false);

第三个坑 和app有关：

毕竟还要嵌入自己的APP中。那么app嵌入H5用的多是webview。知道用的是啥技术那就好办了

---

解决方法：

IOS端

设置:
webView.mediaPlaybackRequiresUserAction = NO;

---

andorid端

设置

mWebview.getSettings().setMediaPlaybackRequiresUserGesture(false);

---

最后还有一点在普通PC浏览器有时会能播放，有时不能播放，要手动点击才能播放的，这个暂时还没有特别好的方法，目测是因为首次加载，音乐没加载到，所以很多时候一时可以一时不行，如果有什么好的方法也可以发出来学习下