Safari上的HTML5音频标签有延迟 [英] HTML5 Audio tag on Safari has a delay

问题描述

我正在尝试完成一个简单的类似涂鸦的行为，使用html标记在点击时响起mp3 / ogg声音。它应该在火狐浏览器，Safari和Safari iPad上运行。iPad是非常适合你的。

我尝试了很多方法，并且已经回到了这个目的：

HTML

 < span id =play-blue -noteclass =play blue>< / span> 
< span id =play-green-noteclass =play green>< / span> 
 
 
< audio id =blue-notestyle =display：nonecontrols preload =autoautobuffer> 
< source src =blue.mp3/> 
< source src =blue.ogg/> 
<！ - 现在包括闪回 - > 
< / audio> 
 
< audio id =green-notestyle =display：none控制preload =autoautobuffer> 
< source src =green.mp3/> 
< source src =green.ogg/> 
< / audio> 
  

JS

  function addSource（elem，path）{
 $（'< source>'）。attr（'src'，path）.appendTo（elem）; 
 
 $ b $（文档）.ready（函数（）{
 
 
 $（'body'）。delegate（'。play'， 'click touchstart'，function（）{
 var clicked = $（this）.attr（'id'）。split（' - '）[1]; 
 
 $（'＃ '+ clicked +'-note'）。get（0）.play（）; 
 
 
 
}）; 
 
}）; 
  

您可以在ign.com.uy / loog /

$上看到整个演示b
$ b

这似乎在Firefox下运行良好，但是每当你点击时Safari似乎都有延迟，即使你多次点击并且音频文件已加载。在iPad上的Safari上，它几乎无法预测。

此外，当我在本地测试时，Safari的性能似乎有所改善，我猜测Safari每次都在下载文件。这可能吗？我怎样才能避免这种情况？
谢谢！

解决方案

我刚回答了另一个iOS / < audio> 几分钟前的问题。似乎也适用于此处：

预加载< audio> 和< video> ; iOS设备上的被禁用以节省带宽。

$ b

在iOS上的Safari（适用于所有设备，包括iPad ），用户可能
在蜂窝网络上并按数据单元收费，预加载和
自动播放被禁用。直到用户启动数据才加载数据。

来源： Safari开发者库

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 veri 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();



    });

});  

You can actually see the whole demo at ign.com.uy/loog/

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.

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!

解决方案

I just answered another iOS/<audio> question a few minutes ago. Seems to apply here as well:

Preloading <audio> and <video> on iOS devices is disabled to save bandwidth.

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.

Source: Safari Developer Library

这篇关于Safari上的HTML5音频标签有延迟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！