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,自己封装 ...
随机推荐
- 微信小程序组件封装
第一步,在page下面新建一个template文件,如下图 第二部,在template.wxml中编写公用组件即要封装的代码模块 <!--pages/template/template.wxml ...
- windows程序设计 vs2012 新建win32项目
1.文件->新建->项目 2.选择win32项目,确定 3.下一步 4.选择windows应用程序,选中空项目,安全开发生命周期不选.点击完成. 5.空项目建好了.
- 分治法——快速排序(quicksort)
先上代码 #include <iostream> using namespace std; int partition(int a[],int low, int high) { int p ...
- JVM探秘2--详解内存溢出OutOfMemoryError异常
JVM运行时内存被划分成多个区域,而除了程序计数器之外,其他几个区都会出现OutOfMemoryError异常,主要原因就是对应内存区域的内存不足以再分配内存,一般要么是内存泄漏了要么就是内存参数设置 ...
- 杂谈迁移tomcat项目到docker，以及遇到的问题
1.迁移tomcat项目异常简单,下一个tomcat的container,然后直接把webapps放进去就行了. #tomcat版本随原始项目版本而变,具体版本列表查看:https://hub.doc ...
- webform ajax 异步请求
第一种就是对应方法的请求 虽然对应方法 但还是会刷新页面 webform是基于事件的 每次请求都会出发pageload <script> $(function () { $("# ...
- Redis学习-list数据类型
list类型是一个链表结构,主要功能有push,pop等.而且list是一个双向链表,可以通过相关操作进行集合的头部或者尾部添加,删除元素. lpush key string 在key对应的list的 ...
- ★Pandas 零碎知识
1 修改属性 1.1 修改1列的类型属性: df['总金额'] = pd.to_numeric(df['总金额']) #转变dataframe的1列为数值型 1.2 多列设为数值型:(使用DataFr ...
- Windows下应用级别的IIS负载均衡方案 Application Request Route
转载于:https://blog.csdn.net/2000killer/article/details/51228625 序言 随着公司业务的发展,后台业务就变的越来越多,然而服务器的故障又像月经一 ...
- 自制操作系统Antz(2)——进入保护模式 (上) jmp到保护模式
Antz系统更新地址: https://www.cnblogs.com/LexMoon/category/1262287.htm Linux内核源码分析地址:https://www.cnblogs.c ...