JZZ.synth.Tiny

How it works

Use the mouse or touch screen and/or keyboard to play the synth.

Page source

<!DOCTYPE html>
<html>
<head>
<title>JZZ.synth.Tiny</title>
<style type="text/css">
.inner {position:absolute; bottom:0; left:0; width:100%; text-align:center;}
</style>
<script src="JZZ.js"></script>
<script src="JZZ.synth.Tiny.js"></script>
<script src="JZZ.input.Kbd.js"></script>
</head>

<body>
<h1>JZZ.synth.Tiny</h1>

<div id=piano></div>

<script><!--
var synth = JZZ.synth.Tiny();

var piano = JZZ.input.Kbd({at:'piano', from:'C5', to:'B5', onCreate:function() {
  this.getBlackKeys().setStyle({color:'#fff'});
  this.getKey('C5').setInnerHTML('<span class=inner>Z</span>');
  this.getKey('C#5').setInnerHTML('<span class=inner>S</span>');
  this.getKey('D5').setInnerHTML('<span class=inner>X</span>');
  this.getKey('D#5').setInnerHTML('<span class=inner>D</span>');
  this.getKey('E5').setInnerHTML('<span class=inner>C</span>');
  this.getKey('F5').setInnerHTML('<span class=inner>V</span>');
  this.getKey('F#5').setInnerHTML('<span class=inner>G</span>');
  this.getKey('G5').setInnerHTML('<span class=inner>B</span>');
  this.getKey('G#5').setInnerHTML('<span class=inner>H</span>');
  this.getKey('A5').setInnerHTML('<span class=inner>N</span>');
  this.getKey('A#5').setInnerHTML('<span class=inner>J</span>');
  this.getKey('B5').setInnerHTML('<span class=inner>M</span>');
}});

var ascii = JZZ.input.ASCII({
  Z:'C5', S:'C#5', X:'D5', D:'D#5', C:'E5', V:'F5',
  G:'F#5', B:'G5', H:'Ab5', N:'A5', J:'Bb5', M:'B5'
});

ascii.connect(piano);
piano.connect(synth);
--></script>

</body>
</html>

JZZ.synth.Tiny

How it works

Page source

See also