JZZ.synth.Timbre

How it works

This is a wrapper for Timbre.js library.

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

Page source

<!DOCTYPE html>
<html>
<head>
<title>JZZ.synth.Timbre</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="timbre.js"></script>
<script src="JZZ.synth.Timbre.js"></script>
<script src="JZZ.input.Kbd.js"></script>
</head>

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

<div id=piano></div>

<script><!--
var timbre = T("SynthDef").play();
timbre.def = function(opts) {
  var osc1, osc2, env;
  osc1 = T("sin", {freq:opts.freq, mul:0.25});
  osc2 = T("sin", {freq:opts.freq + 8, mul:0.25});
  env  = T("line", {s:450, r:2500, lv:0.5}, osc1, osc2);
  return env.on("ended", opts.doneAction).bang();
};

var synth = JZZ.synth.Timbre(timbre);

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.Timbre

How it works

Page source

See also