Tone.js - JSFiddle

by abubelinha

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/tone/0.8.0/Tone.min.js"></script>

JavaScript

var pattern = ["", "A4", "A#4", "D5", "F5", "", "A2", "", "", "A4", "A#4", "D5", "E5", "", "A#2", ""];
var pattern2 = ["1", "", "", "", "", "", "", "", "1", "1", "", "", "", "", "", ""];
var synth;

function createSynthWithEffects()  {
  let vol = new Tone.Volume(-12).toMaster();

  let reverb = new Tone.Freeverb(0.9).connect(vol);
  reverb.wet.value = 0.1;

  let delay = new Tone.FeedbackDelay(0.304, 0.5).connect(reverb);
  delay.wet.value = 0.1;

  let vibrato = new Tone.Vibrato(5, 0.2).connect(delay);

  let polySynth = new Tone.PolySynth(3, Tone.Synth, {
    "oscillator": {
      "type": "sine"
    },
    "envelope": {
      "attack": 0.01,
      "decay": 0.1,
      "sustain": 0.2,
      "release": 4,
    }
  });

  return polySynth.connect(vibrato);
}

function playNote(time, note) {
  if (note != "") {
    synth.triggerAttackRelease(note, "16n");
  }
}

synth = createSynthWithEffects();

Tone.Transport.bpm.value = 67;
Tone.Transport.start();

var seq = new Tone.Sequence(playNote, pattern, "8n");
seq.start();