解决html5 audio iphone,ipd，safari不能自动播放问题
(在safri on ios里面明确指出等待用户的交互动作后才能播放media，也就是说如果你没有得到用户的action就播放的话就会被safri拦截)
var g_audio = window.g_audio = new Audio(); //创建一个audio播放器
var g_event = window.g_event = new
function() {
var events = ['load', 'abort', 'canplay', 'canplaythrough', 'durationchange', 'emptied', 'ended', 'error', 'loadeddata', 'loadedmetadata', 'loadstart', 'pause', 'play', 'playing', 'progress', 'ratechange', 'seeked', 'seeking', 'stalled', 'suspend', 'timeupdate', 'volumechange', 'waiting', 'mediachange'];
g_audio.loop = false;
g_audio.autoplay = true;
g_audio.isLoadedmetadata = false;
g_audio.touchstart = true;
g_audio.audio = true;
g_audio.elems = {};
g_audio.isSupportAudio = function(type) {
type = type || "audio/mpeg";
try {
var r = g_audio.canPlayType(type);
return g_audio.canPlayType && (r == "maybe" || r == "probably")
} catch(e) {
return false;
}
};
g_audio.push = function(meta) {
g_audio.previousId = g_audio.id;
g_audio.id = meta.song_id;
g_audio.previousSrc = g_audio.src;
g_audio.previousTime = 0.00;
g_audio.src = g_audio.currentSrc = meta.song_fileUrl;
g_audio.isLoadedmetadata = false;
g_audio.autobuffer = true;
g_audio.load();
g_audio.play();
if (g_audio.previousSrc !== g_audio.src) {
g_audio.play();
}
};
for (var i = 0,
l = events.length; i < l; i++) { (function(e) {
var fs = [];
this[e] = function(fn) {
if (typeof fn !== 'function') {
for (var k = 0; k < fs.length; k++) {
fs[k].apply(g_audio);
}
return;
}
fs.push(fn);
g_audio.addEventListener(e,
function() {
fn.apply(this);
});
};
}).apply(this, [events[i]]);
}
this.ended(function() { //播放结束
});
this.load(function() { //加载
this.pause();
this.play();
});
this.loadeddata(function() {
this.pause();
this.play();
});
this.loadedmetadata(function() {
this.isLoadedmetadata = true;
});
this.error(function() { //请求资源时遇到错误
});
this.pause(function() { //歌曲暂停播放
});
this.play(function() { //歌曲播放
});
};
$$$$(document).ready(function() {
if (/i(Phone|P(o|a)d)/.test(navigator.userAgent)) {
$$$$(document).one('touchstart',
function(e) {
g_audio.touchstart = true;
g_audio.play();
g_audio.pause();
return false;
});
}
});
audio使用: $$$$("#main").unbind("click").bind("click",
function() {
//gid 表示歌曲id,只是一个表示，没有值不影响播放
//song_fileUrl :播放歌曲地址，不能为空，有效地址
g_audio.elems["id"] = gid;
g_audio.push({
song_id: gid,
song_fileUrl: json.URL
});
}); //绑定事件
方式二：
版权归作者所有，任何形式转载请联系作者。
作者：U_U（来自豆瓣）
来源：https://www.douban.com/note/527250492/
ake auto play html audio in iOS Safari the right way
由于 iOS Safari 限制不允许 audio autoplay, 必须用户主动交互(例如 click)后才能播放 audio, 因此我们通过一个用户交互事件来主动 play 一下 audio.
这个坑相信大家都已经踩过了, 在 iOS 9 没出现以前, 这样的 hack 方案还是妥妥的.
但 iOS 9 出现后, 发现这个方案"失效"了.
没有办法, 看来是时候升级一下 hack 方案了, 于是仔细看了下 audio 的事件.
对于能够自动播放时事件的顺序如下
loadstart -> loadedmetadata -> loadeddata -> canplay -> play -> playing
对于不能自动播放时触发的事件因系统版本不同而不同
* iPhone5 iOS 7.0.6 loadstart
* iPhone6s iOS 9.1 loadstart -> loadedmetadata -> loadeddata -> canplay
最终发现相比原来的 hack 方案, 对于 iOS 9 还需要额外的 load 一下, 否则直接 play 不能让 audio 开始播放.
audioEl.load(); // iOS 9
audioEl.play(); // iOS 7/8 仅需要 play 一下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Fake auto play html audio in iOS Safari the right way</title>
</head>
<body>
<h1>在 iOS Safari 中假装自动播放 HTML5 audio(音乐) 的正确方式</h1>
<p>核心原理: 通过一个用户交互事件来主动 play 一下 audio</p>
<br>
<br>
<br>
<audio id="bgmusic" autoplay preload loop controls></audio>
<script>
(function() {
function log(info) {
console.log(info);
// alert(info);
}
function forceSafariPlayAudio() {
audioEl.load(); // iOS 9 还需要额外的 load 一下, 否则直接 play 无效
audioEl.play(); // iOS 7/8 仅需要 play 一下
} var audioEl = document.getElementById('bgmusic'); // 可以自动播放时正确的事件顺序是
// loadstart
// loadedmetadata
// loadeddata
// canplay
// play
// playing
//
// 不能自动播放时触发的事件是
// iPhone5 iOS 7.0.6 loadstart
// iPhone6s iOS 9.1 loadstart -> loadedmetadata -> loadeddata -> canplay
audioEl.addEventListener('loadstart', function() {
log('loadstart');
}, false);
audioEl.addEventListener('loadeddata', function() {
log('loadeddata');
}, false);
audioEl.addEventListener('loadedmetadata', function() {
log('loadedmetadata');
}, false);
audioEl.addEventListener('canplay', function() {
log('canplay');
}, false);
audioEl.addEventListener('play', function() {
log('play');
// 当 audio 能够播放后, 移除这个事件
window.removeEventListener('touchstart', forceSafariPlayAudio, false);
}, false);
audioEl.addEventListener('playing', function() {
log('playing');
}, false);
audioEl.addEventListener('pause', function() {
log('pause');
}, false); // 由于 iOS Safari 限制不允许 audio autoplay, 必须用户主动交互(例如 click)后才能播放 audio,
// 因此我们通过一个用户交互事件来主动 play 一下 audio.
window.addEventListener('touchstart', forceSafariPlayAudio, false); audioEl.src = 'http://www.w3school.com.cn/i/song.mp3';
})();
</script>
</body>
</html>
解决html5 audio iphone,ipd，safari不能自动播放问题的更多相关文章
- ios加载html5 audio标签用js无法自动播放
html5 audio标签在ios 微信浏览器中是无法自动播放的,最近在做一个小的项目遇到这个问题,安卓和pc都是正常的,唯独ios不行,查阅了很多资料,找到了以下方法,也许不是最好用的方法,如果有更 ...
- html5 video微信浏览器视频不能自动播放
html5 video微信浏览器视频不能自动播放 一.微信浏览器(x5内核): 1.不能自动播放 2.全屏 3.最顶层(z层的最顶层) 二.ios系统解决方案:(无phone手机未测试) <au ...
- 解决 iPhone 微信 H5 无法自动播放音乐问题
使用 wx sdk 在html导入sdk js文件.(如果网站是https导入的sdk也要使用https!) 然后在 wx.ready 中设置 play 方法并复制给全局变量 fm,当需要使用的时候再 ...
- 解决在微信中部分IOS不能自动播放背景音乐
前言在做各种HTML5场景页面的时候,插入背景音乐是一个很普遍的需求.我们都知道,IOS下的safari是无法自动播放音乐的,以至一直以来造成一种错误的认识,iso是无法自动播放媒体资源的.直到微信火 ...
- HTML5 Audio时代的MIDI音乐文件播放
大家都知道,HTML5 Audio标签能够支持wav, webm, mp3, ogg, acc等格式,但是有个很重要的音乐文件格式midi(扩展名mid)却在各大浏览器中都没有内置的支持,因为mid文 ...
- 解决移动端浏览器 HTML 音频不能自动播放的三种方法
https://blog.csdn.net/PY0312/article/details/90349386 由于Android,IOS移动端的浏览器以及微信自带的浏览器为了用户更好的体验,规定不自动播 ...
- h5 audio标签在手机上不能自动播放？？？？
最近在做一个微信端的项目,快到接近尾声的时候,发现还没放入音频,于是乎,放入音频,在电脑端测试一切正常,无阻碍. 后来在手机上测试,发现背景音乐不能播放,于是开始找错,刚开始以为是IIS服务器出错,结 ...
- 关于html5 audio 标签在ios系统上不能正常自动播放的解决办法
由于 iOS Safari 限制不允许 audio autoplay, 必须用户主动交互(例如 click)后才能播放 audio, 因此我们通过一个用户交互事件来主动 play 一下 audio. ...
- 微信的audio无法自动播放的问题
一.问题 最近做了一个html5的项目,里面涉及到音乐播放,项目要求音乐进入页面就自动播放,于是我就想到了html5的audio标签,将mp3引入进去. 1.在audio标签里引入了autoplay属 ...
随机推荐
- win10编译caffe跑faster-rcnn(cuda7.5)
2017年1月13日 15:46:04 github.com/Microsoft/caffe这版现在不算是BVLC/caffe的官方windows分支:官方windows分支是一个叫willyd的家伙 ...
- ZOJ 3203 灯泡
题面 相比 wildleopard 的家,他的弟弟 mildleopard 比较穷.他的房子是狭窄的而且在他的房间里面仅有一个灯泡.每天晚上,他徘徊在自己狭小的房子里,思考如何赚更多的钱.有一天,他发 ...
- **linux实用命令之如何移动文件夹及文件下所有文件
http://www.linuxde.net/2013/02/12448.html 格式: mv [选项(option)] 源文件或目录 目标文件或目录 使用命令: mv webdata /bin/u ...
- 【LOJ】#2114. 「HNOI2015」菜肴制作
题解 把所有边反向 从小到大枚举每个点,把每个点能到达的点挑出来,判完无解后显然是一个DAG,然后在上面求一个编号最大的拓扑序,把这些点全部标记为已选,把每次求得的拓扑序倒序输出 代码 #includ ...
- 利用 ImageAI 在 COCO 上学习目标检测
ImageAI是一个python库,旨在使开发人员能够使用简单的几行代码构建具有包含深度学习和计算机视觉功能的应用程序和系统. 这个 AI Commons 项目https://commons.spec ...
- Java NIO -2
NIO http://www.cnblogs.com/puyangsky/p/5840873.html -- 操作系统与 Java 基于流的 I/O模型有些不匹配.操作系统要移动的是大块数据(缓冲区) ...
- List,Set的区别
1.List,Set都是继承自Collection接口2.List特点:元素有放入顺序,元素可重复 ,Set特点:元素无放入顺序,元素不可重复(注意:元素虽然无放入顺序,但是元素在set中的位置是有该 ...
- Django（request和response）
原文链接: https://blog.csdn.net/weixin_31449201/article/details/81043326 Django中的请求与响应 一.请求request djang ...
- Ubuntu 16.04 安装WPS
1.下载安装包和缺少的字体 安装包下载[http://wps-community.org/download.html?vl=a21#download](这里下载的是最新的安装包) 缺少的字体下载[链接 ...
- ARM汇编编程基础之一 —— 寄存器
ARM的汇编编程,本质上就是针对CPU寄存器的编程,所以我们首先要弄清楚ARM有哪些寄存器?这些寄存器都是如何使用的? ARM寄存器分为2类,普通寄存器和状态寄存器 寄存器类别 寄存器在汇编中的名称 ...