解决html5 audio iphone,ipd,safari不能自动播放问题
来源:互联网 发布:欧元区经济 知乎 编辑:程序博客网 时间:2024/05/17 04:01
http://leiyongping88.iteye.com/blog/1831145
html 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]);
}
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});
});//绑定事件
- 解决html5 audio iphone,ipd,safari不能自动播放问题
- html5 audio 语音播放在手机端使用注意(iphone,ipd,safari)
- 解决ios上audio不能自动播放的问题以及监听audio播放状态
- 解决ios上audio不能自动播放,也不能连续播放的问题
- 在 iOS Safari 中假装自动播放 HTML5 audio(音乐) 的正确方式
- 解决ios微信下audio无法自动播放的问题
- audio 自动播放 iPhone微信客户端
- 手机HTML5 audio 无法自动播放下一首
- html5,audio标签的autoplay="autoplay"在iphone上无法播放的问题
- HTML5 Audio 在 iOS Safari 上的问题
- 处理iphone手机不能自动播放音频问题
- html - html5 audio 音乐自动播放,循环播放等
- 解决iphone下无法自动播放音乐问题
- 解决IOS通过HTML5播放Video或者Audio直接输出数据的问题
- 解决系统MPEG Layer-3 Audio Decoder不能播放位速高的MP3问题
- audio 在ios上自动播放问题
- Android 解决逐帧动画不能自动播放问题
- iPhone safari冒泡问题
- 在这个应用程序支持信息后面,
- 日期操作
- 论坛开源项目推荐(12.25):菜单(Menu)
- 为什么游戏完成度不高?怎么解决这个问题?
- UC开发者模式
- 解决html5 audio iphone,ipd,safari不能自动播放问题
- 产生 error: ORA-12505, TNS:listener does not currently的原因及其解决方法。
- zTree -- jQuery 树插件
- J2EE的技术体系
- Unity3D中常见的三类Shader的区别与用法
- java中关键词this和super的区别和举例;
- Log4J学习【十二】Properties文件中能够定义的配置项的格式和示例一
- mysql 基本命令
- 实现自己的ArrayList和HashMap