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. CurrentHashMap、HashMap、HashTable的区别

    HashTable 底层数组+链表实现,无论key还是value都不能为null,线程安全,实现线程安全的方式是在修改数据时锁住整个HashTable,效率低,ConcurrentHashMap做了相 ...

  2. visual studio code常用插件

    1.auto close tag2.chinese language pack for visual studio code3.debugger for chrome4.docker5.html cs ...

  3. Java IO--BIO

    一.java io 概述 1.1 相关概念 Java IO Java IO即Java 输入输出系统.不管我们编写何种应用,都难免和各种输入输出相关的媒介打交道,其实和媒介进行IO的过程是十分复杂的,这 ...

  4. vue路由1：基本使用

    路由,其实就是指向的意思,当我点击页面上的home按钮时,页面中就要显示home的内容,如果点击页面上的about 按钮,页面中就要显示about 的内容.Home按钮  => home 内容, ...

  5. week_one-python基础 列表 增删改查

    # Author:larlly #列表增删改查#定义列表name = ["wo","ni","ta","wo"] #定义 ...

  6. 在python中使用正则表达式

    一.转义符 1.在python中的转义符 (1)\\n与\n的区别 (2)r"\next" 通过r来进行转义 (3)"\\\\d"与"\\d" ...

  7. 51Nod 博弈模板题

    连刷3道博弈模板题,算是稍微学习了以下三个经典博弈了.推荐一个博客. 第一道模板:Bash博弈——同余理论 1066 Bash游戏 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度 ...

  8. 进程管理工具supervisor的使用

    centos 6.5, python 2.6, supervisor 3.3.1: Linux下后台运行程序通常的做法是用nohub,然后配以进程的检测来实现服务式的操作,但其实有更好的选择super ...

  9. nmon监控数据分析

    性能测试中,各个服务器资源占用统计分析是一个很重要的组成部分,通常我们使用nmon这个工具来进行监控以及监控结果输出. 一. 在监控阶段使用类似下面的命令 ./nmon -f write_3s_20v ...

  10. 2018.9.22 NOIP模拟赛

    *注意:这套题目应版权方要求,不得公示题面. 从这里开始 Problem A 妹子 Problem B 旅程 Problem C 老大 因为业务水平下滑太严重,去和高一考NOIP模拟,sad... P ...