Jazz-Soft.net
We make it sound!
Turn your keyboard into MIDI piano...
This is not a sample of fine coding style, but our goal is to demonstrate how simple creation of MIDI widgets can be.
Note that we send a note-off message during the window initialization. It initializes MIDI driver when the page is loaded, so we don't have delays when playing a note, as in the previous example.
See the same example implemented with JZZ.
<!DOCTYPE html>
<html>
<head>
<title>Simple Piano</title>
<meta http-equiv="X-UA-Compatible" content="requiresActiveX=true"/>
<style type="text/css">
div.piano {
font-size: 1.2em;
overflow: hidden;
display: block;
width: 42em;
padding: 0px;
margin: 0px;
border: 0px;
margin-left: 0.5em;
}
.piano span {
color: #808080;
background-color: #f0f0f0;
padding: 0.4em;
margin: 0.1em;
border: 0.3em double;
display: inline-block;
width: 2em;
height: 2em;
vertical-align: top;
}
.piano span.blank {
color: #f0f0f0;
background-color: #fff;
}
.piano span.on {
background-color: #000;
}
object.hidden {
visibility: hidden;
width: 0px;
height: 0px;
margin: 0px;
padding: 0px;
border-style: none;
border-width: 0px;
max-width: 0px;
max-height: 0px;
}
</style>
</head>
<body>
<h1>Simple Piano</h1>
<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;">This page requires <a href=http://jazz-soft.net>Jazz-Plugin</a> ...</p>
</object>
</object>
<script><!--
var Jazz = document.getElementById("Jazz1"); if(!Jazz || !Jazz.isJazz) Jazz = document.getElementById("Jazz2");
var midi={65:58,90:59,88:60,68:61,67:62,70:63,86:64,66:65,72:66,78:67,74:68,77:69,75:70,188:71,190:72,186:73,59:73,191:74,222:75};
document.onkeydown=function(e){
var e=window.event || e;
var m=midi[e.keyCode];
if(m){
var k=document.getElementById(m);
if(k && k.className!="on"){
if(Jazz.isJazz) Jazz.MidiOut(0x90,m,0x7f);
k.className="on";
}
return false;
}
}
document.onkeyup=function(e){
var e=window.event || e;
var m=midi[e.keyCode];
if(m){
var k=document.getElementById(m);
if(k && k.className!=""){
if(Jazz.isJazz) Jazz.MidiOut(0x80,m,0);
k.className="";
}
return false;
}
}
window.onload=function(){
if(Jazz.isJazz) Jazz.MidiOut(0x80,0,0);
}
--></script>
<div class="piano">
<span id=58>A</span><span class=blank>S</span><span id=61>D</span><span id=63>F</span><span class=blank>G</span><span id=66>H</span><span id=68>J</span><span id=70>K</span><span class=blank>L</span><span id=73>:<br>;</span><span id=75>"<br>'</span>
</div>
<div class="piano" style="margin-left: 2.3em;">
<span id=59>Z</span><span id=60>X</span><span id=62>C</span><span id=64>V</span><span id=65>B</span><span id=67>N</span><span id=69>M</span><span id=71><<br>,</span><span id=72>><br>.</span><span id=74>?<br>/</span>
</div>
</body>
</html>