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. 三、latex源文件的基本结构

    在latex中如何使用中文 首先在选项->设置->构建中默认编译器是不是用的是xelatex 编辑器的默认字体编码是不是UTF-8 在导言区引入ctex宏包

  2. 完成登录功能，用session记住用户名

    登录功能完成: js:设置return html:设置 form input py: @app.route设置methods GET POST 读取表单数据 查询数据库 用户名密码对: 记住用户名 跳 ...

  3. Java web开发环境搭配

    1.安装并配置JDK环境(1)安装过程省略(建议安装在自己指定的统一目录下,方便后期查找). (2)配置环境变量 JAVA_HOME:  C:\Java\jdk\jdk1.7.0_45 (jdk安装目 ...

  4. [转载]Javascript .then()这个方法是什么意思？

    then()方法是异步执行. 意思是:就是当.then()前的方法执行完后再执行then()内部的程序,这样就避免了,数据没获取到等的问题. 语法:promise.then(onCompleted, ...

  5. js 比大小

    html部分 <input type="button" onclick="mymax(5,4,12)" value="按钮"/> ...

  6. Lucene的深入

    Lucene创建索引 第一.创建文档对象 第二.创建Field对象(各种类型)整数String.Text.Long.Float.Double等... Field对象 包含三大属性:是否分词,是否索引, ...

  7. ElasticSearch(七) Elasticsearch在Centos下搭建可视化服务

    要想可视化ElasticSearch,就需要安装一些插件,安装插件的前提是安装所依赖的环境,比如java,maven等,本篇博文就不再走那些流程了.没安装的童鞋可以看我的ElasticSearch栏目 ...

  8. Centos7.4配置虚拟环境

    environment Centos7.4 Python3.7 download pip isntall virtualenv create environment virtualenv enviro ...

  9. nginx ssl 卸载功能 第八章

    一 .证书自签发和给web 服务签发证书 .ssl 证书加密文件 ****************************** 建立私有CA openCA openssl 证书申请及签署步骤 .生成证 ...

  10. Git冲突和解决冲突-测试方法

    原文链接:https://www.cnblogs.com/blogslee/p/6828659.html