www.webdeveloper.com
Results 1 to 9 of 9

Thread: setTimeout Question

  1. #1
    Join Date
    Apr 2013
    Posts
    21

    setTimeout Question

    Hello again. I've been away from webpage development for some time and just got back into it. I'm trying to synch up words to audio. I know I've forgotten a lot, but I can't figure out why this doesn't work:

    Code:
    <script>
    var lyrics = new Array();
    words[0] = "                                              ";
    words[1] = "When the hopeless gladened southern climbs return";
    words[2] = "Like bended arms decended high they pull the chords of spring.";
    words[3] = "Then all creation past forgets the wowes of winter time.";
    
    var timing = new Array();
    timing[0] = 3000;
    timing[1] = 5000;
    timing[2] = 7000;
    timing[3] = 9000;
    
    var i = -1
    var t
    wait(i)
    
    function wait() {
    window.clearTimeout(t);
    i++
    document.write(words[i]);
    t=window.setTimeout("wait();",timing[i]);
    }
    </script>
    Can someone please help. And please don't say to set up separate functions. I have 45-50 lines that have to be displayed with different delays.

    Thanks.

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,680
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    </head>
    
    <body>
    <span id="tst" ></span>
    
    <script type="text/javascript" >
    var words = [];
    words[0] = " ";
    words[1] = "When the hopeless gladened southern climbs return";
    words[2] = "Like bended arms decended high they pull the chords of spring.";
    words[3] = "Then all creation past forgets the wowes of winter time.";
    
    var timing = [];
    timing[0] = 3000;
    timing[1] = 5000;
    timing[2] = 7000;
    timing[3] = 9000;
    
    // better
    var timing = [3000,5000,7000,9000];
    
    
    var i = -1;
    var t;
    
    function wait() {
     clearTimeout(t);
     i++;
     if (words[i]){
      document.getElementById('tst').innerHTML+=words[i]+'<br>';
      t=window.setTimeout(function(){ wait(); },timing[i]);
     }
    }
    wait(i)
    </script>
    </body>
    
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Apr 2013
    Posts
    21
    Vic.

    Thanks man. That does it. One question, thought. Why does the <span> have to be before the script?

  4. #4
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,680
    document.write can only be used as the page loads and should be avoided
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  5. #5
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,348
    Hi Vic,

    One thought I had was something like this to blend lyrical content and timing.

    Not tested it myself but would something like this be simpler?

    Code:
    // putting lyric and time in to an array of objects connects the two items
    var words = [
    	{str:"When the hopeless gladened southern climbs return",time:5000},
    	{str:"Like bended arms decended high they pull the chords of spring.",time:7000},
    	{str:"Then all creation past forgets the wowes of winter time.",time:9000}
    	];
    
    // setting the initial delay means one less array element
    lyrics = {
        update:function(){
    	// get the next lyrics
    	if(words.length){
    	    wordObj = words.shift();
    	    document.getElementById('tst').innerHTML+=wordObj.str+'<br>';
    	    setTimeout("lyrics.update()",wordObj.time);
    	    }
        },
        auto:setTimeout("lyrics.update()",3000)
    }
    The theory as I have not tested this is to put the inital delay in to the auto element of the lyrics JSON object, blend the words array in to an array of objects.

    Each call to lyrics.update() pulls an element off the array of words, then each object properties is accessed for its information and the next time out function call is set by the next available property.

    In theory atleast, it cuts down on arrays and possible errors creeping in with longer arrays and as long as the scheme is followed properly, the array of objects will simplify matters.

    * Addendum
    Just tested and it works.
    Last edited by \\.\; 09-28-2013 at 03:36 PM. Reason: Typo and update
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  6. #6
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,348
    Additional information, if you wrap your code in a window onload event, you will circumvent the error that occurs because the <span> object in the document has not yet been fully created because the document body isn't ready.

    I figure that this is the main reason for a 3 second delay in the start?

    Code:
    window.onload = function(){
    // your code in here
    
    // will only run when the document body is fully loaded...
    
    // :-)
    
    }
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  7. #7
    Join Date
    Apr 2013
    Posts
    21
    Hi \\.\ (if that's your real name .

    I saw your post, but haven't had time to implement it in my live code. I'm taking a brake for a few days to get me head clear, but I will definitely try it as I can see where it simplifies things.

    BTW, the reason for the initial delay is that the audio has a (actually) 20 second lead in before the words start. I figured that would give sufficient time for everything to set up.

    Thanks for the code.
    Bobby

  8. #8
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,348
    Ok, 20 second lead in would be a case of changing the
    Code:
    ...
    auto:setTimeout("lyrics.update()",3000)
    }
    to
    Code:
    ...
    auto:setTimeout("lyrics.update()",20000)
    }
    1000 milliseconds = 1 second.

    When using objects, you have to remember that they have to be enclosed in {} [curly braces] and also remembering that the formatting of them means that you can move things to suit, add in elements that you may need at a later date.

    Using a JSON approach to your routing can be used independently of the window.onload event as well by adding in a simple check to see if the document body element that is needed for your output is ready.

    Generally I advise that people have audio on a click to play basis because you have no idea what that end user is doing with their PC. I for example do not appreciate anything that auto starts and I personally loath YouTube on my PC because it insists on auto starting where as on my mobile phone it won't, I have to click to play the stream.

    It would also mean that if you have click to play, your control over the music and lyrics timing would be improved, especially when streaming because that has unpredictable behavior.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  9. #9
    Join Date
    Apr 2013
    Posts
    21
    Okay Guys, I'm back. Got everything working. Again, thanks for all the help.

    \\.\, I took your comments to heart, but I really don't want a click-to-play solution. What I would really like is a mute button so those who don't want the audio don't have to listen to it.

    However, here's my problem (BTW, I'm not sure if this should be a new post or not. If it should, I'll re-post it). I can't use the normal audio controls because using the slide bar or pause button messes up the synchronization. Likewise, I can't use the Stop/Play methods for the same reason. I thought about using the <audio> tag, but many of my user's browsers are not html5 compatible. What I really need is a true mute function so the audio and words stay in synch.

    I've tried a number of things, but nothing seems to work.

    Here's what I'd like the code to look like (this doesn't work, btw):
    Code:
        <table bgcolor="#6b8ab6" border=5 bordercolor="#2b405b"><tr><td>
          <embed src="AV_Files/ASongOfSpring.mp4" type="video/mp4"  width="400" height="230" LOOP="true"></embed>
        </td></tr></table>
        <EMBED id="background_audio" src="AV_Files/ASongOfSpring.mp3" AUTOSTART="True" LOOP="false" bgcolor="#FEF4E4" height="1" width="1"></embed>
     <br>
    <!-- the following 2 lines control the text display and synchronization -->
        <span id="showWords" style="color:#ffffff"></span>
        <script src="Script_Files/Show_Words.js"></script>
    
    <br>
    <!-- mutes controls here-->
    <a href="#" onclick="document.getElementById('background_audio').muted = false;"><img src="Graphics/Spring_Show/sound-on.png"></a> 
    <a href="#" onclick="document.getElementById('background_audio').muted = true;"><img src="Graphics/Spring_Show/sound-off.png"></a>
    Your help on this would be much appreciated.

    BTW, it has to work in multiple browsers.

    Thanks,
    bobby

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles