javascript — изменение изображения при воспроизведении звука (jQuery, HTML5)

Мне нужна помощь с этим:

<script>
$(window).load(function(){
function swapImages(){
var $active = $('#myGallery .active');
var $next = ($('#myGallery .active').next().length > 0) ? $('#myGallery .active').next() : $('#myGallery img:first');
$active.fadeOut(function(){
$active.removeClass('active');
$next.fadeIn().addClass('active');
});
}

$('#audio').click(function() {
alert("YESSSSSSSSSSSS!");
setInterval("swapImages()", 5000);
});
});
</script>

«Функция щелчка» не работает. Я должен упомянуть, что аудио часть будет загружена с файлом PHP после предыдущего вызова jquery для другого действия. Так что я могу сделать?

Спасибо!

<audio controls='controls' id='audio'>
<source src=". $final_file ." type='audio/mp3'/>
</audio>

1

Решение

Если аудиофайл загружен на более позднем этапе, тогда сделайте это с помощью .on (), а не .click ()

$('body').on('click', '#audio', function() {
alert("YESSSSSSSSSSSS!");
setInterval("swapImages()", 5000);
});
0

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

Я предполагаю, что вы хотите изменить фон во время воспроизведения песни, вы можете попробовать следующий код …

<script>
$(window).load(function(){
function swapImages(){
var $active = $('#myGallery .active');
var $next = ($('#myGallery .active').next().length > 0) ? $('#myGallery .active').next() : $('#myGallery img:first');
$active.fadeOut(function(){
$active.removeClass('active');
$next.fadeIn().addClass('active');
});
}

var aud= document.getElementById('audio');
aud.addEventListener('play', onStart);
aud.addEventListener('pause', onEnded);
aud.addEventListener('ended', onEnded);
function onEnded(){
clearInterval(window.audInterval);
}
function onStart(){
alert('Started playing...');
window.audInterval = setInterval(swapImages, 5000);
}
});
</script>

p.s: попробуйте и используйте как можно меньше JQuery. Просто мои два цента.

0

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