magical.js

magical.js

const synth = new Tone.Synth().toMaster();
const polySynth = new Tone.PolySynth(6, Tone.Synth).toMaster();
polySynth.volume.value = -5;

Tone.Transport.bpm.value = 90;

const chordAb = ["Ab3", "Cb4", "Eb4", "Gb4"];
const chordDb = ["Ab3", "Cb4", "Db4", "F4"];

const chordEb = ["Gb3", "Bb3", "Db4"];
const chord4 = ["Gb3", "Cb3", "Eb4"];
const chord5 = ["Cb3", "Eb4", "Gb4"];
const chord6 = ["Ab3", "Bb3", "Db4"];

const chordList = [
  ["0:0:0", ["Db2", ...chordAb]],
  ["1:0:0", ["Db3", ...chordAb]],
  ["2:0:0", ["Db2", ...chordDb]],
  ["3:0:0", ["Db3", ...chordDb]],

  ["4:0:0", ["Eb2", ...chordEb]],
  ["5:0:0", ["Ab2", ...chord4]],
  ["6:0:0", ["Db2", ...chord5]],
  ["7:0:0", ["Gb2", ...chord6]]
];

document.querySelector("#start").addEventListener("click", () => {
  var context = new AudioContext();
  // Tone.start();

  var chordPart = new Tone.Part(function(time, chord) {
    polySynth.triggerAttackRelease(chord, "1m", time);
  }, chordList).start();

  chordPart.loop = true;
  chordPart.loopStart = "0:0";
  chordPart.loopEnd = "10:0";

  var loop = new Tone.Loop(function(time) {
    polySynth.triggerAttackRelease("Db3", "8n", time);
  }, "4n")
    .start()
    .stop("8m");

  Tone.Transport.start();
});

document.querySelector("#cis").addEventListener("click", () => {
  synth.triggerAttackRelease("C#4", "16n");
});
document.querySelector("#dis").addEventListener("click", () => {
  synth.triggerAttackRelease("D#4", "16n");
});
document.querySelector("#fis").addEventListener("click", () => {
  synth.triggerAttackRelease("F#4", "16n");
});
document.querySelector("#gis").addEventListener("click", () => {
  synth.triggerAttackRelease("G#4", "16n");
});
document.querySelector("#ais").addEventListener("click", () => {
  synth.triggerAttackRelease("A#4", "16n");
});

document.querySelector("#cis5").addEventListener("click", () => {
  synth.triggerAttackRelease("C#5", "16n");
});
document.querySelector("#dis5").addEventListener("click", () => {
  synth.triggerAttackRelease("D#5", "16n");
});
document.querySelector("#fis5").addEventListener("click", () => {
  synth.triggerAttackRelease("F#5", "16n");
});
document.querySelector("#gis5").addEventListener("click", () => {
  synth.triggerAttackRelease("G#5", "16n");
});
document.querySelector("#ais5").addEventListener("click", () => {
  synth.triggerAttackRelease("A#5", "16n");
});