'); close (); } } function stop_sound() { with (parent.sound_frame.document) { open ('text/html'); writeln (' '); writeln (''); writeln (' '); writeln (' '); close (); } } stop_sound(); function ButnSound() { document.images[3].src = "play.gif"; play_sound("blip.wav"); }

JavaScript Tip of the Week for August 26, 1996: The Sound of Music (and WAVs)

One of my very first tips was about how to play sound and music. My methods have improved greatly since then; this tip explains how to play MIDI music and WAV/AU files easily and transparently using LiveAudio. Press the play button to some music, it may take a short while to load.
How is this done? Simply put: Frames and LiveAudio. Frames you say? Yes, there is a hidden frame in this page. That is where the sound file is playing from. Here's how it works. First create two frames; one will be your sound frame and the other will be your actual document:
    <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>
In the top frame, which is where the music will be played, put a blank HTML file. In the second frame put whatever you want; that will just be a plain old HTML document. Now to play the sound, you'll need these two functions:
    function play_sound(file) 
    {
        with (parent.sound_frame.document) 
        {
           open ('text/html');
           writeln ('<HTML><HEAD>');
           writeln ('<TITLE></TITLE>');
           writeln ('</HEAD><BODY BGCOLOR="FFFFFF"><BR><BR>');
           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 ();
        }
    }
The first function, play_sound(), creates an HTML document inside of the hidden frame. It also takes the name of the music file you sent it and creates a LiveAudio control using the embed tag. All this is done using a variant on document.write. Then it simply plays the file. Now to stop the music, the stop_sound() function writes over the document that play_sound() created, thereby stopping the sound file. I think its a definite improvement over the first sound playing tip I gave. Now create two buttons, play and stop, to initate each of these functions:
    <A HREF = "javascript:play_sound('sound_file')">
    <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>
Where sound_file is the name of the sound you want played. You can pass it any type of sound file and get the same results. This method can be combined with onMouseOver to get some very interesting buttons. One last thing: It's a good idea to call stop_sound() once in the head of the document, that way the sound won't autoplay when you reload.

Source