Я сделал собственный менеджер аудио / видео, который отлично работает. Проблема в том, что я не ожидал, что человек добавит столько записей, сколько сделал, и теперь это довольно медленно. Звук не воспроизводится сразу после загрузки страницы в течение 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 и скорость моей страницы была значительно улучшена после моего редактирования, и это показало, что он не загружал аудио. Поэтому я не уверен, почему это занимает так много времени, чтобы играть на первом клике.
Страница с вопросом: Видео / Музыкальная Галерея
Есть идеи?
Задача ещё не решена.
Других решений пока нет …