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