我正在尝试获取音频文件以在iPad上的Safari中自动播放。如果我在Mac上使用Safari浏览该页面,就可以了。在iPad上,自动播放不起作用。
Answers:
更新:这是一个hack,并且在IOS 4.X及更高版本上不再起作用。此版本适用于IOS3.2.X。
这不是真的。Apple不想在iPad上自动播放视频和音频,因为您可以在移动网络上使用大量流量。我不会将自动播放用于在线内容。对于脱机HTML网站,这是一个很棒的功能,这就是我所使用的功能。
这是一个“ javascript虚假点击”解决方案:http : //www.roblaplaca.com/examples/html5AutoPlay/
从站点复制和粘贴代码:
<script type="text/javascript">
function fakeClick(fn) {
var $a = $('<a href="#" id="fakeClick"></a>');
$a.bind("click", function(e) {
e.preventDefault();
fn();
});
$("body").append($a);
var evt,
el = $("#fakeClick").get(0);
if (document.createEvent) {
evt = document.createEvent("MouseEvents");
if (evt.initMouseEvent) {
evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
el.dispatchEvent(evt);
}
}
$(el).remove();
}
$(function() {
var video = $("#someVideo").get(0);
fakeClick(function() {
video.play();
});
});
</script>
这不是我的资料。我前一段时间已经找到了这个,并在带有IOS 3.2.X的iPad和iPhone上测试了代码。
我还要强调一点,您无法执行此操作的原因是Apple做出的商业决定,而不是技术决定。毫无疑问,Apple没有合理的技术理由来禁用iPod Touch上的Web应用程序的声音。那只是一个WiFi设备,而不是可能产生昂贵带宽费用的电话,因此该参数对该设备的价值为零。他们可能会说他们正在帮助WiFi网络管理,但是我的WiFi网络上的带宽问题是我所关心的,而不是Apple的问题。
而且,如果他们真正关心的是防止不必要的带宽消耗过多,那么他们将提供允许用户选择加入Web应用声音的设置。而且,他们将采取某些措施来限制网站通过其他方式消耗等效带宽。但是没有这样的限制。一个网站可以在一遍又一遍地在后台下载巨大的文件,而Apple对此不太在乎。最后,我相信声音还是可以下载的,所以没有实际保存带宽!苹果只是不允许它们在没有用户交互的情况下自动播放,这使它们无法用于游戏,这当然是他们的真实意图。
苹果之所以屏蔽声音,是因为他们开始注意到HTML5应用程序的功能与本机应用程序一样强大,甚至更多。如果要在Web Apps中发出声音,则需要游说Apple,以停止像Microsoft这样的反竞争。这里没有可以解决的技术问题。
由于各种商业原因,Apple恼人地拒绝了iOS设备上的许多HTML5 Web标准。最终,您不能在触摸事件之前预加载或自动播放声音文件,它一次只能播放一种声音,并且不支持Ogg / Vorbis。但是,我确实找到了一个不错的解决方法,可以让您对音频有更多的控制。
<audio id="soundHandle" style="display:none;"></audio>
<script type="text/javascript">
var soundHandle = document.getElementById('soundHandle');
$(document).ready(function() {
addEventListener('touchstart', function (e) {
soundHandle.src = 'audio.mp3';
soundHandle.loop = true;
soundHandle.play();
soundHandle.pause();
});
});
</script>
基本上,您在第一次触摸事件时就开始播放音频文件,然后立即将其暂停。现在,您可以在整个Javascript中使用soundHandle.play()和soundHandle.pause()命令,并控制音频而不会发生触摸事件。如果您可以安排好时间,请在声音结束后立即暂停一下。然后,下次您再次播放它时,它将循环回到开头。这不能解决苹果在这里造成的所有混乱,但这是一种解决方案。
从iOS 4.2.1开始,假点击和.load()技巧都无法在任何iOS设备上自动播放音频。我知道的唯一选择是让用户实际执行单击操作并开始在单击事件处理程序中进行播放,而无需将.play()调用包装在任何异步(ajax,setTimeout等)中。
如果我弄错了,请告诉我。在最近一次更新之前,我在iPad和iPhone上都存在漏洞,它们似乎都已被关闭。
<video>
4.2.1上,我已经验证,只要.load()
thenet .play()
出现在同步的 click / tap处理程序中,它就可以工作。否则,它将失败。
我确认音频没有按所述方式工作(至少在运行4.3.5的iPad上)。特定的问题是音频不会以异步方法(ajax,计时器事件等)加载,但如果已预加载,它将播放。问题是负载必须在用户触发的事件上发生。因此,如果您可以为用户提供启动播放的按钮,则可以执行以下操作:
function initSounds() {
window.sounds = new Object();
var sound = new Audio('assets/sounds/clap.mp3');
sound.load();
window.sounds['clap.mp3'] = sound;
}
然后播放它,例如在ajax请求中,您可以
function doSomething() {
$.post('testReply.php',function(data){
window.sounds['clap.mp3'].play();
});
}
这不是最大的解决方案,但它可能会有所帮助,尤其是要知道罪魁祸首是非用户触发事件中的加载函数。
编辑:我找到了Apple的解释,它影响了iOS 4+:http : //developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html
尝试在音频或视频标签的.play()方法之前调用.load()方法,它们分别是HTMLAudioElement或HTMLVideoElement。那是它对我来说可以在iPad上运行的唯一方法!
在我看来,(至少现在)这个问题的答案已经清楚地记录在Safari HTML5文档中:
用户控制蜂窝网络上的下载
在iOS上的Safari(适用于包括iPad在内的所有设备)上的Safari中,用户可能位于蜂窝网络上,并按数据单元收费,因此禁用了预加载和自动播放功能。在用户启动数据之前,不会加载任何数据。这意味着,除非用户动作触发了play()或load()方法,否则在用户启动播放之前,JavaScript play()和load()方法也是无效的。换句话说,用户启动的“播放”按钮有效,但onLoad =“ play()”事件无效。
播放电影: <input type="button" value="Play" onClick="document.myMovie.play()">
这在iOS上不起作用: <body onLoad="document.myMovie.play()">
在iOS4.2下开发快速原型Web应用程序(开发版)时对此感到困惑。解决方案实际上很简单。请注意,您的HTML页面中似乎尚未包含标签,实际上您需要将标签动态地插入文档中(请注意,此示例使用Prototype 1.7来增强Java脚本的吸引力):
this.soundFile = new Element("audio", {id: "audio-1", src: "audio-1.mp3", controls: ""});
document.body.appendChild(this.soundFile);
this.soundFile.load();
this.soundFile.play();
由于您尚未设置控制器,因此无需使用CSS做任何棘手的操作即可将其隐藏/在屏幕外放置。
这似乎完美地工作。
Apple不完全支持该标准,但是有一种解决方法。他们的理由是蜂窝网络拥塞,也许是因为您将进入播放随机音频的页面。当设备使用wifi上网时,此行为不会改变,可能是出于一致性考虑。顺便说一句,无论如何,这些页面通常不是一个好主意。您不应该试图在每个网页上都添加配乐。那是错误的。:)
如果html5音频是由于用户操作而启动的,则它将播放。加载页面不算在内。因此,您需要将您的Web应用程序重组为一个多页应用程序。您不需要该链接即可打开当前播放音频的页面,而无需更改页面即可在当前页面上播放该链接。此“用户交互”规则适用于您可以在音频或视频元素上调用的html5方法。如果调用在页面加载时自动触发,则返回的调用没有任何影响,但是从事件处理程序调用时,它们可以工作。
如果使用以下方法创建音频元素:
var a = new Audio("my_audio_file.wav");
并suspend
通过以下方式添加事件监听器:
a.addEventListener("suspend", function () {console.log('suspended')}, false);
然后将文件加载到移动Safari(iPad或iPhone)中,您会在开发者控制台中看到“已暂停”记录。根据HTML5规范,这意味着:“用户代理当前有意不在获取媒体数据,但没有下载整个媒体资源。”
调用后续的a.load(),测试“ canplay”事件,然后使用a.play()似乎是自动触发声音的合适方法。
与jQuery配合使用,并在Ipad v.5.1.1上进行了测试
$('video').get(0).play();
您必须从页面添加/删除视频元素。
我通过为允许触发音频的所有事件附加一个事件处理程序来处理此问题,该事件处理程序将触发body元素,触发具有自动播放功能的任何html音频元素播放一次。
var mobile = /iPad|iPhone|iPod|android/.test(navigator.userAgent) && !window.MSStream;
if (mobile) {
$('body').on('touchstart click doubleclick keydown', function() {
$("audio[autoplay='autoplay']").each(
function(){
this.play();
this.removeAttribute('autoplay');
});
});
}
这似乎可行:
<html>
<title>
iPad Sound Test - Auto Play
</title>
</head>
<body>
<audio id="audio" src="mp3test.mp3" controls="controls" loop="loop">
</audio>
<script type="text/javascript">
window.onload = function() {
var audioPlayer = document.getElementById("audio");
audioPlayer.load();
audioPlayer.play();
};
</script>
</body>
</html>
在此处查看其运行情况:http : //www.johncoles.co.uk/ipad/test/1.html(已存档)
从iOS 4.2开始,此功能不再有效。抱歉。