Jazz-Soft.net
We make it sound!
Vertical piano; adding some colors and corner curvature.
<!DOCTYPE html>
<html>
<head>
<title>Piano Style</title>
<script src="JZZ.js"></script>
<script src="JZZ.synth.Tiny.js"></script>
<script src="JZZ.input.Kbd.js"></script>
</head>
<body>
<h1>Piano Style</h1>
<div id=piano></div>
<script><!--
JZZ.synth.Tiny.register();
JZZ.input.Kbd({ at:'piano', pos:'W', ww:21, bw:12, from:'C5', to:'B6' })
.and(function(){
this.getKeys().setStyle({ borderColor:'#888', borderTopRightRadius:'5px', borderBottomRightRadius:'5px' });
this.getWhiteKeys('C5', 'B5').setStyle({ backgroundColor:'#e00' }, { });
this.getBlackKeys('C5', 'B5').setStyle({ backgroundColor:'#fff' }, { });
}).connect(JZZ().openMidiOut());
--></script>
</body>
</html>
Backwards piano; coloring individual keys; adding innerHTML.
<!DOCTYPE html>
<html>
<head>
<title>Piano Style</title>
<script src="JZZ.js"></script>
<script src="JZZ.synth.Tiny.js"></script>
<script src="JZZ.input.Kbd.js"></script>
<style type="text/css">
.inner { position:absolute; bottom:0; left:0; width:100%; text-align:center; }
</style>
</head>
<body>
<h1>Piano Style</h1>
<div id=piano></div>
<script><!--
JZZ.synth.Tiny.register();
JZZ.input.Kbd({at:'top', pos:'N', from:'C5', to:'B5', rev:true})
.and(function() {
this.getKey('C5').setInnerHTML('<span class=inner>C</span>');
this.getKey('D5').setInnerHTML('<span class=inner>D</span>');
this.getKey('E5').setInnerHTML('<span class=inner>E</span>');
this.getKey('F5').setInnerHTML('<span class=inner>F</span>');
this.getKey('G5').setInnerHTML('<span class=inner>G</span>');
this.getKey('A5').setInnerHTML('<span class=inner>A</span>');
this.getKey('B5').setInnerHTML('<span class=inner>B</span>');
this.getKey('C#5').setStyle({ backgroundColor:'#f00' }, { });
this.getKey('D#5').setStyle({ backgroundColor:'#ff0' }, { });
this.getKey('F#5').setStyle({ backgroundColor:'#0f0' }, { });
this.getKey('G#5').setStyle({ backgroundColor:'#00f' }, { });
this.getKey('A#5').setStyle({ backgroundColor:'#a0c' }, { });
}).connect(JZZ().openMidiOut());
--></script>
</body>
</html>
Some paper music; background images.
<!DOCTYPE html>
<html>
<head>
<title>Piano Style</title>
<script src="JZZ.js"></script>
<script src="JZZ.synth.Tiny.js"></script>
<script src="JZZ.input.Kbd.js"></script>
</head>
<body>
<h1>Piano Style</h1>
<div id=piano></div>
<script><!--
JZZ.synth.Tiny.register();
JZZ.input.Kbd({at:'piano', wl:126, bl:80, from:'C5', to:'B5'})
.and(function() {
this.getWhiteKeys().setStyle({ backgroundImage:'url("ben1.png")' }, { backgroundImage:'url("ben0.png")' });
this.getBlackKeys().setStyle({ backgroundImage:'url("ben2.png")' }, { backgroundImage:'url("ben0.png")' });
this.getKey('C5').setStyle({ backgroundPosition:'-1px' });
this.getKey('D5').setStyle({ backgroundPosition:'-43px' });
this.getKey('E5').setStyle({ backgroundPosition:'-85px' });
this.getKey('F5').setStyle({ backgroundPosition:'-127px' });
this.getKey('G5').setStyle({ backgroundPosition:'-169px' });
this.getKey('A5').setStyle({ backgroundPosition:'-211px' });
this.getKey('B5').setStyle({ backgroundPosition:'-253px' });
this.getKey('C#5').setStyle({ backgroundPosition:'-28px top' });
this.getKey('Eb5').setStyle({ backgroundPosition:'-76px top' });
this.getKey('F#5').setStyle({ backgroundPosition:'-151px top' });
this.getKey('Ab5').setStyle({ backgroundPosition:'-199px top' });
this.getKey('Bb5').setStyle({ backgroundPosition:'-247px top' });
}).connect(JZZ().openMidiOut());
--></script>
</body>
</html>
Any DOM element can be a piano key. That includes SVG objects too.
<!DOCTYPE html>
<html>
<head>
<title>SVG Piano</title>
<script src="JZZ.js"></script>
<script src="JZZ.synth.Tiny.js"></script>
<script src="JZZ.input.Kbd.js"></script>
</head>
<body>
<h1>SVG Piano</h1>
<svg width="400" height="200" viewBox="0 0 400 200" stroke="#000" stroke-width="1" fill="#fff">
<polygon id="c5" points="140 10, 5 170, 63 197, 160 20" />
<polygon id="d5" points="160 20, 78 170, 137 182, 180 22" />
<polygon id="e5" points="180 22, 142 165, 194 167, 204 28" />
<polygon id="f5" points="204 28, 195 151, 248 145, 227 33" />
<polygon id="g5" points="227 33, 246 136, 303 122, 253 34" />
<polygon id="a5" points="253 34, 297 111, 346 88, 282 28" />
<polygon id="b5" points="282 28, 340 83, 390 56, 303 22" />
<polygon id="db5" points="160 9, 92 109, 123 119, 169 14" />
<polygon id="eb5" points="175 20, 140 117, 168 120, 187 22" />
<polygon id="gb5" points="221 28, 222 94, 252 88, 231 29" />
<polygon id="ab5" points="242 27, 266 82, 286 71, 255 26" />
<polygon id="bb5" points="275 28, 301 62, 324 50, 285 24" />
This browser does not support SVG!
</svg>
<script><!--
JZZ.synth.Tiny.register();
JZZ.input.Kbd({keys:[
['c5', 'c5'], ['db5', 'db5'], ['d5', 'd5'], ['eb5', 'eb5'], ['e5', 'e5'], ['f5', 'f5'],
['gb5', 'gb5'], ['g5', 'g5'], ['ab5', 'ab5'], ['a5', 'a5'], ['bb5', 'bb5'], ['b5', 'b5']
], onCreate:function(){
this.getWhiteKeys().setStyle({fill:'#fff'}, {fill:'#ccc'});
this.getBlackKeys().setStyle({fill:'#000'}, {fill:'#ccc'});
}}).or(function(){ alert('Cannot open MIDI In!\n' + this.err()); }).connect(JZZ().openMidiOut());
--></script>
</body>
</html>