I have a for loop attached to a listener on an audio file that displays (animates) objects based on the audio's time position. That all works. The issue is that in Safari 5.1.5 only the first object animates, the rest just become visible (appear on screen, no animation). I was wondering if anyone had seen this before, and if there was a work around.
function loadAudio() {
aud = document.getElementById("audio");
aud.src = xmlDoc.getElementsByTagName("cues")[0].getAttribute("audioURL");
aud.load();
aud.addEventListener("timeupdate", function(){
for(var i = 0; i<cues.length; i++) {
if(aud.currentTime >= cues[i].time && !cues[i].on) {
q = cues[i].p;
cues[i].on = true;
//alert(q);
$(q).css({opacity: 0.0, visibility: "visible"}).stop().animate({opacity: 1.0});
}
}
});
}
I have seen something similar, although not related to audio at all. If you use put the final .css() call in it's own setTimeout() that may fix it. See: Safari: Absolutely positioned DIVs not moving when updated via DOM