H5 audio 通过canplaythrough预加载音乐

1.背景

微信里做H5活动页面，对音乐使用autoplay, android没问题，IOS半天播不出来，因此考虑对音乐进行预加载（不是preload）

<!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>audio</title>
    <style>
    .m-toggle {
      background: url('https://dimg04.c-ctrip.com/images/300p0f0000007eqxf6DAD_C_228_132.jpg');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      position: absolute;
      right: 10px;
      top: 50px;
      width: 28px;
      height: 28px;
      display:none;
    }
    </style>
</head>
<body>
    <div class="m-toggle yinyu" onClick="audioplay()"></div>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script>
        var audio = document.createElement("audio");
        audio.src = "http://m10.music.126.net/20180605235031/35cf08b189d5470e37afa4bc61324559/ymusic/4d26/bdc3/0fcb/6c5ef34075e5fbf3557c8e06e0ec7b70.mp3";
        audio.loop = true;
        audio.addEventListener("canplaythrough",
        function() {
        　　$(".yinyu").show();
            console.log('musice loaded!')
        　　audio.play();
        },
        false);
        audio.load();
        function audioplay(){
        　　if(audio.paused){
        　　　　audio.play();
        　　}else{
        　　　　audio.pause();
        　　}
        }
    </script>
</body>
</html>

2.此方案参考: https://www.phpsong.com/1445.html

3.使用上述方法若无效，提供同事给的处理方法，我用的是微信那个方法，因为是在微信里的H5活动。

4.目前所得知的的音频在微信的ios里播放有问题是ios的安全策略影响的

// 开始播放背景音乐
function audioAutoPlay(id) {
  var audio = document.getElementById(id),
    play = function () {
      audio.play();
      document.removeEventListener("touchstart", play, false);
    };
  audio.play();
  document.addEventListener("WeixinJSBridgeReady", function () {
    play();
  }, false);
  document.addEventListener("touchstart", play, false);
}
audioAutoPlay('bgaudio');
//--创建页面监听，等待微信端页面加载完毕 触发音频播放
document.addEventListener('DOMContentLoaded', function () {
  function audioAutoPlay() {
    var bgaudio = document.getElementById('bgaudio');
    bgaudio.play();
    document.addEventListener("WeixinJSBridgeReady", function () {
      bgaudio.play();
    }, false);
  }
  audioAutoPlay();
});
//--创建触摸监听，当浏览器打开页面时，触摸屏幕触发事件，进行音频播放
document.addEventListener('touchstart', function () {
  function audioAutoPlay() {
    var bgaudio = document.getElementById('bgaudio');
    bgaudio.play();
  }
  audioAutoPlay();
});

 

posted @ 2018-06-05 23:57  巫瞅瞅  阅读(5253)  评论(0)  编辑  收藏  举报