Currently, I am using the Autoplay function with a midi file below it. The user is able to start the song but I am looking for a solution to be able stop/pause the song at any point. If anyone has figured this one out, it would be a great help Currently my code is the following. Thanks to all.
- Code: Select all
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="requiresActiveX=true"/>
<title>My first Piano Book</title>
<script type="text/javascript" src="jzz.js"></script>
<script type="text/javascript" src="JZZ.synth.OSC.js"></script>
<script type="text/javascript" src="JZZ.input.Kbd.js"></script>
</head>
<body>
<object id="Jazz1" classid="CLSID:1ACE1618-1C7D-4561-AEE1-34842AA85E90" class="hidden">
<object id="Jazz2" type="audio/x-jazz" class="hidden">
<p style="visibility:visible;"> </a></p>
</object>
</object>
<h2>My first Piano Book</h2>
<div id="piano"></div>
<div class="trackContainer">
<button onclick='playJingleBells();'> Jingle Bells</button>
<button onclick='stop();'>Stop</button> <!-- [b][color=#FF0000]I am calling the stop function here[/color] [/b]
</div>
<style>
#piano {
text-align: center;
}
button {
display: block;
margin-top: 20px;
background-color: white;
border: none;
cursor: pointer;
}
button:hover {
text-decoration: underline;
color: lightblue;
}
h2 {
text-align: center;
}
.trackContainer {
position: absolute;
top: 20px;
text-align: left;
}
backgroundImage {
width: 100px;
height: 360px;
}
</style>
<script>
var Jazz = document.getElementById("Jazz1"); if(!Jazz || !Jazz.isJazz) Jazz = document.getElementById("Jazz2");
JZZ.synth.OSC.register('Web Audio');
var piano = JZZ.input.Kbd({ at:'piano', active:false, pos:'N', from:'C5', to:'B5', 500: { to: 'G5' }, 600: { to: 'B5' }})
.and(function(){
this.getKeys().setStyle({ borderColor:'#888', borderTopRightRadius:'5px', borderBottomRightRadius:'5px', borderBottomLeftRadius:'5px', borderTopLeftRadius:'5px'});
this.getWhiteKeys('C5', 'B5').setStyle({ backgroundColor:'#fff' }, { });
this.getBlackKeys('C5', 'B5').setStyle({ backgroundColor:'#000' }, { });
this.getBlackKeys().setStyle
this.getKey('C5').setStyle({ backgroundImage:'url("red-dot.jpg")' }, { backgroundImage:'url("")' });
this.getKey('D5').setStyle({ backgroundImage:'url("purple-dot.jpg")' }, { backgroundImage:'url("")' });
this.getKey('E5').setStyle({ backgroundImage:'url("yellow-dot.jpg")' }, { backgroundImage:'url("")' });
this.getKey('F5').setStyle({ backgroundImage:'url("pink-dot.jpg")' }, { backgroundImage:'url("")' });
this.getKey('G5').setStyle({ backgroundImage:'url("blue-dot.jpg")' }, { backgroundImage:'url("")' });
this.getKey('A5').setStyle({ backgroundImage:'url("orange-dot.jpg")' }, { backgroundImage:'url("")' });
this.getKey('B5').setStyle({ backgroundImage:'url("green-dot.jpg")' }, { backgroundImage:'url("")' });
})
.connect(JZZ().openMidiOut());
function playJingleBells() {
JZZ.util.iosSound();
piano.noteOn(0, 'E5', 50).wait(300).noteOff(0, 'E5')
.noteOn(0, 'E5', 50).wait(300).noteOff(0, 'E5')
.noteOn(0, 'E5', 50).wait(600).noteOff(0, 'E5')
.noteOn(0, 'E5', 50).wait(300).noteOff(0, 'E5')
.noteOn(0, 'E5', 50).wait(300).noteOff(0, 'E5')
.noteOn(0, 'E5', 50).wait(600).noteOff(0, 'E5')
.noteOn(0, 'E5', 50).wait(300).noteOff(0, 'E5')
.noteOn(0, 'G5', 50).wait(300).noteOff(0, 'G5')
.noteOn(0, 'C5', 50).wait(600).noteOff(0, 'C5')
.noteOn(0, 'D5', 50).wait(300).noteOff(0, 'D5')
.noteOn(0, 'E5', 50).wait(300).noteOff(0, 'E5')
.noteOn(0, 'F5', 50).wait(300).noteOff(0, 'F5')
.noteOn(0, 'F5', 50).wait(300).noteOff(0, 'F5')
.noteOn(0, 'F5', 50).wait(800).noteOff(0, 'F5')
.noteOn(0, 'F5', 50).wait(200).noteOff(0, 'F5')
.noteOn(0, 'F5', 50).wait(200).noteOff(0, 'F5')
.noteOn(0, 'E5', 50).wait(200).noteOff(0, 'E5')
.noteOn(0, 'E5', 50).wait(800).noteOff(0, 'E5')
.noteOn(0, 'E5', 50).wait(200).noteOff(0, 'E5')
.noteOn(0, 'E5', 50).wait(200).noteOff(0, 'E5')
.noteOn(0, 'E5', 50).wait(300).noteOff(0, 'E5')
.noteOn(0, 'D5', 50).wait(300).noteOff(0, 'D5')
.noteOn(0, 'D5', 50).wait(300).noteOff(0, 'D5')
.noteOn(0, 'E5', 50).wait(300).noteOff(0, 'E5')
.noteOn(0, 'D5', 50).wait(300).noteOff(0, 'D5')
.noteOn(0, 'G5', 50).wait(700).noteOff(0, 'G5');
}
function stop(){ . [color=#FF0000][b] //This is my stop function, which I took form the hello midi template, but currently nothing happens. ive have any advice? [/b][/color]
if(Jazz.isJazz){
Jazz.MidiOut(0x90,60,120);
}
}
</script>
</body>
</html>