[英]Change picture when audio is playing (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>
“点击功能”不起作用。 我不得不提到,在先前的jquery调用另一个动作之后,音频部分将被PHP文件加载。 那么,我该怎么办?
谢谢!
<audio controls='controls' id='audio'>
<source src=". $final_file ." type='audio/mp3'/>
</audio>
如果音频文件是在以后加载的,请使用.on()而不是.click()进行加载
$('body').on('click', '#audio', function() {
alert("YESSSSSSSSSSSS!");
setInterval("swapImages()", 5000);
});
我假设您想在播放歌曲时更改背景,可以尝试以下代码...
<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>
ps:尝试并根据需要使用尽可能少的JQuery。 只是我的两分钱。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.