Can I play a repetitive sound and test response time in JS?

[Larry L]

I want to play a repetitive sound, and have a user click on a button each
time it plays (say 5-10 times) and measure how far off he is from the
sound each time.

The only way I know to play a sound in JS is bgsound, and I know how to
loop and pause, so as to do the 1st part. I haven't figured out how to
then test the delay in response. Since some of the responses may also be
*before* the sound plays by some milliseconds, that also compicates it.

My real question is, can this even be done in JS, or should I be in PHP,
ASP, or do you have another suggestion. I'm thinking it needs to run
client-side so there are no network delays, and the results would be
reasonably accurate on different machines. I could easily write it in VB
but I don't want them to have to download anything. I'd just like it to
run from the page.

Any ideas would sure be appreciated.

Larry

 

[Jc]

You can use (new Date()).getTime() to get the current time as
milliseconds, and compare it to see how many milliseconds have elapsed.

For example:

var iStartTime = (new Date()).getTime();
//.... some delay here ....
alert("Milliseconds elapsed = "+((new Date()).getTime()-iStartTime));

You'll probably want to prevent the user from clicking the button
before the sound plays by adding a small (3-8 second) random delay to
the time until the sound plays each time they pre-maturely click. Make
sure there is some visual indication of the fact that you've added a
delay, perhaps by changing the status bar (status = "Wait for the sound
before clicking the button.").

Note that you can use the Math object's "random" method to generate a
random number. For a good IE reference (JScript), see
http://msdn.microsoft.com/library/en-us/script56/html/js56jslrfjscriptlanguagereference.asp,
click Objects -> Math Object -> random method.

Additionally, you'll want to ensure that you use the onmousedown event
on the button instead of onclick, because onclick does not fire until
the user _releases_ the mouse button, while onmousedown fires when they
depress the mouse button.

 

[Larry L]

You can use (new Date()).getTime() to get the current time as
milliseconds, and compare it to see how many milliseconds have elapsed.

For example:

var iStartTime = (new Date()).getTime();
//.... some delay here ....
alert("Milliseconds elapsed = "+((new Date()).getTime()-iStartTime));

You'll probably want to prevent the user from clicking the button
before the sound plays by adding a small (3-8 second) random delay to
the time until the sound plays each time they pre-maturely click. Make
sure there is some visual indication of the fact that you've added a
delay, perhaps by changing the status bar (status = "Wait for the sound
before clicking the button.").

Note that you can use the Math object's "random" method to generate a
random number. For a good IE reference (JScript), see
http://msdn.microsoft.com/library/en-us/script56/html/js56jslrfjscriptlanguager
eference.asp,
click Objects -> Math Object -> random method.

Additionally, you'll want to ensure that you use the onmousedown event
on the button instead of onclick, because onclick does not fire until
the user _releases_ the mouse button, while onmousedown fires when they
depress the mouse button.

JC,

Thanks, but not what I'm trying to accomplish. I know how to do what you
suggest, but I need something different. The sound has to be "in rhythm"
and I need to be able to find the time *before or after* it that a button
is clicked, done multiple times in a row. Essentially tapping a button to
a metronome and measuring how close you come.

I figured I could use an array with the total times from the 1st sound,
subtracting the normal gap out for each one to get the before & after. I
was also going to use onfocus for the reason you suggested.

So I ask again, can this be done in JS, or am I going to need something
else?

Larry

 

[Richard Cornford]

Larry L wrote:

Thanks, but not what I'm trying to accomplish.

<snip>

The quality of the question influences the nature of the answers it
attracts. If you don't explain what you are trying to accomplish people
won't know what it is (when I read the question I was left wondering
what the point of attempting this was, always useful information to give
when you don't know how to implement something yourself).

So I ask again, can this be done in JS, or am I
going to need something else?

If you want to synchronise the playing of sounds with monitoring user
input then the normal browser object model is going to be hard work (you
just don't have that much control over when a sound plays (if it ever
does)). I suspect that Flash would be the easiest medium for
implementation. You have to rely on the user having a Flash plug-in but
browsers need a plug-in to play sound anyway and at least with Flash it
will be the same plug-in each time (if maybe different versions).

You probably cannot time anything with Flash to less than the frame
interval, but javascript Date objects are not accurate to less than 10
milliseconds anyway.

Richard.

 

[Jc]

As far as recording events (such as when the user clicks the button and
when the master "heart-beat" cue occurs), and processing the timing
details of these events and displaying the results to the user,
javascript is entirely capable of doing this work.

However, I haven't played a whole lot with playing sounds, I know you
can embed Windows Media Player in the page using the <object> tag, and
there are quite a few options you can set. Not sure if it lets you do
things like ask it at what "time index" it is currently at as it plays
the sound, if it did that would likely allow you to achieve enough
accuracy to make this feasible.

And that's the real question here - how to make this accurate. It is
entirely possible to do what you are asking in javascript, but unless
you have some feedback as to exactly when the sound starts, and some
hard-coded information like delay between repititions, it won't be
accurate.

Assuming you're not limited to sound cues only, I would suggest using
visual cues, these can be controlled through DHTML, and would allow
decent accuracy.

A visual cue could be as simple as toggling the visibility of an object
on the screen, or you could make it more complicated and make some sort
of an animation.

 

[Larry L]

As far as recording events (such as when the user clicks the button and
when the master "heart-beat" cue occurs), and processing the timing
details of these events and displaying the results to the user,
javascript is entirely capable of doing this work.

However, I haven't played a whole lot with playing sounds, I know you
can embed Windows Media Player in the page using the <object> tag, and
there are quite a few options you can set. Not sure if it lets you do
things like ask it at what "time index" it is currently at as it plays
the sound, if it did that would likely allow you to achieve enough
accuracy to make this feasible.

And that's the real question here - how to make this accurate. It is
entirely possible to do what you are asking in javascript, but unless
you have some feedback as to exactly when the sound starts, and some
hard-coded information like delay between repititions, it won't be
accurate.

Assuming you're not limited to sound cues only, I would suggest using
visual cues, these can be controlled through DHTML, and would allow
decent accuracy.

A visual cue could be as simple as toggling the visibility of an object
on the screen, or you could make it more complicated and make some sort
of an animation.

JC,

Thanks much for the ideas. I actually have it working at an acceptable
level now. I created a sound file of exactly 1 second, and have a "Start"
button that starts playing it continuously as the background sound. Then I
have another button that reads the time it's clicked into an array. When
the user presses a "Stop" button, it then loops through the array
subtracting each element from the previous one to determine the delay and
subtracts 1000 milliseconds each time. This basically gives me the data I
wanted, although the results are only in increments of 16ms. Apparantly
that is a limitation of JS I didn't know about.

You are correct, though that the data would be much richer if I could know
when the sound actualy starts playing, because the sound and the test are
actually independant of each other.

I may try a visual cue, but sound is what is really needed for
the testing here (different parts of your brain processing these items).

I'm still working on it, and very much appreciate your input, especially
your doing what is so rare in newsgroups and actually answering the
real question that was asked!

Larry L