Safari上的HTML5音频标签存在延迟 [英] HTML5 Audio tag on Safari has a delay
问题描述
我正在尝试完成一个简单的涂鸦式行为,即使用html标签在点击时会响起mp3/ogg声音.它应该可以在Firefox,Safari和Safari iPad下运行.
I'm trying to accomplish a simple doodle-like behaviour, where a mp3/ogg sound rings on click, using the html tag. It is supposed to work under Firefox, Safari and Safari iPad is very desireable.
我已经尝试了许多方法,并且得出以下结论:
I've tried many approaches and have come down to this:
HTML
<span id="play-blue-note" class="play blue" ></span>
<span id="play-green-note" class="play green" ></span>
<audio id="blue-note" style="display:none" controls preload="auto" autobuffer>
<source src="blue.mp3" />
<source src="blue.ogg" />
<!-- now include flash fall back -->
</audio>
<audio id="green-note" style="display:none" controls preload="auto" autobuffer>
<source src="green.mp3" />
<source src="green.ogg" />
</audio>
JS
function addSource(elem, path) {
$('<source>').attr('src', path).appendTo(elem);
}
$(document).ready(function() {
$('body').delegate('.play', 'click touchstart', function() {
var clicked = $(this).attr('id').split('-')[1];
$('#' + clicked + '-note').get(0).play();
});
});
这似乎在Firefox下效果很好,但是Safari似乎在您单击时会有延迟,即使您单击几次并加载了音频文件也是如此.在iPad上的Safari中,它的行为几乎不可预测.
This seems to work great under Firefox but Safari seems to have a delay whenever you click, even when you click several times and the audio file has loaded. On Safari on iPad it behaves almost unpredictably.
此外,当我在本地测试时,Safari的性能似乎有所提高,我猜想Safari每次都在下载文件.这可能吗?如何避免这种情况? 谢谢!
Also, Safari's performance seems to improve when I test locally, I'm guessing Safari is downloading the file each time. Is this possible? How can I avoid this? Thanks!
推荐答案
几分钟前,我刚刚回答了另一个iOS/<audio>
问题.似乎也适用于此:
I just answered another iOS/<audio>
question a few minutes ago. Seems to apply here as well:
禁止在iOS设备上预加载<audio>
和<video>
以节省带宽.
Preloading <audio>
and <video>
on iOS devices is disabled to save bandwidth.
在iOS上的Safari中(对于包括iPad在内的所有设备),用户可以 在蜂窝网络上,并按数据单元,预加载和 自动播放已禁用.在用户启动数据之前,不会加载任何数据.
In Safari on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and autoplay are disabled. No data is loaded until the user initiates it.
来源: 查看全文