I have elements on my page that animate in and when they do I would like each of them to have their own sound. The animation is as follows, this includes the targetBeep sound.
targetBeep = new Audio('22540839_interface-alarm-03_by_umcsound_preview.mp3');
$("#top-left").delay(1000).animate({"opacity": "1"}, 1).animate({"color": "#FFFFFF"},100).animate({"color": "#323035"},100).animate({"color": "#FFFFFF"},100).animate({"color": "#323035"},100);
I would like the beep when it animates from #FFFFFF to #323035. I tried putting targetBeep.play(); in the animation code but it didn't work.
Provided you're using at least jQuery v1.8, you can use the start or complete options in .animate() (depending on exactly when you want the sound to play)
$("#top-left")
.delay(1000)
.animate({"opacity": "1"}, 1)
.animate({"color": "#FFFFFF"}, {
duration: 100,
start: () => {
targetBeep.play()
}
})
.animate({"color": "#323035"}, 100)
.animate({"color": "#FFFFFF"}, 100)
.animate({"color": "#323035"}, 100);