Tempo-relative timing - JSFiddle

Homepage example

by abubelinha

HTML

<link rel="stylesheet" href="https://tonejs.github.io/assets/css/interface.css">
<script src="https://tonejs.github.io/build/Tone.min.js"></script>
<div id='content'>
  <input type='checkbox' class='playToggle'>
</div>
<div id="canvases">
</div>

CSS

body input[type="range"] {
  display:inline;
  width: 200px;
}

.active {
  text-shadow: 0 0 5px #000;
}

input:not(:checked) + span {
  text-shadow: none
}

#canvases {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#canvases canvas {
  display: block;
  position: absolute;
}

JavaScript

channels = [
	{
  	'label': 'kick',
    'vol': 10,
		'init': function() {return new Tone.MembraneSynth({
      'octaves': 10,
      'envelope': {
        'attack': 0.001,
        'decay': 0.04,
        'sustain': 1.1,
        'release': 0.4
      }
    });},
    'timing': '4n',
    'interval': '8n',
    'mel': ['C1', null, 'C1', null,
    				'C1', null, 'C1',  null,
            'C1', null, 'C1', null,
    				'C1', null, 'C1',  'C1'],
    'sched': [ 0, 0, 0, 0,
    					 1, 1, 1, 1,
    					 1, 1, 1, 1,
    					 1, 1, 1, 1 ]
  },
  {
  	'label': 'hihat',
    'vol': -30,
    'init': function() {return new Tone.MetalSynth({
			"harmonicity" : 2,
			"resonance" : 1000,
			"modulationIndex" : 30,
			"envelope" : {
				"decay" : 1.9,
			},
			"volume" : -15
		})},
    'interval': '8n',
    'mel': [null, '8n', null, '32n'],
    'sched': [0, 0, 0, 0,
    					1, 1, 1, 1,
              0, 0, 0, 0,
    					0, 0, 0, 0],
    'effects': [
      new Tone.Freeverb()
    ]
  }/*,
	{
  	'label': 'hihat2',
    'vol': -25,
    'init': function() {return new Tone.MetalSynth()},
    'interval': '16n',
    'mel': ['8n', '16n', '8n', null,
				    null, '16n', '8n', null,
            null, null, null, null,
            null, null, null, null ],
    'effects': [
      new Tone.Freeverb()
    ],
    'sched': [ 0, 0, 0, 0,
               1, 1, 1, 1,
               0, 0, 0, 0,
               0, 0, 0, 0,
               
               0, 0, 0, 0,
    					 1, 1, 1, 1,
    					 0, 0, 0, 0,
    					 1, 1, 1, 1,
               
               1, 1, 1, 1,
               1, 1, 1, 1,
               1, 1, 1, 1,
               1, 1, 1, 1,
               
               1, 1, 1, 1,
               1, 1, 1, 1,
               1, 1, 1, 1,
               1, 1, 1, 1 ]
  }*/,
  {
  	'label': 'conga',
    'vol': 10,
    'init': function() {return new Tone.MembraneSynth({
			"pitchDecay" : 0.008,
			"octaves" : 2,
			"envelope" : {
				"attack" : 0.006,
				"decay" : 0.009,
				"sustain" :...