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();

});

H5 audio 通过canplaythrough预加载音乐的更多相关文章

  1. Android--------WebView+H5开发仿美团 预加载，加载失败和重新加载

    Android嵌入式开发已经占大多数了,很多界面都是以网页的形式展示,WebView可以使得网页轻松的内嵌到app里,还可以直接跟js相互调用. 本博客主要是模仿美团的旅游出行模块的预加载,网页加载失 ...

  2. Cocos2D的OALSimpleAudio预加载音频

    在OALSimpleAudio接口中,没有委托机制和通知机制告诉你什么时候预加载完成.也不需要这样的机制. 如下代码: //Listing 11-1. Preloading a background ...

  3. 利用简洁的图片预加载组件提升h5移动页面的用户体验

    在做h5移动页面,相信大家一定碰到过页面已经打开,但是里面的图片还未加载出来的情况,这种问题虽然不影响页面的功能,但是不利于用户体验.抛开网速的原因,解决这个问题有多方面的思路:最基本的,要从http ...

  4. 运用预加载提升H5移动页面的用户体验

    原文地址:http://www.grycheng.com/?p=2188 在做h5移动页面,相信大家一定碰到过页面已经打开,但是里面的图片还未加载出来的情况,这种问题虽然不影响页面的功能,但是不利于用 ...

  5. 移动端-H5预加载页面

    利用简洁的图片预加载组件提升h5移动页面的用户体验   阅读目录 1. 实现思路 2. demo说明 3. 注意事项 4. 总结 在 做h5移动页面,相信大家一定碰到过页面已经打开,但是里面的图片还未 ...

  6. h5预加载代码

    预加载 <!--预加载--> <div class="preload"> <div class="prezoom"> < ...

  7. 用es6类封装的图片预加载技术!

    1.HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  8. 关于图片和auido预加载

    预加载老生常谈: funtion preLoadImages(imageArr){ var self = this; var newimages=[], loadedimages=0 var post ...

  9. spine实现预加载(一)

    前言 本文实现了spine动画的预加载,解决在战斗等大量加载spine动画的时候出现卡顿现象. 这里使用和修改三个类,直接修改的源码,当然你也可以继承LuaSkeletonAnimation,自己封装 ...

随机推荐

  1. Sysinternals Utilities

    https://docs.microsoft.com/zh-cn/sysinternals/ Sysinternals 之前为Winternals公司提供的免费工具,Winternals原本是一间主力 ...

  2. CentOS 7 keepalived+LVS

    LVS架构中 , 不管是NAT模式还是DR模式 , 当后端的RS宕机了 , 调度器还是会把请求转发到宕掉的RS上 , 然而keepalived可以解决该问题 , 它不仅仅有高可用的功能 , 还有负载均 ...

  3. HTTPConnectionPool(host='xx.xx.xx.xx', port=xx): Max retries exceeded with url:(Caused by ConnectTimeoutError(<urllib3.connection.HTTPConnection object at 0x0000015A25025EB8>...))

    HTTPConnectionPool(host='xx.xx.xx.xx', port=xx): Max retries exceeded with url:(Caused by ConnectTim ...

  4. P1996 约瑟夫问题

    P1996 约瑟夫问题 广度优先搜索 我竟然寄几做对了 这个题用到了队列 下面详细解释: 我的代码: #include<iostream> #include<cstdio> # ...

  5. springmvc学习路线1-基本配置

    1.第一个springmvc实例helloword 关键点拨 1.1 web.xml文件的配置 <servlet> <servlet-name>springMVC</se ...

  6. hashmap相关面试题

  7. nginx和tomcat的优化

    测试脚本(服务器414报错)#!/bin/bashurl=http://192.168.4.5/for i in {1..5000}do url=${url}v$i=idoneecho $url #a ...

  8. Spring错误——Spring 注解——factory-bean reference points back to the same bean definition

    背景:学习Spring,在使用注解@Bean的name属性配置<bean>实例时,不能注册实例成功 报错 WARNING: Exception encountered during con ...

  9. SSM登录跳转到登录页，登录页不能加载js和样式

    SSM登录跳转到登录页,登录页不能加载js和样式选用jsppage添加根路径. <% String rootPath = request.getContextPath(); %> < ...

  10. Delphi10.2 Tokyo试用（1）

    最近下载了Delphi10.2 Tokyo,试用了一下,感觉不错,尤其是针对Linux的开发,总算出来了,可以考虑把原来服务器重新编译成RedHat上使用了,免得客户一天到晚喊Windows不安全,要 ...