H5 audio 通过canplaythrough预加载音乐
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预加载音乐的更多相关文章
- Android--------WebView+H5开发仿美团 预加载，加载失败和重新加载
Android嵌入式开发已经占大多数了,很多界面都是以网页的形式展示,WebView可以使得网页轻松的内嵌到app里,还可以直接跟js相互调用. 本博客主要是模仿美团的旅游出行模块的预加载,网页加载失 ...
- Cocos2D的OALSimpleAudio预加载音频
在OALSimpleAudio接口中,没有委托机制和通知机制告诉你什么时候预加载完成.也不需要这样的机制. 如下代码: //Listing 11-1. Preloading a background ...
- 利用简洁的图片预加载组件提升h5移动页面的用户体验
在做h5移动页面,相信大家一定碰到过页面已经打开,但是里面的图片还未加载出来的情况,这种问题虽然不影响页面的功能,但是不利于用户体验.抛开网速的原因,解决这个问题有多方面的思路:最基本的,要从http ...
- 运用预加载提升H5移动页面的用户体验
原文地址:http://www.grycheng.com/?p=2188 在做h5移动页面,相信大家一定碰到过页面已经打开,但是里面的图片还未加载出来的情况,这种问题虽然不影响页面的功能,但是不利于用 ...
- 移动端-H5预加载页面
利用简洁的图片预加载组件提升h5移动页面的用户体验 阅读目录 1. 实现思路 2. demo说明 3. 注意事项 4. 总结 在 做h5移动页面,相信大家一定碰到过页面已经打开,但是里面的图片还未 ...
- h5预加载代码
预加载 <!--预加载--> <div class="preload"> <div class="prezoom"> < ...
- 用es6类封装的图片预加载技术!
1.HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- 关于图片和auido预加载
预加载老生常谈: funtion preLoadImages(imageArr){ var self = this; var newimages=[], loadedimages=0 var post ...
- spine实现预加载(一)
前言 本文实现了spine动画的预加载,解决在战斗等大量加载spine动画的时候出现卡顿现象. 这里使用和修改三个类,直接修改的源码,当然你也可以继承LuaSkeletonAnimation,自己封装 ...
随机推荐
- Windows平台ping测试局域网所有在用IP
由于工作需要,我在家里搭建了很多VM,同时智能家居设备也占用了很多IP.平日偶尔会有确认局域网内哪些IP目前在用的需求. 这个需求很简单,直接从网上也可以搜索到很多答案,最终找到一个经实际测试可用的方 ...
- svn更新项目之后，项目报错一大堆并且tomcat部署项目时找不到项目
原因是:svn更新项目以后jdk路劲不对,需要使用自己安装的jdk,即可.具体步骤如下 第一步:右击项目-->Build path-->Configure Build path... 第二 ...
- Spring框架的第三天
## Spring框架的第三天 ## ---------- **课程回顾:Spring框架第二天** 1. IOC的注解方式 * @Value * @Resource(name="" ...
- Spring Boot 全局异常捕获
import javax.servlet.http.HttpServletRequest; import org.springframework.web.bind.annotation.Control ...
- LeetCode #001# Two Sum（js描述）
索引 思路1:暴力搜索 思路2:聪明一点的搜索 思路3:利用HashMap巧解 问题描述:https://leetcode.com/problems/two-sum/ 思路1:暴力搜索 一个很自然的想 ...
- bzoj4361 isn（树状数组优化dp+容斥）
4361: isn Time Limit: 10 Sec Memory Limit: 256 MBSubmit: 938 Solved: 485[Submit][Status][Discuss] ...
- Linux 系统开启随机端口数量 调优
Linux系统随机端口 默认Linux系统开启的随机端口范围为 32768 ~ 65535.客户端连接服务监听端口需要使用到随机端口连接. Linux系统随机端口调优 1.添加内核配置参数:/etc/ ...
- 动态从数据库获取数据，省市县三级联动，有校验，导出Excel模板
话不多说,看效果图,直接上代码. sheet 商户表 hideSheet ,功能完成后隐藏的Sheet,用于储存下拉框中的信息,(以一定的规则将所需数据存储在表格中). 下面是代码 部分数据需要在导 ...
- VOC标签转化为YOLO标签
参考darknet自带的voc_label.py import xml.etree.ElementTree as ET import pickle import os from os import l ...
- 关闭vs的编译警告
现象:出现warning cxxxx.. 解决:项目,属性,C/C++,高级,禁用特定警告,把xxxx输入