View Full Version : Detect When File Has Loaded

07-04-2007, 12:53 AM
I've created a little function to embed a wav file in a page when a user clicks a button so that they can hear a captcha read to them. On slower connections it can take a couple seconds for the file to load and it might be confusing for people if they expect something to happen right away when they click the button. Is there any way to detect when the file has finished loading so that I can put a little loading image in place while it is loading and hide it again when the file has finished loading?

Here is the code for the function:

function playCaptcha(captchaHash) {
var wavURL = 'captchas/'+captchaHash+'.wav';
var embedCode = '<embed src="' + wavURL + '" hidden="true" autostart="true" />';

document.getElementById('playAudio').innerHTML = "";
document.getElementById('playAudio').innerHTML = embedCode;

Philip M
07-04-2007, 08:37 AM
You could pre-load the .wav file. Set volume = -10000.

Or better still load the music file last so that your visitor can be reading your content while the slow loading .wav file is being loaded in. This can be quite a problem when your visitor is using a 56kb dialup connection. If they get bored waiting for it to load they are gone and you wasted your time writing your page. You can force the music file to load last by placing the code at the very bottom of your HTML source code thus:-

<embed src="filename.wav" hidden="true" loop="1" volume="-10000">

07-04-2007, 09:43 PM
Oh, that's genius. Then I could just use the function to start the sound and it would be instant since it has already loaded.

I love it when the solution is such a simple one. Sometimes you just need someone else to take a look at it.

Thanks a bunch.

07-05-2007, 05:44 PM
Ok, I thought this was going to be really simple, but I can't seem to get javascript to successfully access the embedded element:

<embed src="captcha/#captchaHash#.wav" hidden="true" id="captchaAudio" autostart="false" enablejavascript="true" />

When I use:

<a href="javascript:document.getElementById('captchaAudio').play();">

I get the following error in Firebug: "document.getElementById('captchaAudio') has no properties".

Huh? I tried it also with the name attribute and using document.captchaAudio.play() instead, as well as with play(false) in both cases, but they all gave me the "has no properties" error in Firebug and did nothing to start the sound. I've looked this up in several places online and this seems to be the way to do it. Am I missing something here?

07-05-2007, 05:53 PM
Well I made a little bit of progress. I had the embed inside a div with height and width of 0, and I found that placing it outside that div now gives me the following error:

document.getElementById('captchaAudio').play is not a function

Tried it with play(false), same thing...

Philip M
07-05-2007, 07:46 PM
Try this:-

<embed src="filename.wav" hidden="true" loop="1" volume="-10000" name = soundfile"> (NOT autostart = "false")

and then:

onmouseover = "document.soundfile.play();


<a href="javascript:document.soundfile.play();">