How to Use Javascript to Control LiveAudio

by Stephen Wilson, Professor, Conceptual Design, Art Dept, SFSU

LiveAudio is Netscape Navigator's method for inline sound. It requires Netscape Navigator 3.0 or higher. Microsoft Internet Explorer 3.0 or higher may support some features of LiveAudio. LiveAudio can be used without Javascript by employing new HTML tags. Those are explained in a companion Web page on using LiveAudio.

This documents shows simple ways of using Javascript to create interactive web pages that use sound. It assumes you have a basic familiarity with Javascript. For introductory materials on Javascript see our how to guide on Javascript.

Several Javascript extensions control sound. You can start,stop, and pause a sound. You can also change its volume and looping characteristics. The script below demonstrates the basic play, stop, and pause commands. In this example the functions are linked to html buttons; they could be attached to html links or to imageMaps. For example, you could create your own custom gif image to serve as a control panel by designating parts of the image a client side imagemap that activated Javascript functions.

To activate a sound you, must first load it using the EMBED tag. The sound must be given a name with the NAME option within the EMBED structure so the scripts can refer to it. Then the example creates simple functions that play, stop, and pause the sound.

Demo of using simple buttons to start, stop, pause, and continue sound

This section illustrates simple use of Javascript functions that control the playing, stopping, and pausing of liveaudion inline sound. Each button has a an onClick handler that calls simple functions to activate sound control. The illustration shows that you can also use normal html hyperlinks to call these functions.

This link will play the sound arbitraily named tester

Here are critical parts of the script and html:

<SCRIPT LANGUAGE="JavaScript"> <!-- Beginning of JavaScript - function playit() {document.tester.play(false) } function stopit() {document.tester.stop() } function pauseit() {document.tester.pause() } function volumeit(x) {document.tester.volume=x } // - End of JavaScript - --> </SCRIPT> <EMBED NAME="tester" SRC="test.mid" MASTERSOUND HIDDEN=TRUE autostart=false volume=100%> <FORM ACTION="" METHOD="POST"> <INPUT NAME="play tester" TYPE=Button VALUE="play tester" onClick="playit(true)"> <INPUT NAME="stop tester" TYPE=Button VALUE="stop tester" onClick="stopit()"> <INPUT NAME="pause tester" TYPE=Button VALUE="pause tester"" onClick="pauseit()"> <INPUT NAME="continuetester" TYPE=Button VALUE="continue tester"" onClick="pauseit()"> <INPUT NAME="volume" TYPE=Button VALUE="volume" onClick="volumeit(20)"> </FORM>

Controlling Volume

The Javascript extensions also allow you to dynamically get and set the volume level of the sound. The volume is retrieved with the function "GetVolume()" and the volume can be set with the function "setvol()". The example below shows a button and a text field used to set the volume. Notice that the text field returns a text value. The setvol() function requires an integer so the parseInt() function must be used to convert the text value to an integer.


Please set the volume you want and then click the button
Volume level (1 -100):

Here is the Javscript function that controls sound volume. The function reads the value typed into the text field (arbitraily named volcontrol), converts it to an integer using the ParseInt() function and then uses the setvol() function. It also shows the html to set up the volume control button and indicator.

function volumeit() { curvol=document.volform.level.value Icurvol=parseInt(curvol) document.tester.setvol(Icurvol) } html to set up volume control button and indicator: <INPUT NAME="volcontrol" TYPE=Button VALUE="Set volume" onClick="volumeit()"> <INPUT NAME="level" TYPE=Text VALUE="100" SIZE="3" MAXLENGTH="3">

Using a Client-Side ImageMap to Control Sound

This shows how you could use your own image to cotnrol sound. It uses the same functions described above. It maps them to areas of the image below.

Current Volume:


This image is a client side imagemap introduced in current browsers. The areas call javascript functions instead of hypertext links. The map definition code is shown here:

<MAP NAME="volmap"> <AREA SHAPE="RECT" COORDS="163,0 203,33" HREF="javascript:playit()"> <AREA SHAPE="RECT" COORDS="125,0 160,33" HREF="javascript:stopit()"> <AREA SHAPE="RECT" COORDS="102,36 216,96" HREF="javascript:upvol()" onMouseOver="upvol()"> <AREA SHAPE="RECT" COORDS="0,0 99,47" HREF="javascript:downvol()" onMouseOver="downvol()"> </MAP>


The play and stop areas of the image call the same functions as the buttons illustrated in the section above. I have written a simple function called upvol() controls raising the volume and a function called downvol() which lowers volume. The both work by using the Javascript GetVolume() function to read current volume, adding or subtracting 10 to the value, checking that limits have not been exceeded, and then using the setvol() function to set the new changed volume. The code appears below.

function downvol() { nowvol=document.tester.GetVolume() nowvol=nowvol-10 if(nowvol<0) { nowvol=0 } document.tester.setvol(nowvol) document.imagemapform.levelindicator.value=nowvol } function upvol() { nowvol=document.tester.GetVolume() nowvol=nowvol+10 if(nowvol>100) { nowvol=100 } document.tester.setvol(nowvol) document.imagemapform.levelindicator.value=nowvol }

** Note the Midi sequence of Bach's Jesu, Joy of Man's Desiring used this tutorial is from the wonderful MIDI archives site. Sequence © Pierre R. Schwob - by permission

- This page created by Stephen Wilson, Professor Conceptual Design, SFSU (http://userwww.sfsu.edu/~swilson) swilson@sfsu.edu
- More information about the Conceptual Design program is available at (http://userwww.sfsu.edu/~infoarts)
- It is a resource used in Art511 Art&Telecommunications course (http://userwww.sfsu.edu/~infoarts/Tele/Tele95.index.html)
- A comprehensive guide to Web design is available in the book World Wide Web Design Guide (Hayden Books) by Stephen Wilson
- The url of this page is (http://userwww.sfsu.edu/~infoarts/Tele/sound/wilson.javascriptsound.html)