Jazz-Soft.net
We make it sound!
Turn your keyboard into MIDI piano...
NOTE: There is a better way to map the keys to MIDI notes.
<!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;
}
</style>
<script src="JZZ.js"></script>
<script src="JZZ.synth.Tiny.js"></script>
</head>
<body>
<h1>Simple Piano</h1>
<script><!--
JZZ.synth.Tiny.register('Synth');
var port = JZZ().openMidiOut().or(function(){alert('Cannot open MIDI port!');});
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"){
port.send([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!=""){
port.send([0x80,m,0]);
k.className="";
}
return false;
}
}
--></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>