Demonstration of Different Ways to Play a Sound from a Web Page

Here are some examples of sound replay from a web page. View the HTML source of the page to see how it's done. These examples have only been tested on a PC.

Browsers tested: Internet Explorer (6.0), Firefox (1.0), Mozilla (1.7.5), Opera (7.52). Plug-ins tested: Windows Media (10.0), Quicktime (6.5.2).

16 March 2006: Due to a "security" update by Microsoft many of the old means for playing sounds no longer work.

20 April 2006: Options 3 and 4 have been updated with some (crude) work-arounds.

8 May 2006: If you are getting "Click to run an ActiveX control on this webpage", then try putting your JavaScript in its own .js file then including it in the page with <script src="file.js"></script>. Here is an example.

1. Normal Hyperlink to a Sound File

This is the simplest way, but usually causes a helper application to be launched to play the sound. Also, the sound doesn't start playing until it has been downloaded, and the downloading doesn't start until you click on the link. Worse, some helper applications start to play the sound before it is downloaded enough and stop playing part way.

<a href="success.wav">Play Sound</a>

Play Sound

Compatibility: Internet Explorer, Mozilla/Firefox, Opera.

2. Embedding a Sound File

The EMBED tag causes the sound file to be downloaded when the page itself is downloaded (just like an image would be). The browser then looks for a Plug-In to play the file. Internet Explorer will typically use the Windows Media Player plug-in for sound files. Mozilla requires you to install a suitable plug-in such as Quick Time. A disadvantage of the EMBED tag is that because you do not know the dimensions or the name of the plug-in, it is hard to control the size and format of the player's appearance.

<embed src="success.wav" autostart=false loop=false>

If this doesn't work, look here for more help on plug-ins for audio replay.

Compatibility: Internet Explorer, Mozilla/Firefox, Opera.

3. Controlling an Embedded Sound using JavaScript (Old)

A slight improvement on the above can be gained by making the embedded player invisible and controlling it from JavaScript. There are two parts to this: firstly a function (here called EvalSound) which takes the "name" of the hidden embedded player and calls its Play() method. Secondly a link, image or button which calls the function on demand when the component is clicked or has the mouse rolled onto it.

Here is the first part: the embedded sound and the EvalSound() function:

<script>
function EvalSound(soundobj) {
  var thissound= eval("document."+soundobj);
  thissound.Play();
}
</script>

<embed src="success.wav" autostart=false width=0 height=0 name="sound1"
enablejavascript="true">

Here are examples of a link, an image and a button calling the function.

<a href="#" onMouseOver="EvalSound('sound1')">Move mouse here</A>

Move mouse here.

<img src="play.gif" onClick="EvalSound('sound1')">

<form>
<input type="button" value="Play Sound" onClick="EvalSound('sound1')">
</form>

If this doesn't work, look here for more help on plug-ins for audio replay.

Compatibility: Internet Explorer, Mozilla/Firefox, Opera.

4. Controlling an Embedded Sound using JavaScript (New)

A minor variation on 3. is to use the JavaScript getElementById() function in the EvalSound definition. This is actually the preferred method for recent browsers, but is not supported by older versions. The function and the sound object then becomes:

<script>
function EvalSound(soundobj) {
  var thissound=document.getElementById(soundobj);
  thissound.Play();
}
</script>

<embed src="success.wav" autostart=false width=0 height=0 id="sound1"
enablejavascript="true">

Note that we specify name of the embedded sound using its ID attribute now. The function calls however are the same as above. For example:

<form>
<input type="button" value="Play Sound" onClick="EvalSound('sound1')">
</form>

Compatibility: Internet Explorer, Mozilla/Firefox, Opera.

5. Using a Background Sound and JavaScript

It is possible to do much the same as the above without the use of a hidden player if the browser supports the BGSOUND tag (in practice only Internet Explorer). Basically background sounds play as soon as the source sound is available; so the trick is to specify the source only in response to a JavaScript function. Here is the BGSOUND tag and the function:

<bgsound id="sound">
<script>
function PlaySound(url) {
  document.all.sound.src = url;
}
</script>

Here are examples of a link, an image and a button calling the function.

<a href="#" onMouseOver="PlaySound('success.wav')">Move mouse here</A>

Move mouse here.

<img src="play.gif" onClick="PlaySound('success.wav')">

<form>
<input type="button" value="Play Sound" onClick="PlaySound('success.wav')">
</form>

Compatibility: Internet Explorer, Mozilla/Firefox, Opera.

6. Using Dynamic HTML

Dynamic HTML allows you to use JavaScript to write new HTML code into your page and let it be interpreted by the browser. The trick to using dynamic HTML for sound replay is to write into a region of the document the HTML of an embedded sound set to automatically start replay on load. Here we are going to use a <span> region and write into it using its "innerHTML" attribute:

function DHTMLSound(surl) {
  document.getElementById("dummyspan").innerHTML=
    "<embed src='"+surl+"' hidden=true autostart=true loop=false>";
}

We can now create the dummy span region and just pass the URL of the sound file to the function to play it:

<span id=dummyspan></span>
<form>
<input type="button" value="Play Sound" onClick="DHTMLSound('success.wav')">
</form>

Compatibility: Internet Explorer, Mozilla/Firefox, Opera.

7. Using a Java Applet

Java applets are not supported by every browser/platform, and unfortunately there are different versions of Java which make widespread compatibility quite difficult for high-quality audio. Java versions 1.0 and 1.1 are supported by the Microsoft Java Virtual Machine (Java VM) found in Internet Explorer. Later Java versions require a Plug-In to be installed. Mozilla requires the plug-in in any case.

Java 1.0/1.1 Applet

Here is a simple Java applet that you are welcome to use to replay audio through the Microsoft Java VM. The applet below displays a button which when pressed plays a sound. You can choose the button size and an image as shown. However in Java 1.0/1.1 the sound quality is limited to 8000 samples/sec μ-law encoded audio, which is rather poor for anything but speech. You can convert audio files to this format using SOX (sox inp.wav -r 8000 -U out.au).

<applet code=AudioButton.class name=Audio1 width=40 height=40>
  <param name=image value="play.gif">
  <param name=audio value="success.au">
  <param name=bkgray value="128">
</applet>

You'll also need to download the AudioButton.class file.

Compatibility: Internet Explorer, Mozilla/Firefox, Opera.

Java 1.2 and later Applet

The same applet also runs under the Java 1.2 environment, but without the limitation on audio format. This means you can replay the full quality audio file. Java 1.2 is only supported through a plug-in. To install the latest version, go to http://java.sun.com/products/plugin/. This plug-in is required for Mozilla, Firefox or Opera.

<applet code=AudioButton.class name=Audio1 width=40 height=40>
  <param name=image value="play.gif">
  <param name=audio value="success.wav">
  <param name=bkgray value="128">
</applet>

You'll also need to download the AudioButton.class file.

Compatibility: Internet Explorer, Mozilla/Firefox, Opera.

8. Using a Java Applet called from JavaScript

The Java applet in section 7 can be stripped down so that it just loads the audio file and then replays it under command from a JavaScript function. Effectively this is using a Java applet instead of an embedded media player object. However you will need the Java plug-in to run this (see section 7). You can replace the image by a 1x1 pixel transparent gif, if you don't want a picture.

<applet code="AudioPlay.class" id="Audio1" width="40" height="40">
  <param name="image" value="play.gif">
  <param name="audio" value="success.wav">
</applet>

<script>
function EvalSound(soundobj) {
  var thissound=document.getElementById(soundobj);
  thissound.Play();
}
</script>

<form>
<input type="button" value="Play Sound" onClick="EvalSound('Audio1')">
</form>

You'll also need to download the AudioPlay.class file.

Compatibility: Internet Explorer, Mozilla/Firefox, Opera.

9. Increasing compatibility with Real Player

Methods 3 and 4 expect that the embedded object has a method called "Play()" which causes the audio object to replay. This is true of Windows Media Player and Apple Quicktime plug-ins, but not true of the Real Player plug-in. For some reason, the authors of Real Player called this function "DoPlay()" instead! Although it ought to be easy to write a JavaScript function that checks which method is available and calls Play() or DoPlay() accordingly, this very testing of the availability of a method is not very portable across browsers. This is the best that I have been able to come up with:

<script>
function EvalSound(soundobj) {
 var thissound= eval("document."+soundobj);
 try {
     thissound.Play();
 }
 catch (e) {
     thissound.DoPlay();
 }
}
</script>

Compatibility: Internet Explorer, Mozilla/Firefox, Opera.