How to Use Javascript to Control Sound and Video (via Quicktime, Windows Media Player, and others)

by Stephen Wilson, Professor, Conceptual Information Arts Program, Art Dept, SFSU

Javascript control of sound and video has been highly specific to the browser, the version of the browser, the plug-in,  the operating system, and the format of the file used.  Writing routines that would work across all these variations was complex.  There were different code for embedding files, different sets of javascript commands available, and different javascript syntax for addressing the files.  It is worth the effort because Javascript enables you to create your own visual interfaces to media (thus not relying on the standard controllers) and to dynamically control features of the media such as start, stop, pause,  location to play, volume, etc.  The examples below illustrate use of Quicktime to control sound and movies.  It assumes you have the appropriate quicktime plug-in for your browser and operating system.  See apple's site for downloading the approriate plug-in.  Unfortunately, since many of the plug-ins do not support UNIX browsers, we cannot cover those here.  Also with the constant change of browsers, these examples might not work with your system.  This tutorial is specific to Quitcktime although the general principles would apply to other plug-ins.  See the section below on  other plugins and sniffers.

The situation is getting better as more browsers support accepted web standards and as plug-in manufacturers create stable versions that allow Javascript support.  However, even the examples below which use web object standards will not work in all situations (for example,  information current at 11/06  suggests that quicktime Javascript will not work with IE 7. ) The situation is frustrating but was even more so in the past.  Anyone trying to address old browsers is invited to read the historical section of this document which tried to explain the situation below.  

Also, even with the quicktime plugin and browser current at the time of this tutorial update there is a serious anomaly in javascript support.  These kinds of quirks can be quite frustrating.  In developing this tutorial I found that the exact same controls would sometimes work and sometimes not.  It seemed quite capricious because there was nothing different in the javascript used.   Then I discovered the origin of the flakiness:  The links & buttons that incorporate javascript control of quicktime only work if the movie object they refer to is visible in the window at the same time as the buttons or links that activate the controls.  There is nothing in any documentation or online reports that describe this limiation.  It must be a bug.  You can work around it but at this stage in development of Quicktime, it is unexpected. 
( Web contributor Walter Horodyski notes he was able to  keep the QuickTime controls hidden by using the combination width="0"/height="0" attributes or by specifying hidden="true")

You will notice in the examples below there is always a visual instance of a movie object placed next to the demonstration javascript controls. This tutorial was developed on a Macintosh with a particular version of Quicktime; perhaps this anomaly does not show up on windows or unix machins and perhaps if will be fixed in time?  Online readers who discover any relevant information on this bug or function of the tutorial in various browser/os situations are encouraged to send it to us .(see address below)

(Web contributor Walter Horodyski notes another important problem in his tests with Windows machines.  After the sound has been activated, cpu use creeps up.  Even with the page idling, it moves up to 50% - seriously out of line for a page that ostensibly is not doing anything)

Browser support for Javascript control of Quicktime  (only for commands used in tutorial)

Netscape (ver 7.2)
Firefox (ver 1.5.7)
Safari (ver 1.37)
IE - Internet Explorer 6&7
Ok (except for window display anomaly)
Ok (except for window display anomaly) Ok (except for window display anomaly and the embeds array does not work) Not Available
untested Not Available No javascript control of quicktime
untested untested Not Available untested

Unfortunately even now there are few guides or tutorials for using Javascript to control quicktime.  Even Apple's documentation does not do a good job of explaing.  Here are some links that might be useful:

Embedding the Quicktime file in web pages.

Different browsers require different commands to embed files.  Most current versions are moving toward using the OBJECT method.  Most browsers also support the older  EMBED tag.  The code below should work on most browsers since it uses both methods.  The classid is required to identify the quicktime plug in.  The number is reference # set by Apple for the identifier for Quicktime plug-in.  A viewer might need to download the quicktime plug-in since Microsoft quit including it automatically with the IE browser.

The example illustrates loading two files.  One is a midi sound file called "Jesu-Joy.mid" and the other is a quicktime movie file called "".  Your src would need to include the full or relative url leading to where your files are stored.  (2 files are loaded here just for the sake of this example).  Each file needs a name or id assigned because Javascript would need these properties to direct commands.  The id/name of the first one is declared to be "movie1" and the second is declared as "movie2" in the first quictime instance.  Quicktime loaded later is given different names such as movie3,movie4.  You can pick whatever names you want.  These OBJECT sequences are placed within the BODY html tags.  This example is based on resources for an Apple developer What's New web page on Quicktime.

The height and width would need to be set appropriately for your files.  Also note the setting of the property enablejavascript="true".  This is required to make Quicktime able to respond to Javascript commands.  Also you need to treat these quicktime files as visual elements of your page and use html, styles, tables, etc to position them on the page. The height must allow approximately 20 pixels extra for the controller if you are going to include it. This example places the 2 files side by side in a 2 column table;  other html page elements have been omitted in the example code.

Loading two files by Object and Embed method
---- (other html code)
      <td width="200">

<object  classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
 codebase="" width="180"
 height="160" id="movie1">
<param name="src" value="jesu-joy.mid">
<param name="Autoplay" value="false">
  <embed width="180" height="160" src="jesu-joy.mid" name="movie1"
 enablejavascript="true" autostart="false"> </object> <br>
      <td width="200">
<object  classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
 codebase="" width="180"
 height="160" id="movie2">

<param name="src" value="">
<param name="Autoplay" value="false">
      <embed width="180" height="160" src="" name="movie2"
 enablejavascript="true" autostart="false"> </object> <br>

---- (other html code)

Possible Workaround proposed by Dave Comfort
Comfort claims that putting the quicktime movie out of view at -1000, -1000  seems to solve the problem by fooling quicktime into thinking the movie is visible and allowing javascript control

        <embed classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
        <div onclick="pause()">Pause</div>
        <div onclick="play()">Play</div>

(** Note the anomaly - these links activations of Javascrsipt below will only work if part of the qt movie is showing on the screen at the same time --this  seems like a bug)  *** see work around below

Calling a JavaScript function which takes an object referenced by name

Calling an object (referenced by name) method directly
Calling an object (indexed in the document "embeds" array by index) method directly. (note Javascript starts its arrays with 0 not 1)
(Does not work for IE 6 and later if you use the Object tag)

Calling an object (indexed in the document "embeds" array by name) method directly
(Does not work for IE 6 and later if you use the Object tag)
 javascript:document.embeds['movie1 ].Play()

Here is a sample of the complete html code with a direct reference to object as part of link

<a href="javascript:document.jesu.Play();">javascript:document.movie1.Play()</a>

Here is a sample of the complete html code with a reference to a javascript function called PlayIt that was put in the script area of the head.  The function calls the javascript methods built into quicktime plug-in - Play() and Stop()

<a href="javascript:document.jesu.Play();">javascript:PlayIt(document.movie1);</a>

Here are the play and stop function defintions that would be put in the script section of the head

         function PlayIt(movname)

        function StopIt(movname)

Changing rate, going to a location, setting volume

 Here are some links that demonstrate how to use javascript to cause the jesu midi file to change rate,  go to a particular place, or change volume. An extended list of parameters is described in the section below

  ** Note the anomaly - these links below will only work if part of the movie is showing on the screen at the same time --this  seems like a bug.  Also note these quicktime objects have been given different id's/names than the previous ones - they are called movie3 & movie4.
javascript:document.movie3.SetRate(2.0) (double speed) <a href="javascript:document.movie3.SetRate(2.0);"> javascript:document.movie3.SetRate(2.0)</a>
javascript:document.movie3.SetRate(1.0) (normal speed) <a href="javascript:document.movie3.SetRate(1.0);"> javascript:document.movie3.SetRate(1.0)
javascript:document.movie3.SetTime(22000); (22 seconds in - milliseconds - only for sound)
     note sound different than video
javascript:document.movie4.SetTime(60); (video is indicated in frames - the movie above - movie4 is approx 10 frames/sec so 60 is 6 seconds - aprox 5/8 of movie)
<a href="javascript:document.movie3.SetTime(22000);"> javascript:document.movie3.SetTime(22000)
<a href="javascript:document.movie4.SetTime(60);"> javascript:document.movie4.SetTime(60)
javascript:document.movie3.SetVolume(128  (half Set 0-255) <a href="javascript:document.movie3.SetVolume(128);"> javascript:document.movie3.SetVolume(128)
javascript:document.movie3.SetVolume(255) (full vol) <a href="javascript:document.movie3.SetVolume(255);"> javascript:documen.tmovie3.SetVolume(255) </a>

Buttons and image links to control sound

** Note the anomaly - these links below will only work if part of the movie is showing on the screen at the same time --this  seems like a bug.  Also note these quicktime objects have been given different id's/names than the previous ones - they are called movie5 & movie6.

The examples above have used normal href link tags to activate the javascript.  As with much Javascript, form elements such as buttons and image links can also be used to activate sound.  For example the buttons below start and stop the movie.  Click on the he image also starts the sound playing.

play sound
<form action="" method="post">
<input name="play jesu"  type="button" value="play jesu1"
<input name="stop jesu" type="button" value="stop jesu1"
<input name="2 time rate" type="button" value="2 time rate"
<input name="regular rate" type="button" value="regular rate"
      <a href="javascript:document.movie5.Play();"><img
 border="0" height="50" width="60"></a>

Building Javascript Functions

The examples above have mostly  used the Javascript commands inserted directly into the html code - for example in a link.  For more complex features, authors often create javascript functions.  The functions are placed inside SCRIPT tags in the Head section of the page.  Then the functions can be called from mouse events over links or buttons or images.  Below is a set of sample functions to be placed in the head section   These functions illustrate controls for starting, stopping, going to particular locations, setting the speed, and setting the volume and will be used in examples below. Viewer mouse actions activate javascript that calls the functions by feeding the name of the target sound and other parameters.  Note that for very simple commands not much is gained by using a function.  Functions can be useful in situations where the Javascript commands need to be changed for different browser - that is, the single function access point can include a function for detecting the Browser and branching to the appropriate command.  The section immediately above calls functions.

Creation of javascript functions to control sound placed in the Head section
        <title>example controls</title>


<script language ="JavaScript">

function PlayIt(movname)
function StopIt(movname)

  function rewindIt(movname)
 function SetRate(movname,rate)
  function SetTime(movname,time)

function VolumeIt(movname,v)
// (v comes from value of the form(volform) item (level) next to it  below  document.volform.level.value)


For example, all the routines illustrated  in sections above could have called one of these functions rather than using direct Javascript reference to the html code.  The link would call the PlayIt function and feed it the identifier for the sound file - movie1 in this example.  These functions are so simple that not much is gained by using them instead of a direct reference to the javascript quicktime control commands

Illustration of use of functions - Controlling volume

** Note the anomaly - these links below will only work if part of the movie is showing on the screen at the same time --this  seems like a bug.  Also note these quicktime objects have been given different id's/names than the previous ones - they are called movie7& movie8.

The functions can be used for more complex actions.  In this example they  allow you to dynamically  set the volume level of the sound.  The example below shows a button and a text field used to set the volume. Notice that the form's text field returns a text value. The VolumeIt() function requires a value.  The form is arbitraily given the name "volform" and the text field is arbitraily given the name "level:". The function reads the value typed into the text field (arbitraily named level) and then uses the built in Javascript function SetVolume() . It also shows the html to set up the volume control button and indicator.  The function must be put in HEAD section inside SCRIPT tags. (it could be added to other functions such as those described above.)

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

 <script language = "Javascript">  //just the VolumeIt function is shown
----other functions

function VolumeIt(movname,v)
html to set up volume control button and indicator:
<form name="volform1">
<input name="play tester" type="button" value="play jesu1" onclick="PlayIt(document.movie7);">
<input name="stop jesu1" type="button" value="stop jesu1" onclick="StopIt(document.movie7);"><br>
Please set the volume you want and then click the button <br>
  <input name="volcontrol" type="button" value="Set volume"
 onclick="VolumeIt(document.movie7,document.volform1.level.value);">Volume  level (0-255):&nbsp;
<input name="level" type="text" value="128" size="3" maxlength="3"> <br>
 <input name="rate2" type="button" value="play 2x rate"  onclick="SetRate(document.movie7,2.0);">&nbsp;&nbsp;
<input  name="rate1" type="button" value="play normal rate"

Note the new element here is the text field in which users can indicate desired volume level.  In the html example above that text field is given the name "level"  Then the onclick javascript refers to that field - "document.volform1.level" .  The form's name is volform1 and the text field with the level is called "level" .  The routine VolumeIt needs 2 parameters.  The first is the name of the movie object being referred to movie7 and the second parameter is the rate desired 

Using a Client-Side ImageMap to Control Sound

** Note the anomaly - these links below will only work if part of the movie is showing on the screen at the same time --this  seems like a bug.  Also note these quicktime objects have been given different id's/names than the previous ones - they are called movie9& movie10.

This example 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 supported 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(document.movie9)">
<area shape="RECT" coords="125,0 160,33" href="javascript:StopIt(document.movie9)">
<area shape="RECT" coords="102,36 216,96" href="javascript:upvol1(document.movie9);"
<area shape="RECT" coords="0,0 99,47" href="javascript:downvol1(document.movie9);"

The play and stop areas of the image call the same functions as the buttons illustrated in the section above. 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, putting the value into the form text item called levelindicator, and then using the setvol() function to set the new changed volume. The code appears below.

function downvol1(movname)
    if(nowvol<0) { nowvol=0 };
function upvol1(movname)
      if(nowvol>255) { nowvol=255 };
      document.lev.levelindicator.value=nowvol ;

Brief Introduction to the Quicktime parameters that can be controlled by Javascript

Here is a sample of the  Javascript commands Quicktime 7 understands:  movname is the text that describes the object including the object document followed by the name assigned to the quicktime object when the OBJECT or EMBED loaded the file - in the first example above movie1.  For example above movname would be   'document.movie1'. 

Apple's online reference for javascript control of quicktime is at:

These commands can be used directly attached to links or buttons or incorporated into more complex Javascript funtions.   The command needs to reference the movie and then invoke the javascript command. The method of identifying the movie object can differ in different browsers.  The examples above illustrated referring by name such as   "document.movie1" and referring by the array Javascript keeps of all objects that have been loaded.  In these examples  regular HREF html is used but the url is replaced with the call to javascript.  ** Note there are other commands available; see the Apple developer What's New web page on Quicktime.  Here is alist of the javascript commands listed on that page.
Step(int count)
SetRate(float rate)
SetTime(int time)
SetVolume(int volume)
SetMovieName(string movieName)
SetMovieID(int movieID)
SetStartTime(int time)
 SetEndTime(int time)
SetIsLooping(boolean loop)
SetLoopIsPalindrome(boolean loop)
SetMute(boolean mute)
SetBgColor(string color)

Mini-tutorial on Windows Media Player, Other Plug-ins

Other plug ins use slightly different systems.  Microsoft windows media player ships with Explorer on windows systems.  It is available on Mac systems.  It claims to have some limited Javascript scriptability.  Similarly flash video/shockwave offers javascript capability. The principles would be similar. You would need to follow the following steps similar to the javascript treatment described above.

The WebDeveloper's viritual library offers an excellent tutorial on using Javascript to control Window's media player.  Some of the code is reproduced here to give you an idea of the similariites with Quicktime examples illustrated above.
The windows media object must be embedded with its own classId.  The commands are slightly different.  (Remember they won't work with newest w3org standards compliant browsers (eg Navigator or Explorer 6) until the plug in is rewritten.  (wmp 7.1 was not compliant0 at one poing.  See
   Windows Media Player and Netscape 6.x  
(*** Note This section of the tutorial has not been recently updated so check online sources for the most current information.)
Embedding code

<OBJECT ID="WinMedia" width=160 height=120
                             mplayer/en/,1,52,701" standby=
                             "Loading Microsoft® Windows® Media Player components..."
                             <PARAM NAME="FileName" VALUE="yourfile.asx">
                             <PARAM NAME="AutoStart" Value="True">
                             <PARAM NAME="ShowControls" VALUE="False">
                             <PARAM NAME="ShowStatusBar" VALUE="True">
                             <EMBED type="application/x-mplayer2"
                             MediaPlayer/" SRC="yourfile.asx" name="WinMedia"
                             autostart=1 width=160 height=120 ShowStatusBar=true


Sample of Javascript commands

<A HREF="javascript:document.WinMedia.Play()">
                              <IMG SRC="play.gif" WIDTH="75" HEIGHT="75" BORDER="0"
                              ALT="PLAY BUTTON"></A>

                              <A HREF="javascript:document.WinMedia.Pause()">
                              <IMG SRC="pause.gif" WIDTH="75" HEIGHT="75" BORDER="0"
                              ALT="PAUSE BUTTON"> </A>

                              <A HREF="javascript:document.WindMedia.Stop()">
                              <IMG SRC="stop.gif" WIDTH="75" HEIGHT="75" BORDER="0"
                              ALT="STOP BUTTON"> </A>


For information on another plug-in here are links;
  Infoarts guide on how to use javascript to control Netscape's LiveAudio plug in (LiveAudio was the main plug-in used by Netscape  to control Audio but now other plug-ins have come into prevalence.)
Web Monkey tutorial on controlling real player.
Web Review on javascript real player skin control
Microsoft Developer Network information on bgsound for listing of possible commands.
DrJavascript's pages on use of activeX to control audio in Explorer - Embedding Sound in Web Pages, Part I: Audio Control Example Code - Doc JavaScript .

Using Other Plug-ins, Sniffers

There are other approaches possible with Internet Explorer.  The  bgsound method of embedding sounds also allows use of Javascript.  Although details cannot be offered here, please visit Microsoft Developer Network information on bgsound for listing of possible commands.  Also, see DrJavascript's pages on use of activeX to control audio in Explorer - Embedding Sound in Web Pages, Part I: Audio Control Example Code - Doc JavaScript .   Finally the Windows Media Player plugin responds to its particular set of javascript commands.  (Unfortunately, even with media player version 7  the newest browsers Netscape and Explorer 6 do not allow javascript controls because of the change to the w3 org new standards for plugins.)    The examples below should be useful because they illustrate the ways javascript can be used to control sound and video.The approaches illustrated below should work with other plug-ins provided you used the correct DOM identifiers and the particular javascript commands allowed with each plugin..   See mini-tutorial for Windows Media Player below for more details

Sniffers:  Although it is beyond the scope of this tutorial, it should be possible to write Javascript functions that used detection of browser, version, and os to make routines that would work in most situations. The function "sniffs" what browser the visitor is using and branches to the appropirate commands.  Here are links to some samples of detectors.

Great possibilities

This page has only skimmed the surface of ways of dynamically controlling media on the web.  You are not limited to limiting yourself to embedded media that can only be controlled by the standard controllers.  You can create intriquing and sophisticated methods of viewer interaction by using Javascript and DHTML techniques. See the infoarts  howto guide for links to relevant sites.

** 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/Information Arts(CIA), SFSU ( 
- More information about the CIA program is available at (
- It is a resource used in Art511 Art&Telecommunications course (
- A comprehensive guide to Web design is available in the book World Wide Web Design Guide (Hayden Books out of print) by Stephen Wilson
- The url of this page is ( 

Historical Section on Problems and Inconsistencies in Javascript control of Quicktime

**Limitations on these Quicktime examples -  - Document Object Models (DOM) - Compatibility

Unfortunately, the examples below will only work reliably with Netscape Navigator 4 and Quicktime for now.  The problems are worth exploring because they illustrate the current complexities.  Here is a rundown of what a developer must consider.  The author will continue to work on overcoming these problems..

Consideration #1 Plugp-in support:  The plug in must be designed to be controllable by Javascript.  Most are now.  For example, Quicktime, Windows Media Plaayer, Netscape Live Audio, Real Player, Crescendo, etc claim to be controllable by Javascript.  The web visitor must have their MIME options set to use the plug-in you are embedding although the new w3 standards will allow the original OBJECT command to specify the plug in to be used.

Consideration # 2  Communication between browser and plug-in.  The Browser must be designed with the capabilility of letting Javascript talk to the plug in.  Netscape introducted the "Live connect" method which both Navigator and Explorer supported the feature for a while.  Complexities emerged.  For some reason developers of the Mac version of Explorer left out that feature in Explorer 4 & 5. The Windows  version of Explorer supposedly supports the feature although the author was not able to verify it.

The w3organization has introduced a new world wide web standard for communication between plug-ins and browsers called.  xxxx.  New versions of browsers will use this method in the future - for example, it is supported by netscape 6 and explorer 6.  Plug in developers will similarly need to rewrite their plug ins to use this method.  For example,  quicktime 6 supports it while quicktime 5 does not.  For now, the switch creates major compatibility problems although eventually the development environment will be easier.

Consideration # 3  The DOM (Document Object Model)   Javascript requires the ability to identify the object in the web page that is to be acted on.  The method for indicating objects is called the Document Object Model or DOM.  Navigator, Explorer, and the W3org starnadars all use different methods of locating objects on a page.  Thus javascript functions will need to be different in the way they identify the sound or video object. This is explained more below.

As an illustration of the complexities, this table summarizes Quicktime compatibility

Javascript Scriptability of the Quicktime plug in on various versions of browsers
Browser/OS version version 4 version 5  version 6 version 7
qt 5 & 6
qt 5 & 6
qt 6 only

qt 5 & 6
no version 5 yes1
qt 6 only

No  (no javascript scripting)2 No  (no javascript scripting)2 yes1
qt 6 only

no version 5 yes1
qt 6 only

    Different forms of DOM (Document Object Model):  navigator = nav     ie = explorer  w3 = w3organization model
Documentation suggests these should work but they are not fully tested or verified.
The Macintosh version of Explorer 4 & 5  did not include the interface for quicktime scriptability
Browsers based on w3organization's standards for DOM's and for w3org plug in architecture   Only quicktime 6 is compliant.

If you want more details, here are some links to developer sources on the javascript media control problems and possible work-arounds with various browser/plugins combinations