riptide
05-04-2007, 07:02 PM
here is the site
http://www.jsworkshop.com/js13examples.html
the book is
Sams Teach Yourself JavaScript in 24 Hours, 3rd Edition
the problem is this code. some how the notes are name and called.the big problem is the Setup()function
you write object tags for the divs. but the divs are not holding the sound. and they are not the file names so how do you write object tags for them and the sounds plays.
why does this work?
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();
.white {
float: left;
background-color: white;
height: 300px;
width: 30px;
border: 2px solid black;
}
.black {
float: left;
background-color: black;
height: 225px;
width: 25px;
}
<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>
http://www.jsworkshop.com/js13examples.html
the book is
Sams Teach Yourself JavaScript in 24 Hours, 3rd Edition
the problem is this code. some how the notes are name and called.the big problem is the Setup()function
you write object tags for the divs. but the divs are not holding the sound. and they are not the file names so how do you write object tags for them and the sounds plays.
why does this work?
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();
.white {
float: left;
background-color: white;
height: 300px;
width: 30px;
border: 2px solid black;
}
.black {
float: left;
background-color: black;
height: 225px;
width: 25px;
}
<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>