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.

来源: 查看全文