resonantdoghouse
5/14/2018 - 9:12 PM

Beat with Tone.js

Beat with Tone.js

beat-with-tone-js.markdown
content_copyfile_download
  • Rendered
  • Source

Beat with Tone.js

A Pen by Adam Prince on CodePen.

License.

index.html
content_copyfile_download
<!doctype html>
<html class="no-js" lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>teshno!!!</title>
    <meta name="description" content="a weird beat thingy">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="apple-touch-icon" href="icon.png">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link rel="icon" type="image/png" href="favicon.png">
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript" src="https://tonejs.github.io/build/Tone.min.js"></script>
    <script type="text/javascript" src="script-min.js"></script>
  </head>
  <body>
    <div class="content">
      <input type='checkbox' class='playToggle'>
    </div>
  </body>
</html>
script.js
content_copyfile_download

/*
 KICK
 */
var kick = new Tone.MembraneSynth({
	'envelope' : {
		'sustain' : 0,
		'attack' : 0.02,
		'decay' : 0.8
	},
	'octaves' : 10
}).toMaster();

var kickPart = new Tone.Loop(function(time){
	kick.triggerAttackRelease('C2', '8n', time);
}, '2n').start(0);


/*
 SNARE
 */
var snare = new Tone.NoiseSynth({
	'volume' : -5,
	'envelope' : {
		'attack' : 0.001,
		'decay' : 0.2,
		'sustain' : 0
	},
	'filterEnvelope' : {
		'attack' : 0.001,
		'decay' : 0.1,
		'sustain' : 0
	}
}).toMaster();

var snarePart = new Tone.Loop(function(time){
	snare.triggerAttack(time);
}, '2n').start('4n');


/**
 *  PIANO
 */
var piano = new Tone.PolySynth(4, Tone.Synth, {
	'volume' : -8,
	'oscillator' : {
		'partials' : [1, 2, 1],
	},
	'portamento' : 0.05
}).toMaster()

var cChord = ['C4', 'E4', 'G4', 'B4'];
var dChord = ['D4', 'F4', 'A4', 'C5'];
var gChord = ['B3', 'D4', 'E4', 'A4'];

var pianoPart = new Tone.Part(function(time, chord){
	piano.triggerAttackRelease(chord, '8n', time);
}, [['0:0:2', cChord], ['0:1', cChord], ['0:1:3', dChord], ['0:2:2', cChord], ['0:3', cChord], ['0:3:2', gChord]]).start('2m');

pianoPart.loop = true;
pianoPart.loopEnd = '1m';
pianoPart.humanize = true;


/*
 BASS
 */
var bass = new Tone.MonoSynth({
	'volume' : -10,
	'envelope' : {
		'attack' : 0.1,
		'decay' : 0.3,
		'release' : 2,
	},
	'filterEnvelope' : {
		'attack' : 0.001,
		'decay' : 0.01,
		'sustain' : 0.5,
		'baseFrequency' : 200,
		'octaves' : 2.6
	}
}).toMaster();

var bassPart = new Tone.Sequence(function(time, note){
	bass.triggerAttackRelease(note, '16n', time);
}, ['C2', ['C3', ['C3', 'D2']], 'E2', ['D2', 'A1']]).start(0);

bassPart.probability = 0.9;

//set the transport
Tone.Transport.bpm.value = 90;

// GUI //
document.querySelector('.playToggle').addEventListener('change', function(e){
	if (e.target.checked){
		Tone.Transport.start('+0.1');
	} else {
		Tone.Transport.stop();
	}
})
scripts
content_copyfile_download
<script src="https://tonejs.github.io/build/Tone.min.js"></script>
style.scss
content_copyfile_download
// variables

// Colors
$black: #383838;
$purple: #2a38c3;

// Spacing
$spacer: 2rem;

@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Mono:400,700');

*, *:before,
*:after {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  background-color: $black;
  color: white;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 150%;
  font-weight: 700;
  margin: 0;
  padding: 0;
}

.content {
  background-size: cover;
  display: flex;
  align-items: center;
  height: 100vh;
  justify-content: center;
}

.play-toggle {
  appearance: none;
  background-color: black;
  border: none;
  border-radius: 4em;
  color: white;
  cursor: pointer;
  width: 4em;
  height: 4em;
  outline: none;
  position: relative;

  &:before {
    content: '▶';
    color: white;
    font-size: 2em;
    line-height: 2em;
    position: absolute;
    text-align: center;
    width: 100%;
  }
}
styles
content_copyfile_download
<link href="https://tonejs.github.io/assets/css/interface.css" rel="stylesheet" />