Hello,
The code below works but can anyone suggest a better way of doing the
following?
The idea is that there are 3 images which when clicked each play a
different sound and change to a different image.
I want to have the user hear the sounds in sequence and also not to
play the next sound until the previous sound has finished.
Cheers
Geoff
<script type="text/javascript">
var egfinished1="no ";
var egfinished2="no ";
var egclicked1="no" ;
var egclicked2="no" ;
</script>
<h2>First Sound</h2>
<IMG alt="image" id="IMGa" src="../assets/images/play1.gif"
onClick="egclic ked1='yes';docu ment.getElement ById('IMGa').sr c='../assets/images/play2.gif';
soundManager.cr eateSound({id:' mySound1a',url: '../assets/audio/Track27.mp3',
onfinish:functi on(){egfinished 1='yes'}
});
soundManager.pl ay('mySound1a') ;
this.disabled=' true'">
<h2>Second Sound</h2>
<IMG alt="image" id="IMGb" src="../assets/images/play1.gif"
onClick="
egclicked2='yes ';
if (egclicked1 !='yes'){
alert('Play the first sound');
return;
} else {
if (egfinished1 == 'yes') {
document.getEle mentById('IMGb' ).src='../assets/images/play2.gif';
soundManager.cr eateSound({id:' mySound2a',url: '../assets/audio/Track28.mp3',
onfinish:functi on(){egfinished 2='yes'}});
soundManager.pl ay('mySound2a') ;
} else {
alert('click again when first sound finished');
return;
}
}
;this.disabled= 'true'">
<h2>Third Sound</h2>
<IMG alt="image" id="IMGc" src="../assets/images/play1.gif"
onClick="
if (egclicked1 !='yes'){
alert('Play the first sound');
return;
} else {
if (egclicked2 !='yes') {
alert('play the second sound');
return;
} else {
if (egfinished2==' yes') {
document.getEle mentById('IMGc' ).src='../assets/images/play2.gif';
soundManager.cr eateSound({id:' mySound3a',url: '../assets/audio/Track29.mp3'});
soundManager.pl ay('mySound3a') ;
} else {
alert('click again when second sound finished');
return;
}
}
}
;this.disabled= 'true'">
