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. appium环境搭建-运行

    appium是测试移动端的测试工具 首先要下载手机模拟器,或者连接真机.我用的夜神模拟器.安装打开它.安装这个有很高的兼容性要求,我也是小白,摸索了三天才弄出来 一.原理如图: 二.需要安装的软件: ...

  2. Vue滑动删除与修改

    Vu+element实现 <template> <div class=""> <div class="slider"> &l ...

  3. 《linux就该这么学》第五节课，shell脚本的各种语句！

    第四章shell语句 (据课本和虚拟机实验排版,借鉴请改动)               4.2:shell脚本   脚本包括:脚本声明,脚本注释,脚本内容和命令 例:#!/bin/bash      ...

  4. 使用Navicat定时备份mysql数据库和创建报表并邮件自动发送

    数据库备份在现代计算机高速发展的今日变得日益重要,程序员往往因为不重视而忽略备份数据,导致数据丢失,造成非常严重的后果.定时备份无疑是解决备份的最好的途径,本文主要使用Navicat来自动备份数据库和 ...

  5. scrum学习笔记

    http://www.scrumcn.com/agile/scrum-knowledge-library/scrum.html#tab-id-1 推荐电子书 <Scrum精髓_敏捷转型指南> ...

  6. 【Spark-core学习之三】 Spark集群搭建 & spark-shell & Master HA

    环境 虚拟机:VMware 10 Linux版本:CentOS-6.5-x86_64 客户端:Xshell4 FTP:Xftp4 jdk1.8 scala-2.10.4(依赖jdk1.8) spark ...

  7. jquery.autocomplete详解

    语法: autocomplete(urlor data, [options] ) 参数: url or data:数组或者url [options]:可选项,选项解释如下: 1) minChars ( ...

  8. ztree模糊搜索

      <!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="X ...

  9. 王之泰201771010131《面向对象程序设计（java）》第二周学习总结

    王之泰201771010131<面向对象程序设计(java)>第二周学习总结 第一部分:理论知识学习部分 第三章 第三章内容主要为Java语言的基础语法,主要内容如下 1.基础知识 1.1 ...

  10. JavaScript-DOM（1）

    DOM简介 DOM 节点分类 DOM 节点层级关系 1.文档节点 1.父节点 2.标签(元素)节点 2.子节点 3.属性节点 3.兄弟节点 4.注释节点 4.根节点 5.文本节点 DOM节点分类 DO ...