Я пытаюсь выполнить простое поведение, похожее на каракули, когда звук 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();
});
});
Кажется, это отлично работает в Firefox, но Safari, похоже, имеет задержку каждый раз, когда вы нажимаете, даже если вы нажимаете несколько раз и аудиофайл загружается. В Safari на iPad ведет себя почти непредсказуемо.
Кроме того, при локальном тестировании производительность Safari, кажется, улучшается. Я предполагаю, что Safari загружает файл каждый раз. Это возможно? Как мне этого избежать? Спасибо!