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. reactjs中使用高德地图计算两个经纬度之间的距离

    第一步下载依赖 npm install --save react-amap 第二步,在组件中使用 import React, { Component } from 'react' import { L ...

  2. 组件式开发（Vue）

    什么是组件式开发: 组件式开发就是将单个组件组合起来,形成一个大的组件进行页面的开发完成 什么是复合型组件: 复合型组件就是将相同的功能写成一个公用的组件(单元组件),供其他组件使用,就类似于后台开发 ...

  3. python 全局变量的import机制

    在之前学习python设计模式(工厂模式实践篇),希望使用全局变量代替c++的宏完成服务自动注册功能时,遇到过一个问题,全局变量的定义和使用放在同一个可执行脚本中的问题.先把有问题的代码晒一下: IS ...

  4. Divide the Sequence (贪心)

    题意:求将一串数据尽可能多分成所有前缀和大于0的连续子串. 思路:由于是要求所有前缀和大于0,那么只要从后往前推就好了. #include<bits/stdc++.h> using nam ...

  5. Linux Shell自动交互/人机交互的三种方法

    如果你要学习linux,你可能会遇到Linux Shell自动交互问题,这里将介绍Linux Shell自动交互的解决方法,在这里拿出来和大家分享一下. 一.背景 shell脚本在处理自动循环或大的任 ...

  6. FangDD Java编程规范

    我们采用<Oracle/Sun原生的Java编程规范>和<Google Java编程规范> Google Java编程风格指南 January 20, 2014 作者:Haws ...

  7. js中获取当天的时间的年月日

    var d=new Date() var day=d.getDate() var month=d.getMonth() + 1 var year=d.getFullYear() document.wr ...

  8. Porsche Piwis Tester II V12.100 Version Released

    Piwis Tester II v12.100 Version released today! In this new version we can find the latest type Pors ...

  9. No Directionality widget found

    The problem is not that you have not wrapped your widgets into MaterialApp. As the documentation say ...

  10. Android webview 调起H5微信支付

    mWebView.setWebViewClient(new MyWebViewClient()); private class MyWebViewClient extends WebViewClien ...