|
As an example of scripting multiple embedded objects, you can create a simple demonstration that displays a piano keyboard and plays piano notes when you click on the keys. This example requires an .au sound file for each key, which you can download from this book's website.
The HTML file for this document includes a series of <div> tags that will act as the black and white piano keys. A <link> tag is used to include a CSS file to style the keys, and a <script> tag includes a script you'll create later in this section. The complete HTML document is shown in Listing 20.2.
Listing 20.2. The HTML Document for the Piano Example
<html>
<head>
<title>JavaScript Piano</title>
<link rel="stylesheet" type="text/css" href="piano.css">
</head>
<body>
<h1>JavaScript Piano</h1>
<div class="white" id="c1"> </div>
<div class="black" id="cs1"> </div>
<div class="white" id="d1"> </div>
<div class="black" id="ds1"> </div>
<div class="white" id="e1"> </div>
<div class="white" id="f1"> </div>
<div class="black" id="fs1"> </div>
<div class="white" id="g1"> </div>
<div class="black" id="gs1"> </div>
<div class="white" id="a1"> </div>
<div class="black" id="as1"> </div>
<div class="white" id="b1"> </div>
<div class="white" id="c2"> </div>
<p style="clear:left">
Click the piano keys above to play sounds.
</p>
<script language="javascript" type="text/javascript"
src="piano.js"> </script>
</body>
</html>
|
Type this document or download it from this book's website and store it in the same folder as the sound files. You'll also need the CSS and JavaScript files described in the next sections.
Using CSS, you can make the browser display the series of <div> tags in the HTML document as something resembling piano keys. Listing 20.3 shows the CSS file for this example.
Listing 20.3. The CSS File for the Piano Example
.white {
float: left;
background-color: white;
height: 300px;
width: 30px;
border: 2px solid black;
}
.black {
float: left;
background-color: black;
height: 225px;
width: 25px;
}
|
This file defines two styles for the two classes used in the HTML document, white and black. The float attribute makes the keys appear as a horizontal set of boxes. The size of the keys is set using width and height attributes, and background-color sets the colors to differentiate the keys.
The PlaySound() function will be called when a key is clicked to play a sound. The first lines of this function detect which key was clicked and use the id attribute of the key <div> element to construct the id attribute of the corresponding sound:
function PlaySound(e) {
if (!e) var e = window.event;
// which key was clicked?
thiskey = (e.target) ? e.target: e.srcElement;
var sound = document.getElementById("note_" + thiskey.id);
The remainder of PlaySound() will attempt to play the piano note using the try and catch routine described earlier in this hour.
This example will use JavaScript document.write() statements to write out an <embed> tag for each note. Although this is a roundabout way of doing things, it conveniently avoids Internet Explorer's warning dialog about embedded objects, which would otherwise pop up 13 timesonce for each embedded sound. Here are the lines that write an <embed> tag:
document.write('<embed id="' + 'note_' + divs[i].id + '"');
document.write(' src="' + divs[i].id + '.au" width="0"
 height="0"');
document.write(' autostart="false" enablejavascript="true">');
The src attribute of the <embed> tag is set using the id attribute of each <div> element to embed the corresponding sound file for each key.
To get the piano working, you can combine the techniques discussed previously with a bit more JavaScript. Listing 20.4 shows the JavaScript file for this example.
Listing 20.4. The JavaScript File for the Piano Example
function Setup() {
if (!document.getElementById) return;
// Set up event handlers and embed the sounds
divs = document.getElementsByTagName("div");
for (i=0; i<divs.length; i++) {
// embed the appropriate sound using document.write
document.write('<embed id="' + 'note_' + divs[i].id + '"');
document.write(' src="' + divs[i].id + '.au" width="0"
height="0"');
document.write(' autostart="false" enablejavascript="true">');
// set up the event handler
divs[i].onclick = PlaySound;
}
}
function PlaySound(e) {
if (!e) var e = window.event;
// which key was clicked?
thiskey = (e.target) ? e.target: e.srcElement;
var sound = document.getElementById("note_" + thiskey.id);
try {
// RealPlayer
sound.DoPlay();
} catch (e) {
try {
// Windows Media / Quicktime
sound.Play();
} catch (e) {
alert("No sound support.");
}
}
}
// Run the setup routine when this script executes
Setup();
|
The Setup() function executes when the script loads. Because the <script> tag appears after the <div> elements in the HTML file, it can set event handlers for each <div> and write out the <embed> tags. Setup() uses document.getElementsByTagName and a for loop to do this for each of the keys.
To test the piano, make sure you have everything in one folder: The HTML document, the CSS file (piano.css), the JavaScript file (piano.js), and all 13 sound files. The complete example is shown in Figure 20.2.
| 
