InformIT: Sams Teach Yourself JavaScript in 24 Hours > Workshop: Playing Music with the Mouse

Workshop: Playing Music with the Mouse

As an example of controlling a plug-in with JavaScript, you will now create a script to play sounds. I've created some graphics that vaguely resemble a piano keyboard and audio files for each note. Your script can detect mouse clicks on the keys and play the appropriate notes.

Embedding the Sounds

For this example, I've created sound files in WAV format for each of the 13 notes in a single octave of a piano keyboard. Each file is named after the note it contains. Your HTML document will need to include these sounds using the <embed> tag.

Normally, when you embed a sound, it plays as soon as the page loads. You don't want all 13 notes to play at once (and that wouldn't work anyway), so use the AUTOSTART=false parameter to prevent the sounds from playing.

Also include the HIDDEN=true parameter to prevent the browser from displaying cute little control panels for each of the sounds. The <embed> tag for a single note (the bottom C) would look like this:

<embed SRC="C0.wav" HIDDEN=true AUTOSTART=false>

Because the HTML document will include a tag like this for each sound, the 13 sounds will be loaded (but not played) immediately. This will prevent the browser from having to communicate with the server to load a file each time you click on a piano key.

Displaying the Keyboard

For the keyboard display, I've created two GIF graphics: a white key and a black key. The HTML document simply needs to include whitekey.gif and blackkey.gif in the right combination to display the 13 keys.

For a better-looking keyboard, you could use an image map. The script in this hour's workshop sticks to linked graphics for simplicity; see this book's Web site for a fancier version. Here's the HTML link tag for a single piano key:

<a href="#" onClick="playnote(0)">
   <img border=0 SRC="whitekey.gif" ALIGN=TOP></a>

This displays the white key graphic. It is linked with "#" as a target (which will prevent the browser from loading a different page), and the onClick event handler runs a JavaScript function to play the note.

Playing the Sounds

The playnote function handles the playing of the appropriate sound. It accepts a parameter, note (a number from 0 to 12 representing one of the embedded sounds) and uses the play method to play the sound. Here's the function:

function playnote(note) {
document.embeds[note].play();
}

A Word About Audio Plug-ins

When you're dealing with plug-ins, you need to make sure you (and the users of your Web site) have the correct plug-ins. While most browsers include a plug-in for WAV files, installing other software can often remove or interfere with the included plug-ins. Here are some tips for getting sounds to play in the latest browsers:

For Netscape 4.x, make sure the LiveAudio component is installed.
For Internet Explorer 4.0 and later for Windows, install the latest version of the Windows Media Player component. If other audio software has been installed, you may need to re-install Windows Media Player to get sounds working.
At the time of this writing, Netscape 6 does not include a plug-in for playing sounds. While you can install plug-ins to play sounds in Netscape 6, such as Apple's QuickTime and Microsoft's Windows Media Player, they are not currently scriptable using the techniques presented here. A future release of LiveAudio from Netscape may solve this problem.

Putting It All Together

Listing 16.2 shows the complete HTML document for the piano. This listing may look long, but most of the lines are just repeated forms of the ones in the previous sections: 13 <embed> tags, and 13 links and images for the keyboard display. Each link sends a different parameter to the play function to play the appropriate note.

Example 16.2. The complete HTML and script for the piano example

<html>
<head>
<title>JavaScript Piano</title>
<script LANGUAGE="JavaScript" type="text/javascript">
function playnote(note) {
  document.embeds[note].play();
}
</script>
</head>
<body>
<embed SRC="C0.wav" HIDDEN=true AUTOSTART=false>
<embed SRC="Cs0.wav" HIDDEN=true AUTOSTART=false>
<embed SRC="D0.wav" HIDDEN=true AUTOSTART=false>
<embed SRC="Ds0.wav" HIDDEN=true AUTOSTART=false>
<embed SRC="E0.wav" HIDDEN=true AUTOSTART=false>
<embed SRC="F0.wav" HIDDEN=true AUTOSTART=false>
<embed SRC="Fs0.wav" HIDDEN=true AUTOSTART=false>
<embed SRC="G0.wav" HIDDEN=true AUTOSTART=false>
<embed SRC="Gs0.wav" HIDDEN=true AUTOSTART=false>
<embed SRC="A0.wav" HIDDEN=true AUTOSTART=false>
<embed SRC="As0.wav" HIDDEN=true AUTOSTART=false>
<embed SRC="B0.wav" HIDDEN=true AUTOSTART=false>
<embed SRC="C1.wav" HIDDEN=true AUTOSTART=false>
<h1>The JavaScript Piano</h1>
<hr>
<p>Click on the funny-looking piano keys below to play a melody.</p>
<hr>
<a HREF="#" onClick="playnote(0)">
   <img border=0 SRC="whitekey.gif" ALIGN=TOP></a>
<a HREF="#" onClick="playnote(1)">
   <img border=0 SRC="blackkey.gif" ALIGN=TOP></a>
<a HREF="#" onClick="playnote(2)">
   <img border=0 SRC="whitekey.gif" ALIGN=TOP></a>
<a HREF="#" onClick="playnote(3)">
   <img border=0 SRC="blackkey.gif" ALIGN=TOP></a>
<a HREF="#" onClick="playnote(4)">
   <img border=0 SRC="whitekey.gif" ALIGN=TOP></a>
<a HREF="#" onClick="playnote(5)">
   <img border=0 SRC="whitekey.gif" ALIGN=TOP></a>
<a HREF="#" onClick="playnote(6)">
   <img border=0 SRC="blackkey.gif" ALIGN=TOP></a>
<a HREF="#" onClick="playnote(7)">
   <img border=0 SRC="whitekey.gif" ALIGN=TOP></a>
<a HREF="#" onClick="playnote(8)">
   <img border=0 SRC="blackkey.gif" ALIGN=TOP></a>
<a HREF="#" onClick="playnote(9)">
   <img border=0 SRC="whitekey.gif" ALIGN=TOP></a>
<a HREF="#" onClick="playnote(10)">
   <img border=0 SRC="blackkey.gif" ALIGN=TOP></a>
<a HREF="#" onClick="playnote(11)">
   <img border=0 SRC="whitekey.gif" ALIGN=TOP></a>
<a HREF="#" onClick="playnote(12)">
   <img border=0 SRC="whitekey.gif" ALIGN=TOP></a>
<hr>
</body>
</html>

To try out the piano, put the HTML document in the same directory as the required graphic and sound files, either on your local computer or a Web server. You can then load the document and begin playing the piano. (You can't play chords, but they're only used by the most advanced musicians anyway.)

Figure 16.2 shows Internet Explorer's display of the piano keyboard. Books aren't nearly as multimedia-ready as the Web, so you'll have to try the script yourself to hear the sounds.

Figure 16.2 Internet Explorer displays the piano keyboard script.

Summary | Next Section

Previous Section