Scripting Sound

Back back to the main Sound page

This page shows how to script sound for a pre-HTML5 environment. If you want to see the equivalent technique for HTML5, then look here.

Using JavaScript

Using JavaScript is a useful tecnique for the creative use of sound in a web site. The examples on this page assume that you've worked through the JavaScript tutorials, in particular the material about events and functions in the button example.

As an example, here is an image and, when you roll the mouse over the image, it will start a sound playing, and when you take the mouse out, it will stop:

Novation Nova

This is done using the onmouseover and onmouseout events to invoke JavaScript functions. The first thing to say is that the page contains an empty span element, which has the following definition:

<span id="sound"></span>

A span is normally used to apply style to a small inline section of a page. This span does not have any content and the only purpose of this element is to provide somewhere for the sound to be embedded. Look at the source for this page and find this element.

The HTML for the image is:

<img src="Nova.png" alt="Novation Nova" width="200" height="65"
     onmouseover="playSound('ddppl-excert.mp3');"
     onmouseout="stopSound();"
/>

where you can see the handlers for the mouse events. So, when the mouse enters the image, the playSound function is called with the name of the sound file to play given as a parameter. Then, when the mouse leaves the image, the stopSound function is called.

The function which is called to start the sound has the following definition:

function playSound(soundUrl)
{
  var el = document.getElementById('sound');
  if (el != null) {
    el.innerHTML='<embed hidden="true" autoplay="true" src="'+soundUrl+'"></embed>';
  }
}

That function then adds a hidden embed element, as previously discussed here, which then causes the sound to play! The value for the src attribute of the element is passed into the function as an argument and this value is writen into the element when it is inserted into the span.

In contrast, the function to stop the sound has the following definition:

function stopSound()
{
  var el = document.getElementById('sound');
  if (el != null) {
    el.innerHTML='';
  }
}

This function finds the sound span, and removes any content from it. If the playSound function has previously placed an embed element, it will be removed by this. Once the embed element is removed from the page, the sound will stop playing.

Notice that this technique will only work effectively with a single sound. As an exercise, you could consider how you would extend it to work with multiple, different sounds.

Try and apply your JavaScript to create other effects with sounds in your pages. A good source for free sound effects is the PacDV site.

SoundManager

In my experience, using the SoundManager audio library is one of the most flexible ways of controlling and using audio in a web page. The rollover sounds on this page, and all the audio players used in these music pages, are implemented using JavaScript to control the SoundManager audio functions.

If you are serious about having flexible control of audio in your web pages, I suggest that learning enough JavaScript to interact with SoundManager is the way to go. SoundManager even supports HTML 5 audio, so it should be fairly future-proof.