javascript - Safari上的HTML5音频标签存在延迟

我正在尝试完成一个简单的Doodle式行为，即使用html标签在点击时响起mp3/ogg声音。它应该可以在Firefox，Safari和Safari iPad下工作是非常可取的。

我尝试了许多方法，并得出以下结论:

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中，它的行为几乎不可预测。

另外，当我在本地测试时，Safari的性能似乎有所提高，我猜想Safari每次都会下载文件。这可能吗？如何避免这种情况？
谢谢!

最佳答案

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

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



资料来源:Safari Developer Library