Загружать аудиофайл только при нажатии на ссылку

Я сделал собственный менеджер аудио / видео, который отлично работает. Проблема в том, что я не ожидал, что человек добавит столько записей, сколько сделал, и теперь это довольно медленно. Звук не воспроизводится сразу после загрузки страницы в течение 15-20 секунд, после этого все воспроизводится нормально.

Я запрашиваю базу данных через php, а затем этот jQuery:

<?php
foreach($results as $row) {
?>
var audioElement<?=$row[0]?> = document.createElement('audio');
audioElement<?=$row[0]?>.setAttribute('class', 'div-<?=$row[0]?>');
audioElement<?=$row[0]?>.setAttribute('src', '<?=$row[4]?>');
$.get();
audioElement<?=$row[0]?>.addEventListener('load', function() {
pause(playing);
play(<?=$row[0]?>);
}, true);
$('.play<?=$row[0]?>').click(function() {
if (playing==<?=$row[0]?>) {
pause(<?=$row[0]?>);
} else {
pause(playing);
play(<?=$row[0]?>);
}
});
<?php

}

$row[0] будучи идентификатором в базе данных и $row[4] путь к аудиофайлу. Я попытался изменить его так:

    <?php
foreach($results as $row) {
?>
var audioElement<?=$row[0]?> = document.createElement('audio');
audioElement<?=$row[0]?>.setAttribute('class', 'div-<?=$row[0]?>');

// added the line below
$('.play<?=$row[0]?>').click(function(){

audioElement<?=$row[0]?>.setAttribute('src', '<?=$row[4]?>');

// also added
});
$.get();
audioElement<?=$row[0]?>.addEventListener('load', function() {
pause(playing);
play(<?=$row[0]?>);
}, true);
$('.play<?=$row[0]?>').click(function() {
if (playing==<?=$row[0]?>) {
pause(<?=$row[0]?>);
} else {
pause(playing);
play(<?=$row[0]?>);
}
});
<?php
}

Я надеялся загрузить аудиофайл только после того, как нажата соответствующая ссылка, однако при первом клике он все еще имеет время задержки. Я провел тесты в webpagetest.org и скорость моей страницы была значительно улучшена после моего редактирования, и это показало, что он не загружал аудио. Поэтому я не уверен, почему это занимает так много времени, чтобы играть на первом клике.

Страница с вопросом: Видео / Музыкальная Галерея

Есть идеи?

1

Решение

Задача ещё не решена.

Другие решения

Других решений пока нет …

По вопросам рекламы ammmcru@yandex.ru
Adblock
detector