keyboard-tone.js

index.html

<div class="switchbox" title="Toggle Notes">
  <input id="checkbox" type="checkbox" onclick="toggle()">
</div>
<ul class="board">

  <li id="F2" class="white" onmouseout="keyRele(this.id)" onmouseup="keyRele(this.id)" onmousedown="getkey(this.id)"></li>
  <li id="F#2" class="black" onmouseout="keyRele(this.id)" onmouseup="keyRele(this.id)" onmousedown="getkey(this.id)"></li>

  <li id="G2" class="white sq" onmouseout="keyRele(this.id)" onmouseup="keyRele(this.id)" onmousedown="getkey(this.id)"></li>
  <li id="G#2" class="black" onmouseout="keyRele(this.id)" onmouseup="keyRele(this.id)" onmousedown="getkey(this.id)"></li>

  <li id="A2" class="white sq" onmouseout="keyRele(this.id)" onmouseup="keyRele(this.id)" onmousedown="getkey(this.id)"></li>
  <li id="A#2" class="black" onmouseout="keyRele(this.id)" onmouseup="keyRele(this.id)" onmousedown="getkey(this.id)"></li>

  <li id="B2" class="white sq" onmouseout="keyRele(this.id)" onmouseup="keyRele(this.id)" onmousedown="getkey(this.id)"></li>

  <li id="C3" class="white" onmouseout="keyRele(this.id)" onmouseup="keyRele(this.id)" onmousedown="getkey(this.id)"></li>
  <li id="C#3" class="black" onmouseout="keyRele(this.id)" onmouseup="keyRele(this.id)" onmousedown="getkey(this.id)"></li>

  <li id="D3" class="white sq" onmouseout="keyRele(this.id)" onmouseup="keyRele(this.id)" onmousedown="getkey(this.id)"></li>
  <li id="D#3" class="black" onmouseout="keyRele(this.id)" onmouseup="keyRele(this.id)" onmousedown="getkey(this.id)"></li>

  <li id="E3" class="white sq" onmouseout="keyRele(this.id)" onmouseup="keyRele(this.id)" onmousedown="getkey(this.id)"></li>

  <li id="F3" class="white" onmouseout="keyRele(this.id)" onmouseup="keyRele(this.id)" onmousedown="getkey(this.id)"></li>
  <li id="F#3" class="black" onmouseout="keyRele(this.id)" onmouseup="keyRele(this.id)" onmousedown="getkey(this.id)"></li>

  <li id="G3" class="white sq" onmouseout="keyRele(this.id)" onmouseup="keyRele(this.id)" onmousedown="getkey(this.id)"></li>
  <li id="G#3" class="black" onmouseout="keyRele(this.id)" onmouseup="keyRele(this.id)" onmousedown="getkey(this.id)"></li>

  <li id="A3" class="white sq" onmouseout="keyRele(this.id)" onmouseup="keyRele(this.id)" onmousedown="getkey(this.id)"></li>
  <li id="A#3" class="black" onmouseout="keyRele(this.id)" onmouseup="keyRele(this.id)" onmousedown="getkey(this.id)"></li>

  <li id="B3" class="white sq" onmouseout="keyRele(this.id)" onmouseup="keyRele(this.id)" onmousedown="getkey(this.id)"></li>

  <li id="C4" class="white" onmouseout="keyRele(this.id)" onmouseup="keyRele(this.id)" onmousedown="getkey(this.id)">
    <div class="note">A</div>
  </li>
  <li id="C#4" class="black" onmouseout="keyRele(this.id)" onmouseup="keyRele(this.id)" onmousedown="getkey(this.id)"></li>

  <li id="D4" class="white sq" onmouseout="keyRele(this.id)" onmouseup="keyRele(this.id)" onmousedown="getkey(this.id)">
    <div class="note">S</div>
  </li>
  <li id="D#4" class="black" onmouseout="keyRele(this.id)" onmouseup="keyRele(this.id)" onmousedown="getkey(this.id)"></li>

  <li id="E4" class="white sq" onmouseout="keyRele(this.id)" onmouseup="keyRele(this.id)" onmousedown="getkey(this.id)">
    <div class="note">D</div>
  </li>

  <li id="F4" class="white" onmouseout="keyRele(this.id)" onmouseup="keyRele(this.id)" onmousedown="getkey(this.id)">
    <div class="note">F</div>
  </li>
  <li id="F#4" class="black" onmouseout="keyRele(this.id)" onmouseup="keyRele(this.id)" onmousedown="getkey(this.id)"></li>

  <li id="G4" class="white sq" onmouseout="keyRele(this.id)" onmouseup="keyRele(this.id)" onmousedown="getkey(this.id)">
    <div class="note">G</div>
  </li>
  <li id="G#4" class="black" onmouseout="keyRele(this.id)" onmouseup="keyRele(this.id)" onmousedown="getkey(this.id)"></li>

  <li id="A4" class="white sq" onmouseout="keyRele(this.id)" onmouseup="keyRele(this.id)" onmousedown="getkey(this.id)">
    <div class="note">H</div>
  </li>
  <li id="A#4" class="black" onmouseout="keyRele(this.id)" onmouseup="keyRele(this.id)" onmousedown="getkey(this.id)"></li>

  <li id="B4" class="white sq" onmouseout="keyRele(this.id)" onmouseup="keyRele(this.id)" onmousedown="getkey(this.id)">
    <div class="note">J</div>
  </li>

  <li id="C5" class="white" onmouseout="keyRele(this.id)" onmouseup="keyRele(this.id)" onmousedown="getkey(this.id)">
    <div class="note">K</div>
  </li>
  <li id="C#5" class="black" onmouseout="keyRele(this.id)" onmouseup="keyRele(this.id)" onmousedown="getkey(this.id)"></li>

  <li id="D5" class="white sq" onmouseout="keyRele(this.id)" onmouseup="keyRele(this.id)" onmousedown="getkey(this.id)">
    <div class="note">L</div>
  </li>
  <li id="D#5" class="black" onmouseout="keyRele(this.id)" onmouseup="keyRele(this.id)" onmousedown="getkey(this.id)"></li>

  <li id="E5" class="white sq" onmouseout="keyRele(this.id)" onmouseup="keyRele(this.id)" onmousedown="getkey(this.id)">
    <div class="note">;</div>
  </li>

  <li id="F5" class="white" onmouseout="keyRele(this.id)" onmouseup="keyRele(this.id)" onmousedown="getkey(this.id)"></li>
  <li id="F#5" class="black" onmouseout="keyRele(this.id)" onmouseup="keyRele(this.id)" onmousedown="getkey(this.id)"></li>

  <li id="G5" class="white sq" onmouseout="keyRele(this.id)" onmouseup="keyRele(this.id)" onmousedown="getkey(this.id)"></li>
  <li id="G#5" class="black" onmouseout="keyRele(this.id)" onmouseup="keyRele(this.id)" onmousedown="getkey(this.id)"></li>

  <li id="A5" class="white sq" onmouseout="keyRele(this.id)" onmouseup="keyRele(this.id)" onmousedown="getkey(this.id)"></li>
  <li id="A#5" class="black" onmouseout="keyRele(this.id)" onmouseup="keyRele(this.id)" onmousedown="getkey(this.id)"></li>

  <li id="B5" class="white sq" onmouseout="keyRele(this.id)" onmouseup="keyRele(this.id)" onmousedown="getkey(this.id)"></li>

  <li id="C6" class="white" onmouseout="keyRele(this.id)" onmouseup="keyRele(this.id)" onmousedown="getkey(this.id)"></li>
  <li id="C#6" class="black" onmouseout="keyRele(this.id)" onmouseup="keyRele(this.id)" onmousedown="getkey(this.id)"></li>

  <li id="D6" class="white sq" onmouseout="keyRele(this.id)" onmouseup="keyRele(this.id)" onmousedown="getkey(this.id)"></li>
  <li id="D#6" class="black" onmouseout="keyRele(this.id)" onmouseup="keyRele(this.id)" onmousedown="getkey(this.id)"></li>

  <li id="E6" class="white sq" onmouseout="keyRele(this.id)" onmouseup="keyRele(this.id)" onmousedown="getkey(this.id)"></li>

  <li id="F6" class="white" onmouseout="keyRele(this.id)" onmouseup="keyRele(this.id)" onmousedown="getkey(this.id)"></li>
  <li id="F#6" class="black" onmouseout="keyRele(this.id)" onmouseup="keyRele(this.id)" onmousedown="getkey(this.id)"></li>

  <li id="G6" class="white sq" onmouseout="keyRele(this.id)" onmouseup="keyRele(this.id)" onmousedown="getkey(this.id)"></li>
  <li id="G#6" class="black" onmouseout="keyRele(this.id)" onmouseup="keyRele(this.id)" onmousedown="getkey(this.id)"></li>

  <li id="A6" class="white sq" onmouseout="keyRele(this.id)" onmouseup="keyRele(this.id)" onmousedown="getkey(this.id)"></li>
  <li id="A#6" class="black" onmouseout="keyRele(this.id)" onmouseup="keyRele(this.id)" onmousedown="getkey(this.id)"></li>

  <li id="B6" class="white sq" onmouseout="keyRele(this.id)" onmouseup="keyRele(this.id)" onmousedown="getkey(this.id)"></li>

</ul>

<div class="author">@pro-nav</div>

keyboard-tone-js.markdown

keyboard-tone.js

A Pen by Pranav Dudhane on CodePen.

License.

script.js

const synth = new Tone.Synth({
  //FMSynth
  oscillator: {
    type: "sine", //pwm
    modulationFrequency: 0.9 //0.2
  },
  envelope: {
    attack: 0.01, // 0.02
    decay: 0.2, //0.2
    sustain: 0.2, //0.2
    release: 0.1 //0.9
  }
}).toMaster();
toggle();

let note;

function getkey(note) {
  synth.triggerAttack(note);
  document.getElementById(note).classList.replace("white", "white-dark");
  document.getElementById(note).classList.replace("black", "black-light");
}

function keyRele(note) {
  synth.triggerRelease();
  document.getElementById(note).classList.replace("white-dark", "white");
  document.getElementById(note).classList.replace("black-light", "black");
}

document.addEventListener("keydown", function (event) {
  console.log(event.which);
  switch (event.which) {
    case 65:
      getkey("C4"); //a
      break;
    case 87:
      getkey("C#4"); //w
      break;
    case 83:
      getkey("D4"); //s
      break;
    case 69:
      getkey("D#4"); //e
      break;
    case 68:
      getkey("E4"); //d
      break;
    case 70:
      getkey("F4"); //f
      break;
    case 84:
      getkey("F#4"); //t
      break;
    case 71:
      getkey("G4"); //g
      break;
    case 89:
      getkey("G#4"); //y
      break;
    case 72:
      getkey("A4"); //h
      break;
    case 85:
      getkey("A#4"); //u
      break;
    case 74:
      getkey("B4"); //j
      break;
    case 75:
      getkey("C5"); //k
      break;
    case 79:
      getkey("C#5"); //o
      break;
    case 76:
      getkey("D5"); //l
      break;
    case 80:
      getkey("D#5"); //p
      break;
    case 59:
      getkey("E5"); //;
      break;
  }
});

document.addEventListener("keyup", function (event) {
  console.log(event.which);
  switch (event.which) {
    case 65:
      keyRele("C4"); //a
      break;
    case 87:
      keyRele("C#4"); //w
      break;
    case 83:
      keyRele("D4"); //s
      break;
    case 69:
      keyRele("D#4"); //e
      break;
    case 68:
      keyRele("E4"); //d
      break;
    case 70:
      keyRele("F4"); //f
      break;
    case 84:
      keyRele("F#4"); //t
      break;
    case 71:
      keyRele("G4"); //g
      break;
    case 89:
      keyRele("G#4"); //y
      break;
    case 72:
      keyRele("A4"); //h
      break;
    case 85:
      keyRele("A#4"); //u
      break;
    case 74:
      keyRele("B4"); //j
      break;
    case 75:
      keyRele("C5"); //k
      break;
    case 79:
      keyRele("C#5"); //o
      break;
    case 76:
      keyRele("D5"); //l
      break;
    case 80:
      keyRele("D#5"); //p
      break;
    case 59:
      keyRele("E5"); //;
      break;
  }
});

function toggle() {
  var x = document.getElementById("checkbox").checked;
  var noteholder = document.querySelectorAll(".note");
  var i = 0,
    l = noteholder.length;
  if (!x) {
    for (i = 0; i < l; i++) {
      noteholder[i].style.display = "none";
    }
  } else {
    for (i = 0; i < l; i++) {
      noteholder[i].style.display = "block";
    }
  }
}

scripts

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

style.css

@font-face {
  font-family: Clip;
  src: url("Clip.ttf");
}

* {
  box-sizing: border-box;
  font-family: "Courier New", Courier, monospace;
  font-size: 30px;
}

body {
  margin: 0;
  background-color: #222;
}

li {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  float: left;
  cursor: pointer;
  user-select: none;
}

ul {
  height: 300px;
  width: 1300px;
  margin: 40vh auto 0 auto;
  padding: 40px;
  position: relative;
  /* border:1px solid #160801; */
  border-radius: 16px;
  background-color: palevioletred;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.5) inset,
    0 1px rgba(212, 152, 125, 0.2) inset, 0 5px 15px rgba(0, 0, 0, 0.5);
}

.white {
  height: 270px;
  width: 38px;
  z-index: 1;
  border-left: 1px solid #bbb;
  border-bottom: 1px solid #bbb;
  border-radius: 0 0 5px 5px;
  box-shadow: -1px 0 0 rgba(255, 255, 255, 0.8) inset, 0 0 5px #ccc inset,
    0 0 3px rgba(0, 0, 0, 0.2);
  background: linear-gradient(to bottom, #eee 0%, #fff 100%);
}

.white-dark {
  height: 270px;
  width: 38px;
  z-index: 1;
  border-radius: 0 0 5px 5px;
  border-top: 1px solid #777;
  border-left: 1px solid #999;
  border-bottom: 1px solid #999;
  box-shadow: 2px 0 3px rgba(0, 0, 0, 0.1) inset,
    -5px 5px 20px rgba(0, 0, 0, 0.2) inset, 0 0 3px rgba(0, 0, 0, 0.2);
  background: linear-gradient(to bottom, #fff 0%, #e9e9e9 100%);
}

.black {
  height: 150px;
  width: 28px;
  margin: 0 0 0 -14px;
  z-index: 2;
  border: 1px solid #000;
  border-radius: 0 0 3px 3px;
  box-shadow: -1px -1px 2px rgba(255, 255, 255, 0.2) inset,
    0 -5px 2px 3px rgba(0, 0, 0, 0.6) inset, 0 2px 4px rgba(0, 0, 0, 0.5);
  background: linear-gradient(45deg, #222 0%, #555 100%);
}

.black-light {
  height: 150px;
  width: 28px;
  margin: 0 0 0 -14px;
  z-index: 2;
  border: 1px solid #000;
  border-radius: 0 0 3px 3px;
  box-shadow: -1px -1px 2px rgba(255, 255, 255, 0.2) inset,
    0 -2px 2px 3px rgba(0, 0, 0, 0.6) inset, 0 1px 2px rgba(0, 0, 0, 0.5);
  background: linear-gradient(to right, #444 0%, #222 100%);
}

.sq {
  margin: 0 0 0 -14px;
}

ul li:first-child {
  border-radius: 5px 0 5px 5px;
}

ul li:last-child {
  border-radius: 0 5px 5px 5px;
}

li .note {
  position: relative;
  z-index: 3;
  width: 30px;
  height: 30px;
  top: 236px;
  left: 4px;
  color: white;
  font-family: "Clip";
  font-size: 25px;
  border-radius: 10px;
  opacity: 0.3;
  text-align: center;
  background: linear-gradient(
    to right,
    rgb(132, 204, 128) 0%,
    rgb(1, 174, 18) 100%
  );
}

.author {
  position: absolute;
  color: white;
  font-family: cursive;
  margin: 40px 0 0 90%;
}

.switchbox {
  position: absolute;
  top: 10vh;
  transform: scale(0.7);
}

input[type="checkbox"] {
  margin: 10px;
  position: relative;
  width: 120px;
  height: 40px;
  -webkit-appearance: none;
  background: linear-gradient(0deg, #333, #000);
  outline: none;
  border-radius: 20px;
  box-shadow: 0 0 0 4px #353535, 0 0 0 5px #3e3e3e,
    inset 0 0 10px rgba(0, 0, 0, 1);
}

input:checked[type="checkbox"] {
  background: linear-gradient(0deg, rgb(1, 174, 18), rgb(43, 232, 123));
  box-shadow: 0 0 0 4px #353535, 0 0 0 5px #3e3e3e,
    inset 0 0 10px rgba(0, 0, 0, 1);
}

input[type="checkbox"]:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 40px;
  background: linear-gradient(0deg, #000, #6b6b6b);
  border-radius: 20px;
  box-shadow: 0 0 0 1px #232323;
  transform: scale(0.98, 0.96);
  transition: 0.3s;
}

input:checked[type="checkbox"]:before {
  left: 40px;
}

input[type="checkbox"]:after {
  content: "";
  position: absolute;
  top: calc(50% - 2px);
  left: 70px;
  width: 4px;
  height: 4px;
  background: linear-gradient(0deg, #6b6b6b, #000);
  border-radius: 50%;
  transition: 0.5s;
}

input:checked[type="checkbox"]:after {
  left: 110px;
}