Jazz-Soft.net
We make it sound!
Home » Examples » Simple Piano

Simple Piano

ASDFGHJKL:
;
"
'
ZXCVBNM<
,
>
.
?
/

How it works

Turn your keyboard into MIDI piano...

NOTE: There is a better way to map the keys to MIDI notes.

Page source

<!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>

See also