Skip to content

Instantly share code, notes, and snippets.

@rsxdalv
Created August 16, 2020 07:49
Show Gist options
  • Save rsxdalv/5b5f1f2ac7e54af2f98958abba90ce8b to your computer and use it in GitHub Desktop.
Save rsxdalv/5b5f1f2ac7e54af2f98958abba90ce8b to your computer and use it in GitHub Desktop.
keyboard-tone.js
<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>
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";
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/tone/14.6.0/Tone.js"></script>
@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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment