Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Detect When File Has Loaded

    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:

    Code:
    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;
    	}

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,011
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    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">
    Last edited by Philip M; 07-04-2007 at 10:02 AM. Reason: More info

  • #3
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok, I thought this was going to be really simple, but I can't seem to get javascript to successfully access the embedded element:

    Code:
    <embed src="captcha/#captchaHash#.wav" hidden="true" id="captchaAudio" autostart="false" enablejavascript="true" />
    When I use:

    Code:
    <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?
    Last edited by jfredrickson; 07-05-2007 at 04:46 PM.

  • #5
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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...

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,011
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    Try this:-

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

    and then:

    onmouseover = "document.soundfile.play();

    or

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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •