dcsimg

JavaScript Tip of the Week for August 26, 1996: Source Code: Part One of What's New in 3.0

The Sound of Music (and WAVs)
What's New in Windows



To play sounds in an HTML, first create two frames, one hidden:
        <FRAMESET ROWS="0,*" FRAMEBORDER=0 BORDER=0>
        <FRAME
        SRC="blank.html"
        NAME="sound_frame" SCROLLING=NO MARGINHEIGHT=0 MARGINWIDTH=0 NORESIZE>
        <FRAME
        SRC="main.html"
        NAME="main" SCROLLING=YES MARGINHEIGHT=0 MARGINWIDTH=0 NORESIZE>
        </FRAMESET>
Then put this code in your main HTML document; the one you'll be playing sound from:
/* This code is Copyright (c) 1996 Nick Heinle and Athenia Associates, 
 * all rights reserved. In order to receive the right to license this 
 * code for use on your site the original code must be copied from the
 * Web site webreference.com/javascript/. License is granted to user to 
 * reuse this code on their own Web site if and only if this entire copyright
 * notice is included. Code written by Nick Heinle of webreference.com.
 */

function play_sound(file) 
{
        with (parent.sound_frame.document) 
        {
                open ('text/html');
                writeln ('<HTML><HEAD>');
                writeln ('<TITLE></TITLE>');
                writeln ('</HEAD><BODY BGCOLOR="FFFFFF">');
                writeln ('<EMBED SRC="' +file+ '" WIDTH=2 HEIGHT=2 CONTROLS=console VOLUME=100 LOOP=FALSE AUTOSTART=TRUE NAME="music_embed" MASTERSOUND>');
                writeln ('</CENTER></BODY></HTML>');
                close ();
         }
}

function stop_sound()
{
        with (parent.sound_frame.document) 
        {
                open ('text/html');
                writeln ('<HTML><HEAD>');
                writeln ('<TITLE></TITLE>');
                writeln ('</HEAD><BODY BGCOLOR="FFFFFF">');
                writeln ('</BODY></HTML>');
                close ();
        }
}
stop_sound();
Then use buttons similar to these to control playing:
        <A HREF = "javascript:play_sound('campy.mid')">
        <IMG BORDER = 0 HEIGHT = 34 WIDTH = 59 SRC = "play.gif"></A>
        <A HREF = "javascript:stop_sound()">
        <IMG BORDER = 0 HEIGHT = 34 WIDTH = 59 SRC = "stop.gif"></A>



The window opening code:
NewWindow = window.open("windows_window.html",
                             "TheWindow",
                             "toolbar=no,
                              width=350,height=400,
                              directories=no,
                              status=no,
                              scrollbars=yes,
                              resize=no,
                              menubar=no")
"Always on Top" window code, goes in window:

var OnTop = true;
         function ChangeOnTop()
         {
                 if (OnTop) OnTop = false; 
                 else if (!OnTop)
                 {
                 OnTop = true;
                 self.focus();
                 }
          }
          function FocusMe()
          {
                  if (OnTop) setTimeout("self.focus()",250);
          }
Put this in the body tag of the window:
        onBlur = "FocusMe()";
Create a button in the window to toggle "Always on Top":
<INPUT TYPE = "button"
       NAME = "Toggle"
       VALUE = "Toggle Always on Top"
       onClick = "ChangeOnTop()">