The JavaScript FAQ
Prev	Home	Next

Playing Sound from JavaScript

Question: How do I write a JavaScript function that plays a sound file?

Answer: There are different ways to play sound from JavaScript. Let's consider a couple of examlpes.

Example 1. Here's the simplest cross-browser script for playing a sound file:
self.location="AUDIO_FILE_URL"

Click here to test the code of Example 1. The browser will open a separate sound control window. The user will then have to close this window manually. Note that the script in Example 1 is not user-friendly: every time the user clicks to run this script, the browser will open a new sound control window - even if there might be a couple of other audio windows already playing the same file!

Example 2. Here's a more complex example in which you won't see a separate sound control window. (You'll find a discussion below.)

In Microsoft Internet Explorer, there are several ways to play a sound file from JavaScript, without opening a separate window for sound control. For example, you can use the Explorer-specific BGSOUND tag:

<BGSOUND ID="BGSOUND_ID" LOOP=1 VOLUME="-600" SRC="jsilence.mid">

Use the following JavaScript code to play a sound file mySound.mid via the BGSOUND tag:
To start playing: document.all['BGSOUND_ID'].src='mySound.mid'
To stop playing: document.all['BGSOUND_ID'].src='jsilence.mid'
Here mySound.mid stands for the name of the sound file that you actually want to play; jsilence.mid is a "do-nothing" sound file - it does not play any sound at all, but can be used to stop the playback of other sound files.

In Netscape Navigator, you'll have to use the LiveAudio plugin; to do so, you'll need to put an EMBED tag on your page. For example, if you want to play the file mySound.mid and hide the LiveAudio window, you can use the following EMBED tag:

<EMBED NAME="mySound" SRC="mySound.mid" 
LOOP=FALSE AUTOSTART=FALSE HIDDEN=TRUE MASTERSOUND>

Use the following JavaScript code to control sound in Netscape:
To start playing: document.mySound.play()
To stop playing: document.mySound.stop()

The source code of Example 2 is shown below. The code first tests whether the browser is audio-enabled and then uses the techniques described on this page. You'll see two JavaScript functions, playSound() and stopSound(), that actually start and stop the playback.

<BGSOUND id="BGSOUND_ID" LOOP=1 SRC="jsilence.mid">
<EMBED NAME="Bach" SRC="Bach.mid" 
LOOP=FALSE AUTOSTART=FALSE HIDDEN=TRUE MASTERSOUND>

<script language="JavaScript">
<!--
ver=parseInt(navigator.appVersion)
ie4=(ver>3  && navigator.appName!="Netscape")?1:0
ns4=(ver>3  && navigator.appName=="Netscape")?1:0
ns3=(ver==3 && navigator.appName=="Netscape")?1:0

function playSound() {
 if (ie4) document.all['BGSOUND_ID'].src='Bach.mid';
 if ((ns4||ns3)
  && navigator.javaEnabled()
  && navigator.mimeTypes['audio/x-midi']
  && self.document.Bach.IsReady()
 )
 {
  self.document.Bach.play()
 }
}

function stopSound() {
 if (ie4) document.all['BGSOUND_ID'].src='jsilence.mid';
 if ((ns4||ns3)
  && navigator.javaEnabled()
  && navigator.mimeTypes['audio/x-midi']
 )
 {
  self.document.Bach.stop()
 }
}
//-->
</script>

<form name=myform>
<input type=button value="Play Sound" onClick="playSound()">
<input type=button value="Stop Sound" onClick="stopSound()">
</form>

JavaScripter.net. Copyright © 1999-2006, Alexei Kourbatov

The JavaScript FAQ
Prev	Home	Next