jquery swap sounds on rollover...
- Started
- Last post
- 1 Response
- wwfc
happy mondays all - wondering if there are any jquery heads on here that can help me out with something.
i have some script in a page that triggers an audio clip when an area/image/text is moused over/clicked etc....
does anyone know how i can swap between two audio clips on a second, third rollover - or rather swap between the two triggerings. so on initial mouse over it plays 1.mp3 then when it is moused over again it plays 2.mp3...
here is the script that is above the head...
<script type='text/javascript'>//<![CDATA[ $(function(){ $(function(){ $('.birds').each(function(){ var $this = $(this), birdaudio = $this.find('audio')[0]; $this.hover(function(){ birdaudio.currentTime = 0; birdaudio.play(); }, function(){ birdaudio.pause(); }); }); }); });//]]></script>
and this is code on the relevant area/image etc... that triggers the audio...
<div id="apDivName"class="birds">
<audio src="1.mp3" preload="auto"></audio>
<div id="div-id-name">
div content in this case some copy
</div>any thoughts or pointers/links etc... for how i can achieve this?
i know there will be people shaking there head at the audio thing but it is a pre-requisite of the client i'm afraid... so please don't shoot the messenger!!! :-p
- chrisRG0
I'd create do something like this:
keep track of the current file playing
var currentSong = 0;create an array with all song files:
var songFiles = [file1, file2, file3, file4];then on every rollover you go to the next array index:
function playNextSong(){
currentSong++;
if(currentSong >= songFiles.length) currentSong = 0;check here to learn how to swap the song:
http://stackoverflow.com/questio…
}