Аудиотег HTML5 в Safari имеет задержку

Я пытаюсь реализовать простое поведение, похожее на каракули, когда звук mp3/ogg звучит по клику, используя тег html. Предполагается, что он будет работать в 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();



    });

});  

Вы можете увидеть всю демонстрацию на ign.com.uy/loog/

Кажется, это работает отлично подходит для Firefox, но Safari, кажется, имеет задержку всякий раз, когда вы нажимаете, даже если вы нажимаете несколько раз и загружается аудиофайл. В Safari на iPad он ведет себя практически непредсказуемо.

Кроме того, кажется, что производительность Safari улучшается, когда я тестирую локально, я предполагаю, что Safari каждый раз загружает файл. Это возможно? Как я могу этого избежать? Спасибо!