var delay = new Tone.FeedbackDelay(0.5).connect(Tone.Master);

var delay2 = new Tone.FeedbackDelay(2).connect(Tone.Master);

var pingpong = new Tone.PingPongDelay(1, 0.2)

var reverb = new Tone.JCReverb(0.01).connect(Tone.Master);

var tremolo = new Tone.Tremolo(9, 0.75).toMaster();

var mic, fft;

var colorName = "gray";

var vol = new Tone.Volume(-12);

var vol2 = new Tone.Volume(-50);

​

function setup() {

  createCanvas(windowWidth, 450);

  Tone.Transport.start();

  Tone.Master.mute = true;

  noFill();

​

  mic = new p5.AudioIn();

  mic.start();

  fft = new p5.FFT();

  fft.setInput(mic);

​

}

// Audio

osc = new Tone.Oscillator(200, "sine").connect(delay2).toMaster();

osc.toMaster();

osc.start();

​

tone1 = new Tone.Oscillator(200, "sine").connect(delay2).toMaster();

​

tone2 = new Tone.Oscillator(400, "sine").connect(delay2).toMaster();

​

tone3 = new Tone.Oscillator(600, "sine").connect(delay2).toMaster();

​

var synth1 = new Tone.Synth({

  oscillator: {

    type: 'sine'

  },

  envelope: {

    attack: 2,

    decay: 1,

    sustain: 0.4,

    release: 3

  }

​

​

}).connect(delay).toMaster();

​

var synth1pattern = new Tone.Pattern(function(time, note) {

  synth1.triggerAttackRelease(note, "4n", time);

}, ["C2", "C3", "C4", "D2", "D3", "D2", "E2", "E3", "E2"], "alternateUp");

synth1pattern.humanize = true;

​

var synth2 = new Tone.DuoSynth()

synth2.set({

  "filter": {

    "type": "lowpass"

  },

  "envelope": {

    "sustain": 1

  }

}).connect(pingpong).toMaster();

​

var synth2pattern = new Tone.Pattern(function(time, note) {

  synth2.triggerAttackRelease(note, "4n", time);

}, ["C2", "C3", "C4", "D2", "D3", "D2"], "alternateUp");

synth2pattern.humanize = true;

​

var synth3 = new Tone.DuoSynth({

  vibratoAmount: 0,

  vibratoRate: 0,

  harmonicity: 1.5,

  voice6: {

    volume: 15,

    portamento: 0,

    oscillator: {

      type: "sine3"

    },

    filterEnvelope: {

      attack: 0.01,

      decay: 0,

      sustain: 2,

      release: 3

    },

    envelope: {

      attack: 0.01,

      decay: 0,

      sustain: 2,

      release: 3

    }

  },

  voice3: {

    volume: 15,

    portamento: 0,

    oscillator: {

      type: "sine"

    },

    filterEnvelope: {

      attack: 0.01,

      decay: 0,

      sustain: 2,

      release: 1

    },

    envelope: {

      attack: 0.01,

      decay: 0,

      sustain: 2,

      release: 1

    }

  }

}).connect(pingpong).toMaster();

​

var synth3pattern = new Tone.Pattern(function(time, note) {

  synth3.triggerAttackRelease(note, "8n", time);

}, ["C2", "C3", "C4", "D2", "D3", "D2"], "alternateUp");

synth3pattern.humanize = true;

​

​

var percussion1 = new Tone.MembraneSynth({

  "pitchDecay": 0.008,

  "octaves": 4,

  "envelope": {

    "attack": 0.0006,

    "decay": 0.5,

    "sustain": 0.5,

    "volume": 0

  }

}).toMaster();

​

var percussion1pattern = new Tone.Pattern(function(time, note) {

  percussion1.triggerAttackRelease(note, "4n", time);

}, ["E1", "E2", "E3", "E4"], "alternateDown");

percussion1pattern.humanize = true;

​

var percussion2 = new Tone.MembraneSynth({

  "pitchDecay": 0.008,

  "octaves": 4,

  "envelope": {

    "attack": 0.0006,

    "decay": 0.5,

    "sustain": 0.5,

    "volume": 0

  }

}).connect(pingpong).toMaster();

​

var percussion2pattern = new Tone.Pattern(function(time, note) {

  percussion2.triggerAttackRelease(note, "4n", time);

}, ["E2", "D3", "C3", "C4", "E4"], "alternateDown");

percussion2pattern.humanize = true;

​

var percussion3 = new Tone.MembraneSynth({

  "pitchDecay": 0.008,

  "octaves": 4,

  "envelope": {

    "attack": 0.0006,

    "decay": 0.5,

    "sustain": 0.5,

    "volume": 0

  }

}).toMaster();

​

var percussion3pattern = new Tone.Pattern(function(time, note) {

  percussion3.triggerAttackRelease(note, "4n", time);

}, ["E2", "D3", "C3", "C4", "E4"], "alternateUp");

percussion3pattern.humanize = true;

​

document.querySelector('#tone1').addEventListener('mousedown', function() {

  togglePlayStart(tone1);

  greenButton();

})

document.querySelector('#tone2').addEventListener('mousedown', function() {

  togglePlayStart(tone2);

  orangeButton();

})

document.querySelector('#tone3').addEventListener('mousedown', function() {

  togglePlayStart(tone3);

  yellowButton();

})

document.querySelector('#synth1').addEventListener('mousedown', function() {

  togglePlayStart(synth1pattern);

  pinkButton();

})

document.querySelector('#synth2').addEventListener('mousedown', function() {

  togglePlayStart(synth2pattern);

  magentaButton();

})

document.querySelector('#synth3').addEventListener('mousedown', function() {

  togglePlayStart(synth3pattern);

  redButton();

})

document.querySelector('#percussion1').addEventListener('mousedown', function() {

  togglePlayStart(percussion1pattern);

  blueButton();

})

document.querySelector('#percussion2').addEventListener('mousedown', function() {

  togglePlayStart(percussion2pattern);

  purpleButton();

})

document.querySelector('#percussion3').addEventListener('mousedown', function() {

  togglePlayStart(percussion3pattern);

  lightgreenButton();

})

​

​

​

​

document.querySelector('#vol').addEventListener('mousedown', function() {

  if (Tone.Master.mute == true) {

    Tone.Master.mute = false;

    soundVisualizer();

  } else if (Tone.Master.mute == false) {

    Tone.Master.mute = true;

    clearButton();

  }

  var input = document.getElementById("myInput");

  var slider = document.getElementById("myRange");

  var output = document.getElementById("demo");

  output.innerHTML = slider.value; // Display the default slider value

  //Update the current slider value (each time you drag the slider handle)

  slider.oninput = function() {

    output.innerHTML = this.value;

  }

})

​

​

function clearButton() {

  colorName = "gray";

}

​

function orangeButton() {

  colorName = "orange";

}

​

function greenButton() {

  colorName = "green";

}

​

function yellowButton() {

  colorName = "yellow";

}

​

function pinkButton() {

  colorName = "pink";

}

​

function magentaButton() {

  colorName = "magenta";

}

​

function redButton() {

  colorName = "red";

}

​

function blueButton() {

  colorName = "blue";

}

​

function purpleButton() {

  colorName = "purple";

}

​

function lightgreenButton() {

  colorName = "lightgreen";

}

​

function grayButton() {

  colorName = "gray";

}

​

function togglePlayStart(synth) {

  if (synth.state == "started") {

    synth.stop();

  } else if (synth.state == "stopped") {

    synth.start();

  }

  console.log(synth.state);

}

​

​

​

​

function soundVisualizer() {

  var spectrum = fft.analyze();

  fill(colorName);

  beginShape();

  for (i = 0; i < spectrum.length; i++) {

    vertex(i, map(spectrum[i], 0, 300, height, 0));

  }

  endShape();

}

​

function dots() {

  if (tone1.state == "started") {

    fill('green');

    ellipse(50, 30, 15, 15);

  } else if (tone1.state == "stopped") {

    fill('gray');

    ellipse(50, 30, 15, 15);

  }

  if (tone2.state == "started") {

    fill('orange');

    ellipse(150, 30, 15, 15);

  } else if (tone2.state == "stopped") {

    fill('gray');

    ellipse(150, 30, 15, 15);

  }

  if (tone3.state == "started") {

    fill('yellow');

    ellipse(260, 30, 15, 15);

  } else if (tone3.state == "stopped") {

    fill('gray');

    ellipse(260, 30, 15, 15);

  }

  if (synth1pattern.state == "started") {

    fill('lightpink');

    ellipse(368, 30, 15, 15);

  } else if (synth1pattern.state == "stopped") {

    fill('gray');

    ellipse(368, 30, 15, 15);

  }

  if (synth2pattern.state == "started") {

    fill('magenta');

    ellipse(475, 30, 15, 15);

  } else if (synth2pattern.state == "stopped") {

    fill('gray');

    ellipse(475, 30, 15, 15);

  }

  if (synth3pattern.state == "started") {

    fill('red');

    ellipse(580, 30, 15, 15);

  } else if (synth3pattern.state == "stopped") {

    fill('gray');

    ellipse(580, 30, 15, 15);

  }

  if (percussion1pattern.state == "started") {

    fill('blue');

    ellipse(665, 5, 8, 8);

  } else if (percussion1pattern.state == "stopped") {

    fill('gray');

    ellipse(665, 5, 8, 8);

  }

  if (percussion2pattern.state == "started") {

    fill('purple');

    ellipse(718, 5, 8, 8);

  } else if (percussion2pattern.state == "stopped") {

    fill('gray');

    ellipse(718, 5, 8, 8);

  }

  if (percussion3pattern.state == "started") {

    fill('lightgreen');

    ellipse(773, 5, 8, 8);

  } else if (percussion3pattern.state == "stopped") {

    fill('gray');

    ellipse(773, 5, 8, 8);

  }

}

​

function draw() {

  var sliderValue = document.getElementById("myRange").value;

  osc.frequency.value = map(mouseX, 0, width, 40, sliderValue);

  if (Tone.Master.mute == false) {

    soundVisualizer();

    dots();

  } else {}

  dots();

}