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
