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="egclicked1='yes';document.getElementById( 'IMGa').src='../assets/images/play2.gif';
soundManager.createSound({id:'mySound1a',url:'../assets/audio/Track27.mp3',
onfinish:function(){egfinished1='yes'}
});
soundManager.play('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.getElementById('IMGb').src='../assets/images/play2.gif';
soundManager.createSound({id:'mySound2a',url:'../assets/audio/Track28.mp3',
onfinish:function(){egfinished2='yes'}});
soundManager.play('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.getElementById('IMGc').src='../assets/images/play2.gif';
soundManager.createSound({id:'mySound3a',url:'../assets/audio/Track29.mp3'});
soundManager.play('mySound3a');
} else {
alert('click again when second sound finished');
return;
}
}
}
;this.disabled='true'">
