JavaScript Tip of the Week for December 16, 1996: Those Little Odds And Ends | 3 | WebReference

JavaScript Tip of the Week for December 16, 1996: Those Little Odds And Ends | 3

JavaScript Tip of the Weekfor December 16, 1996: Those Little Odds And Ends


Adding sound and music to the Eye Catching Intro is an easy task. It uses the hidden frame method that was taught a while back. To start out, include a hidden frame to put the sound embed in:
    document.write ('<FRAMESET onLoad = "displayLoop()" ROWS = "100%, *"');
    document.write ('FRAMEBORDER = NO BORDER = 0>');
    document.write ('<FRAME SCROLLING = AUTO SRC = "javascript:parent.blankFrame"');
    document.write ('NAME = "draw" MARGINWIDTH = 2 MARGINHEIGHT = 2>');
    document.write ('<FRAME SCROLLING = AUTO SRC = "sound.html">');
    document.write ('</FRAMESET>'); 
This above code is exactly the same as the code in the original intro, with the exception of the highlighted line. This line creates a hidden frame that holds an HTML document called "sound.html". Inside "sound.html", simply include an HTML document with and EMBED in it. The EMBED, of course, points to the music file that you want to be played while the intro is taking place. Here is a sample of what "sound.html" might look like:
    <HTML>
    <BODY>
    <EMBED AUTOSTART = TRUE HIDDEN = TRUE SRC = "music.mid">
    </BODY>
    </HTML>
That's all there is to it, unless you want to have sound files played for each frame (by frame, I'm refering to individual frames of the intro, not HTML frames). If that's the case, then you'll have to look at these lines of code, which contain the information for each frame of your intro:
    var words = new makeArray (
    'This is a simple effect.',
    'One of many actually.',
    'It caught your attention.',
    'Now find out how it\'s done.');
Whenver a new frame is displayed, everything is these lines of code will be printed too. That includes any HTML. With this in mind, all you need to do is put an EMBED in every frame that you want to play sound. Mind you, this is not the most efficient way to do it, but it works as well as any other method. Example: If you want a "whoosh" sound to play when the "It caught your attention." frame is displayed, then change the code to this:
    var words = new makeArray (
    'This is a simple effect.',
    'One of many actually.',
    'It caught your attention.<EMBED AUTOSTART = TRUE HIDDEN = TRUE SRC = "whoosh.au">',
    'Now find out how it\'s done.');


All this does is print out an EMBED along with the line of text. This achieves the effect of sound that's in sync with the text; this is exactly how it was done in The Hut. The one problem you may run into is that the sounds need to preload before the intro so there will be no delay. This can be accomplished by putting all of your sound files in the hidden "sound.html" document as well as in each frame of the intro, and adding the onLoad event handler to "sound.html":
    <HTML>
    <BODY onLoad = "parent.displayLoop()">
    <EMBED AUTOSTART = FALSE HIDDEN = TRUE SRC = "whoosh.au">
    <EMBED AUTOSTART = TRUE HIDDEN = TRUE SRC = "music.mid">
    </BODY>
    </HTML>
Notice that the AUTOSTART paramater of "whoosh.au" is false. This is so it will not play when it is "preloading". It will only play when it is printed along with the "It caught your attention." frame. What's the point of onLoad here? Well, when the sound files are all loaded, the intro will be started because of onLoad, and the sound files will play when they are called because they are already in the browser's cache. There will be a small amount of lull time between loading and playing, but if you keep your files small it shouldn't be a problem.

If you plan on preloading the sounds using this method, you will have to remove the onLoad event handler from the main FRAMSET, so it will give the sounds in "sound.html" time to load before the intro starts:
    document.write ('<FRAMESET onLoad = "displayLoop()" ROWS = "100%, *"');
    document.write ('FRAMEBORDER = NO BORDER = 0>');
    document.write ('<FRAME SCROLLING = AUTO SRC = "javascript:parent.blankFrame"');
    document.write ('NAME = "draw" MARGINWIDTH = 2 MARGINHEIGHT = 2>');
    document.write ('<FRAME SCROLLING = AUTO SRC = "sound.html">');
    document.write ('</FRAMESET>'); 
Should be:
    document.write ('<FRAMESET ROWS = "100%, *"');
    document.write ('FRAMEBORDER = NO BORDER = 0>');
    document.write ('<FRAME SCROLLING = AUTO SRC = "javascript:parent.blankFrame"');
    document.write ('NAME = "draw" MARGINWIDTH = 2 MARGINHEIGHT = 2>');
    document.write ('<FRAME SCROLLING = AUTO SRC = "sound.html">');
    document.write ('</FRAMESET>'); 
What about images? Very easy; just apply the same techniques used with the sound files to your images.