add a sound delay function [Archive]

Click to See Complete Forum and Search --> : add a sound delay function

Code One

06-18-2003, 11:45 PM

Hello I am trying to make a javascript piano and I have a script which allows the user to click a sound which is in my example a text link, anyway the text link (which is linked to a sound) is saved in memory by order of click. Lets say there are three keys, the user presses the 2 key first, then the 1 key second, and finally he pushes the 3 key last. Ok? Now once the user has finished clicking the text links (keys) and then pushes the play button [review script] the sounds are played all at one time. I am looking for a script that allows for the sounds to play one by one without the overlapping part. I would like for the user to still push the play button but instead of the all at once playback I would like for the sounds to play for this example (2,1,3, keys), in that order [2-1-3].

*note the order of the sounds being played back is determined by the order of clicks from the user.

Heres the script to add the delay function to:
==========================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Sound Test</title>

<script language="JavaScript">
var playlist = new Array();
var x = -1;

function add(sound){
x=x+1;
playlist[x] = sound;
}//ends add()

function play_it(){
for (i = 0; i < playlist.length; i++){
document[playlist[i]].Play();
}//ends FOR
}//ends play_it()

function reset_list(){
var playlist = new Array();
var x = -1;
}
</script>
</head>

<body>
<a href="javascript: add('gong')">Gong Sound</a><br><br>

<a href="javascript: add('foghorn')">Fog Horn</a><br><br>

<a href="javascript: add('cuckoo')">Cuckoo Clock</a><br><br>

<form>
<input type="button" value="Play" onClick="play_it()">  

<input type="button" value="Reset" onClick="reset_list()">
</form>


<embed name="gong" src="gong.wav" autostart="false" hidden="true" loop="false"></embed>

<embed name="foghorn" src="foghorn.wav" autostart="false" hidden="true" loop="false"></embed>

<embed name="cuckoo" src="cuckoo.wav" autostart="false" hidden="true" loop="false"></embed>

</body>
</html>
===========================================
I think the reset function is wrong too, I am a total newbie to jscript, so anyone who feels like helping me would be very much appreciated.

Thanks in advance,

Code One

Gollum

06-19-2003, 02:23 AM

Not sure if there is any event you can hang off on the <embed> objects, but if you know how long each sound is going to be you could use window.setTimeout() to schedule the next play...

var oTimes = { gong:1500, foghorn:1000, cuckoo:3000};
var playList = ['gong','foghorn','cuckoo'];
var x = 0;
function Play()
{
document[playlist[x]].Play();
window.setTimeout("Play();", oTimes[playlist[x]]);
x++;
}

Code One

06-19-2003, 03:01 AM

gollum I tried to wing it but to no good. I was wondering if you could show me how it would be implemented with the code I posted above. I have been having some horrible luck threw out this whole scripting process concerning this code. It seems like I am getting closer to the end little by little, and now Im stuck and was wondering if someone could help me out with this one. I appreciate all the help.

Thanks alot!

Code One

Gollum

06-19-2003, 04:24 AM

try this...

<html>
<head>
<title>Sound Test</title>

<script language="JavaScript">
var playlist = new Array();
var x = -1;

function add(sound)
{
x=x+1;
playlist[x] = sound;
}//ends add()

var oTimes = { gong:1500, foghorn:1500, cuckoo:1500};
function play_bit()
{
x++;
if ( x < playlist.length )
{
document[playlist[x]].Play();
window.setTimeout("play_bit();", oTimes[playlist[x]]);
}
else
{
x--;
}
}
function play_it()
{
x = -1;
play_bit();
}

function reset_list()
{
var playlist = new Array();
var x = -1;
}
</script>
</head>

<body>
<a href="javascript: add('gong')">Gong Sound</a><br><br>

<a href="javascript: add('foghorn')">Fog Horn</a><br><br>

<a href="javascript: add('cuckoo')">Cuckoo Clock</a><br><br>

<form>
<input type="button" value="Play" onClick="play_it()">

<input type="button" value="Reset" onClick="reset_list()">
</form>


<embed name="gong" src="gong.wav" autostart="false" hidden="true" loop="false"></embed>

<embed name="foghorn" src="foghorn.wav" autostart="false" hidden="true" loop="false"></embed>

<embed name="cuckoo" src="cuckoo.wav" autostart="false" hidden="true" loop="false"></embed>

</body>
</html>

You will need to substitute proper values for the sound lengths but it should work.

Code One

06-19-2003, 01:11 PM

You did it!!!!! I have been working on this problem since th beginning of man, and I thought it would never see light, thanks for helping out as much as you did and also for making it all work!!

Your a genius,

Code One