fakesound.htmlOpening a Window

Work-around for Javascript Control of Sound

Stephen Wilson, Professor Conceptual Information Arts Program, SFSU

The problem

Changes introduced with IE 5+ and Navigator 6+ have made javascript control of sound problematic. Different browsers and OS's do not universally support javascript control of plugins (such as quicktime). It is nearly impossible to develop compatible javascript routines. For more information see Wilson's page on javascript control of sound.

This page documents a work-around. There are predictable cross-platform routines to embed sound in a web page so that it will play when a page is loaded. This work-around uses javascript to open small inobtrusive windows whose only purpose is to play sounds. Multiple sounds can thus be activated from links and rollovers.

Preparing html pages to play sounds.

You must prepare an html page for each sound you want to activate. Use the cross platform routine to embed sound. It uses object, embed, and bgsound tags to insure that all versions of browsers can load the sound. Here is the routine recommended by Apple to load sounds using quicktime. See the Wilson information page for more details.

The bold part is the part that embeds a sound called "vivaldi2.mid". You would need to change all references to that to whatever your sound files name was. The classid is required by the object tag to identify what plug in is referenced. This number and the codebase is specific to quicktime. You would need to get that information for whatever plug-in you were using. You would need one of these html pages for each sound you wanted to play. Also you could set parameters such as looping etc. The rest of the html is shown just to show where the object code is inserted in the head section.

html code for a page called vivaldi.html that plays embedded sound
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
   <title>playsound1.html</title>
<OBJECT classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
                       codebase="http://www.apple.com/qtactivex/qtplugin.cab"
                       width="180" height="160"
                       id="test">
                <PARAM name="src" value="vivaldi2.mid">
<PARAM name="autostart" value="true">
                <EMBED width="180" height="160"
                       src="vivaldi2.mid"
                       name="test"
                       autostart = "true">
                </EMBED>
              <noembed>
             <bgsound src="vivaldi2.mid" loop="0">
             </noembed>
</OBJECT>
</head>
<body>
play sound1
</body>
</html>

Activating sounds from links and rollovers

This link will open a window and load it with the html page that embeds the sound. It requires a javascript function to be placed in the head section which opens a new window and loads it with the html embedded sound. The link itself requires javascript code to read the mouseclick and call the function. The function opens a window and loads it with the html page specified.

Click to hear Vivaldi

Function to open window and play indicated page (tarmu)
function loadWindow(tarmu) {
muWindow = window.open(tarmu, "m1Win", "toolbar = no, scrollbars=no,top=3200,left=3000,location=no,width=2,height=2")
muWindow.blur()
}
Code to activate a link to call function
<a href="javascript:loadWindow('vivaldi.html')">Click to hear Vivaldi
</a>

The routine has one variable arbitraily called tarmu. The code that calls it miust indicate what html page it wants loaded In this example the link calls for an html page called vivaldi.html. The function then substitutes the actual name for tarmu. The routine sets parameters for the window to make it as small as possible.and locate it outside the viewer's vision. These location parameters won't work in navigator. The routine then calls the javascript method blur() which puts the sound window below the screen window.

Instead of linking to an html page the link links to a javascript routine. The routine calls the loadWindow function and specifies a page to load (in this example vivaldi.html. The same routine could be used to call other pages. All that would need to be changed is the 'vivaldi.html' inside the parenthesis.

** Note: if you copy this html page, you will also need to copy the sounds or substitute your own sounds and change the code for the examples to work.

Stopping the Music

A very similar set of routines can stop the music. In this work-around, the only way to stop the music is to close the window that has the sound embedded or to replace the current html page with a different page. This example uses a simple function called closer(). Note that it must refer to the same name for the window as was given in the routine that opened the window - muWindow in this example. The link that closes the window is similar to the one that opened the window above except it now calls the routine closer().

Stop vivaldi

Function to close the sound window
function closer() {
muWindow.close()
}
Code for link to stop music by closing window
<a href="javascript:closer()">Stop Vivaldi </a>

Activating the sound from a rollover link

The same functions can be used by rollovers. Rollovers are activated by the javascript routines onMouseover and onMouseout. In the example below rolling over the link causes the music to play and rolling out causes it to stop. (Note: some idiosyncracy of Netscape 4+ versions means the stop rollout routine does not work reliably; It works ok in IE). The link includes code for onMouseover (calling loadWindow) and onMouseout (calling closer()).

roll over me to start music - roll out to stop

<a href="blank.html" onMouseover="loadWindow('vivaldi.html')" onMouseout="closer()">roll over me to start music - roll out to stop
</a>

Activating the sound from a rollover image

The same functions can be activated from rolling over images, imagemaps, and buttons. The example below has an image based link that calls the windowLoad and closer() routines. The example shows how to activate an image link as a rollover. Standard javascript can activate buttons and imagemaps in the same way.

Roll into image to start sound - roll out stop
(Note: stop routine doesn't work in Navigator)

Playing more than one sound at a time

The function described above opens one window. New html sound files are loaded into the same window. Thus only one sound plays at a time. Creation of new functions with different names and different window names can open more than one sound at a time. The author needs to keep track of which routine is in which window. The example below shows two very similar routines. The new routine has a different name for the function, the name of the windowobject,, and for the name of the window. The link javascript is similarly changed to refer to the new routine.

function loadWindow(bookgif) {
muWindow = window.open(bookgif, "muWin", "toolbar = no, scrollbars=no,top=3200,left=3000,location=no,width=2,height=2")
muWindow.blur()
}

function closer() {
muWindow.close()
}

function loadWindow2(bookgif) {
muWindow2 = window.open(bookgif, "muWin2", "toolbar = no, scrollbars=no,top=3200,left=3000,location=no,width=2,height=2")
muWindow2.blur()
}

function closer2() {
muWindow2.close()
}

Click to hear Vivaldi in window 1
Click to hear Bach in window 1
Stop whatever is playing in window 1

Click to hear Vivaldi in window 2
Click to hear Bach in window 2
Stop whatever is playing in window 2

<a href="javascript:loadWindow('playsound1.html')">Click to hear Vivaldi
in window 1</a>

<br><a href="javascript:loadWindow('playsound2.html')">Click to hear Bach in window 1</a>

<br><a href="javascript:closer()">Stop whatever is playing in window 1</a

<a href="javascript:loadWindow2('playsound1.html')">Click to hear Vivaldi
in window 2</a>
<br><a href="javascript:loadWindow2('playsound2.html')">Click to hear Bach
in window 2</a>
<br><a href="javascript:closer2()">Stop whatever is playing in window 2</a>