<script>
$(document).ready(function() {
$("body").on("contextmenu", function(e) {
return false;
});
});
</script>
<?xml version="1.0" encoding="UTF-8"?>
<svg width="100%" height="100%" viewBox="0 0 1501 1750" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title></title>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Modes-naturals">
<rect id="Background" fill="#000000" x="0.5" y="0" width="1500" height="1750" rx="15"></rect>
<g id="Keys" transform="translate(97.500000, 350.000000)" stroke="#000000" stroke-width="10">
<rect id="Rectangle" fill="#F9C74F" x="1211" y="5" width="90" height="90" rx="21"></rect>
<rect id="Rectangle" fill="#F8961E" x="1110.5" y="5" width="90" height="90" rx="21"></rect>
<rect id="Rectangle" fill="#F3722C" x="909.5" y="5" width="90" height="90" rx="21"></rect>
<rect id="Rectangle" fill="#F94144" x="708.5" y="5" width="90" height="90" rx="21"></rect>
<rect id="Rectangle" fill="#4D908E" x="608" y="5" width="90" height="90" rx="21"></rect>
<rect id="Rectangle" fill="#43AA8B" x="407" y="5" width="90" height="90" rx="21"></rect>
<rect id="Rectangle" fill="#90BE6D" x="206" y="5" width="90" height="90" rx="21"></rect>
<rect id="Rectangle" fill="#F9C74F" x="5" y="5" width="90" height="90" rx="21"></rect>
<rect id="Rectangle" fill="#F9C74F" x="1211" y="205" width="90" height="90" rx="21"></rect>
<rect id="Rectangle" fill="#F8961E" x="1110.5" y="205" width="90" height="90" rx="21"></rect>
<rect id="Rectangle" fill="#F3722C" x="909.5" y="205" width="90" height="90" rx="21"></rect>
<rect id="Rectangle" fill="#F94144" x="708.5" y="205" width="90" height="90" rx="21"></rect>
<rect id="Rectangle" fill="#4D908E" x="507.5" y="205" width="90" height="90" rx="21"></rect>
<rect id="Rectangle" fill="#43AA8B" x="407" y="205" width="90" height="90" rx="21"></rect>
<rect id="Rectangle" fill="#90BE6D" x="206" y="205" width="90" height="90" rx="21"></rect>
<rect id="Rectangle" fill="#F9C74F" x="5" y="205" width="90" height="90" rx="21"></rect>
<rect id="Rectangle" fill="#F9C74F" x="1211" y="405" width="90" height="90" rx="21"></rect>
<rect id="Rectangle" fill="#F8961E" x="1010" y="405" width="90" height="90" rx="21"></rect>
<rect id="Rectangle" fill="#F3722C" x="909.5" y="405" width="90" height="90" rx="21"></rect>
<rect id="Rectangle" fill="#F94144" x="708.5" y="405" width="90" height="90" rx="21"></rect>
<rect id="Rectangle" fill="#4D908E" x="507.5" y="405" width="90" height="90" rx="21"></rect>
<rect id="Rectangle" fill="#43AA8B" x="407" y="405" width="90" height="90" rx="21"></rect>
<rect id="Rectangle" fill="#90BE6D" x="206" y="405" width="90" height="90" rx="21"></rect>
<rect id="Rectangle" fill="#F9C74F" x="5" y="405" width="90" height="90" rx="21"></rect>
<rect id="Rectangle" fill="#F9C74F" x="1211" y="605" width="90" height="90" rx="21"></rect>
<rect id="Rectangle" fill="#F8961E" x="1010" y="605" width="90" height="90" rx="21"></rect>
<rect id="Rectangle" fill="#F3722C" x="909.5" y="605" width="90" height="90" rx="21"></rect>
<rect id="Rectangle" fill="#F94144" x="708.5" y="605" width="90" height="90" rx="21"></rect>
<rect id="Rectangle" fill="#4D908E" x="507.5" y="605" width="90" height="90" rx="21"></rect>
<rect id="Rectangle" fill="#43AA8B" x="306.5" y="605" width="90" height="90" rx="21"></rect>
<rect id="Rectangle" fill="#90BE6D" x="206" y="605" width="90" height="90" rx="21"></rect>
<rect id="Rectangle" fill="#F9C74F" x="5" y="605" width="90" height="90" rx="21"></rect>
<rect id="Rectangle" fill="#F9C74F" x="1211" y="805" width="90" height="90" rx="21"></rect>
<rect id="Rectangle" fill="#F8961E" x="1010" y="805" width="90" height="90" rx="21"></rect>
<rect id="Rectangle" fill="#F3722C" x="809" y="805" width="90" height="90" rx="21"></rect>
<rect id="Rectangle" fill="#F94144" x="708.5" y="805" width="90" height="90" rx="21"></rect>
<rect id="Rectangle" fill="#4D908E" x="507.5" y="805" width="90" height="90" rx="21"></rect>
<rect id="Rectangle" fill="#43AA8B" x="306.5" y="805" width="90" height="90" rx="21"></rect>
<rect id="Rectangle" fill="#90BE6D" x="206" y="805" width="90" height="90" rx="21"></rect>
<rect id="Rectangle" fill="#F9C74F" x="5" y="805" width="90" height="90" rx="21"></rect>
<rect id="Rectangle" fill="#F9C74F" x="1211" y="1005" width="90" height="90" rx="21"></rect>
<rect id="Rectangle" fill="#F8961E" x="1010" y="1005" width="90" height="90" rx="21"></rect>
<rect id="Rectangle" fill="#F3722C" x="809" y="1005" width="90" height="90" rx="21"></rect>
<rect id="Rectangle" fill="#F94144" x="708.5" y="1005" width="90" height="90" rx="21"></rect>
<rect id="Rectangle" fill="#4D908E" x="507.5" y="1005" width="90" height="90" rx="21"></rect>
<rect id="Rectangle" fill="#43AA8B" x="306.5" y="1005" width="90" height="90" rx="21"></rect>
<rect id="Rectangle" fill="#90BE6D" x="105.5" y="1005" width="90" height="90" rx="21"></rect>
<rect id="Rectangle" fill="#F9C74F" x="5" y="1005" width="90" height="90" rx="21"></rect>
<rect id="Rectangle" fill="#F9C74F" x="1211" y="1205" width="90" height="90" rx="21"></rect>
<rect id="Rectangle" fill="#F8961E" x="1010" y="1205" width="90" height="90" rx="21"></rect>
<rect id="Rectangle" fill="#F3722C" x="809" y="1205" width="90" height="90" rx="21"></rect>
<rect id="Rectangle" fill="#F94144" x="608" y="1205" width="90" height="90" rx="21"></rect>
<rect id="Rectangle" fill="#4D908E" x="507.5" y="1205" width="90" height="90" rx="21"></rect>
<rect id="Rectangle" fill="#43AA8B" x="306.5" y="1205" width="90" height="90" rx="21"></rect>
<rect id="Rectangle" fill="#90BE6D" x="105.5" y="1205" width="90" height="90" rx="21"></rect>
<rect id="Rectangle" fill="#F9C74F" x="5" y="1205" width="90" height="90" rx="21"></rect>
</g>
<g id="Notes" transform="translate(97.000000, 370.000000)" fill="#FFFFFF" font-family="AvenirNext-Regular, Avenir Next" font-size="50" font-weight="normal">
<g id="Locrian" transform="translate(0.000000, 1200.000000)">
<text id="B">
<tspan x="1240.1" y="50">B</tspan>
</text>
<text id="A">
<tspan x="1037.5" y="50">A</tspan>
</text>
<text id="G">
<tspan x="834.525" y="50">G</tspan>
</text>
<text id="F">
<tspan x="638.95" y="50">F</tspan>
</text>
<text id="E">
<tspan x="537.7" y="50">E</tspan>
</text>
<text id="D">
<tspan x="332.575" y="50">D</tspan>
</text>
<text id="C">
<tspan x="132.5" y="50">C</tspan>
</text>
<text id="B">
<tspan x="34.1" y="50">B</tspan>
</text>
</g>
<g id="Phrygian" transform="translate(0.000000, 1000.000000)">
<text id="E">
<tspan x="1241.2" y="50">E</tspan>
</text>
<text id="D">
<tspan x="1036.075" y="50">D</tspan>
</text>
<text id="C">
<tspan x="836" y="50">C</tspan>
</text>
<text id="B">
<tspan x="737.6" y="50">B</tspan>
</text>
<text id="A">
<tspan x="535" y="50">A</tspan>
</text>
<text id="G">
<tspan x="332.025" y="50">G</tspan>
</text>
<text id="F">
<tspan x="136.45" y="50">F</tspan>
</text>
<text id="E">
<tspan x="35.2" y="50">E</tspan>
</text>
</g>
<g id="Aeolian" transform="translate(0.000000, 800.000000)">
<text id="A">
<tspan x="1238.5" y="50">A</tspan>
</text>
<text id="G">
<tspan x="1035.525" y="50">G</tspan>
</text>
<text id="F">
<tspan x="839.95" y="50">F</tspan>
</text>
<text id="E">
<tspan x="738.7" y="50">E</tspan>
</text>
<text id="D">
<tspan x="533.575" y="50">D</tspan>
</text>
<text id="C">
<tspan x="333.5" y="50">C</tspan>
</text>
<text id="B">
<tspan x="235.1" y="50">B</tspan>
</text>
<text id="A">
<tspan x="32.5" y="50">A</tspan>
</text>
</g>
<g id="Dorian" transform="translate(0.000000, 600.000000)">
<text id="D">
<tspan x="1237.075" y="50">D</tspan>
</text>
<text id="C">
<tspan x="1037" y="50">C</tspan>
</text>
<text id="B">
<tspan x="938.6" y="50">B</tspan>
</text>
<text id="A">
<tspan x="736" y="50">A</tspan>
</text>
<text id="G">
<tspan x="533.025" y="50">G</tspan>
</text>
<text id="F">
<tspan x="337.45" y="50">F</tspan>
</text>
<text id="E">
<tspan x="236.2" y="50">E</tspan>
</text>
<text id="D">
<tspan x="31.075" y="50">D</tspan>
</text>
</g>
<g id="Mixolydian" transform="translate(0.000000, 400.000000)">
<text id="G">
<tspan x="1236.525" y="50">G</tspan>
</text>
<text id="F">
<tspan x="1040.95" y="50">F</tspan>
</text>
<text id="E">
<tspan x="939.7" y="50">E</tspan>
</text>
<text id="D">
<tspan x="734.575" y="50">D</tspan>
</text>
<text id="C">
<tspan x="534.5" y="50">C</tspan>
</text>
<text id="B">
<tspan x="436.1" y="50">B</tspan>
</text>
<text id="A">
<tspan x="233.5" y="50">A</tspan>
</text>
<text id="G">
<tspan x="30.525" y="50">G</tspan>
</text>
</g>
<g id="Ionian" transform="translate(0.000000, 200.000000)">
<text id="C">
<tspan x="1238" y="50">C</tspan>
</text>
<text id="B">
<tspan x="1139.6" y="50">B</tspan>
</text>
<text id="A">
<tspan x="937" y="50">A</tspan>
</text>
<text id="G">
<tspan x="734.025" y="50">G</tspan>
</text>
<text id="F">
<tspan x="538.45" y="50">F</tspan>
</text>
<text id="E">
<tspan x="437.2" y="50">E</tspan>
</text>
<text id="D">
<tspan x="232.075" y="50">D</tspan>
</text>
<text id="C">
<tspan x="32" y="50">C</tspan>
</text>
</g>
<g id="Lydian">
<text id="F">
<tspan x="1241.95" y="50">F</tspan>
</text>
<text id="E">
<tspan x="1140.7" y="50">E</tspan>
</text>
<text id="D">
<tspan x="935.575" y="50">D</tspan>
</text>
<text id="C">
<tspan x="735.5" y="50">C</tspan>
</text>
<text id="B">
<tspan x="637.1" y="50">B</tspan>
</text>
<text id="A">
<tspan x="434.5" y="50">A</tspan>
</text>
<text id="G">
<tspan x="231.525" y="50">G</tspan>
</text>
<text id="F">
<tspan x="35.95" y="50">F</tspan>
</text>
</g>
</g>
<g id="Lines" transform="translate(96.000000, 345.000000)" stroke="#FFFFFF" stroke-width="3">
<rect id="Rectangle" x="1.5" y="201.5" width="1307" height="107" rx="15"></rect>
<rect id="Rectangle-Copy" x="1.5" y="1.5" width="1307" height="107" rx="15"></rect>
<rect id="Rectangle-Copy-2" x="1.5" y="401.5" width="1307" height="107" rx="15"></rect>
<rect id="Rectangle-Copy-3" x="1.5" y="601.5" width="1307" height="107" rx="15"></rect>
<rect id="Rectangle-Copy-4" x="1.5" y="801.5" width="1307" height="107" rx="15"></rect>
<rect id="Rectangle-Copy-5" x="1.5" y="1001.5" width="1307" height="107" rx="15"></rect>
<rect id="Rectangle-Copy-6" x="1.5" y="1201.5" width="1307" height="107" rx="15"></rect>
</g>
<g id="Text" fill="#FFFFFF">
<text id="Locrian" font-family="AvenirNext-Regular, Avenir Next" font-size="50" font-weight="normal">
<tspan x="666.8" y="1530">Locrian</tspan>
</text>
<text id="Phrygian" font-family="AvenirNext-Regular, Avenir Next" font-size="50" font-weight="normal">
<tspan x="649.8" y="1330">Phrygian</tspan>
</text>
<text id="Aeolian" font-family="AvenirNext-Regular, Avenir Next" font-size="50" font-weight="normal">
<tspan x="662.5" y="1130">Aeolian</tspan>
</text>
<text id="Dorian" font-family="AvenirNext-Regular, Avenir Next" font-size="50" font-weight="normal">
<tspan x="672.675" y="930">Dorian</tspan>
</text>
<text id="Mixolydian" font-family="AvenirNext-Regular, Avenir Next" font-size="50" font-weight="normal">
<tspan x="625.825" y="730">Mixolydian</tspan>
</text>
<text id="Ionian" font-family="AvenirNext-Regular, Avenir Next" font-size="50" font-weight="normal">
<tspan x="679.575" y="530">Ionian</tspan>
</text>
<text id="Lydian" font-family="AvenirNext-Regular, Avenir Next" font-size="50" font-weight="normal">
<tspan x="675.9" y="330">Lydian</tspan>
</text>
<text id="Diatonic-Modes-(natu" font-family="AvenirNext-Medium, Avenir Next" font-size="100" font-weight="400" line-spacing="135">
<tspan x="180" y="170">Diatonic Modes (natural)</tspan>
</text>
</g>
<g id="Key-triggers" transform="translate(97.500000, 350.000000)" fill="#000000" fill-opacity="0">
<rect class=key id="77.000000" x="1206" y="0" width="100" height="100" rx="21"></rect>
<rect class=key id="76.000000" x="1105.5" y="0" width="100" height="100" rx="21"></rect>
<rect class=key id="74.000000" x="904.5" y="0" width="100" height="100" rx="21"></rect>
<rect class=key id="72.000000" x="703.5" y="0" width="100" height="100" rx="21"></rect>
<rect class=key id="71.000000" x="603" y="0" width="100" height="100" rx="21"></rect>
<rect class=key id="69.000000" x="402" y="0" width="100" height="100" rx="21"></rect>
<rect class=key id="67.000000" x="201" y="0" width="100" height="100" rx="21"></rect>
<rect class=key id="65.000000" x="0" y="0" width="100" height="100" rx="21"></rect>
<rect class=key id="72.00000" x="1206" y="200" width="100" height="100" rx="21"></rect>
<rect class=key id="71.00000" x="1105.5" y="200" width="100" height="100" rx="21"></rect>
<rect class=key id="69.00000" x="904.5" y="200" width="100" height="100" rx="21"></rect>
<rect class=key id="67.00000" x="703.5" y="200" width="100" height="100" rx="21"></rect>
<rect class=key id="65.00000" x="502.5" y="200" width="100" height="100" rx="21"></rect>
<rect class=key id="64.00000" x="402" y="200" width="100" height="100" rx="21"></rect>
<rect class=key id="62.00000" x="201" y="200" width="100" height="100" rx="21"></rect>
<rect class=key id="60.00000" x="0" y="200" width="100" height="100" rx="21"></rect>
<rect class=key id="79.0000" x="1206" y="400" width="100" height="100" rx="21"></rect>
<rect class=key id="77.0000" x="1005" y="400" width="100" height="100" rx="21"></rect>
<rect class=key id="76.0000" x="904.5" y="400" width="100" height="100" rx="21"></rect>
<rect class=key id="74.0000" x="703.5" y="400" width="100" height="100" rx="21"></rect>
<rect class=key id="72.0000" x="502.5" y="400" width="100" height="100" rx="21"></rect>
<rect class=key id="71.0000" x="402" y="400" width="100" height="100" rx="21"></rect>
<rect class=key id="69.0000" x="201" y="400" width="100" height="100" rx="21"></rect>
<rect class=key id="67.0000" x="0" y="400" width="100" height="100" rx="21"></rect>
<rect class=key id="74.000" x="1206" y="600" width="100" height="100" rx="21"></rect>
<rect class=key id="72.000" x="1005" y="600" width="100" height="100" rx="21"></rect>
<rect class=key id="71.000" x="904.5" y="600" width="100" height="100" rx="21"></rect>
<rect class=key id="69.000" x="703.5" y="600" width="100" height="100" rx="21"></rect>
<rect class=key id="67.000" x="502.5" y="600" width="100" height="100" rx="21"></rect>
<rect class=key id="65.000" x="301.5" y="600" width="100" height="100" rx="21"></rect>
<rect class=key id="64.000" x="201" y="600" width="100" height="100" rx="21"></rect>
<rect class=key id="62.000" x="0" y="600" width="100" height="100" rx="21"></rect>
<rect class=key id="69.00" x="1206" y="800" width="100" height="100" rx="21"></rect>
<rect class=key id="67.00" x="1005" y="800" width="100" height="100" rx="21"></rect>
<rect class=key id="65.00" x="804" y="800" width="100" height="100" rx="21"></rect>
<rect class=key id="64.00" x="703.5" y="800" width="100" height="100" rx="21"></rect>
<rect class=key id="62.00" x="502.5" y="800" width="100" height="100" rx="21"></rect>
<rect class=key id="60.00" x="301.5" y="800" width="100" height="100" rx="21"></rect>
<rect class=key id="59.00" x="201" y="800" width="100" height="100" rx="21"></rect>
<rect class=key id="57.00" x="0" y="800" width="100" height="100" rx="21"></rect>
<rect class=key id="76.0" x="1206" y="1000" width="100" height="100" rx="21"></rect>
<rect class=key id="74.0" x="1005" y="1000" width="100" height="100" rx="21"></rect>
<rect class=key id="72.0" x="804" y="1000" width="100" height="100" rx="21"></rect>
<rect class=key id="71.0" x="703.5" y="1000" width="100" height="100" rx="21"></rect>
<rect class=key id="69.0" x="502.5" y="1000" width="100" height="100" rx="21"></rect>
<rect class=key id="67.0" x="301.5" y="1000" width="100" height="100" rx="21"></rect>
<rect class=key id="65.0" x="100.5" y="1000" width="100" height="100" rx="21"></rect>
<rect class=key id="64.0" x="0" y="1000" width="100" height="100" rx="21"></rect>
<rect class=key id="71" x="1206" y="1200" width="100" height="100" rx="21"></rect>
<rect class=key id="69" x="1005" y="1200" width="100" height="100" rx="21"></rect>
<rect class=key id="67" x="804" y="1200" width="100" height="100" rx="21"></rect>
<rect class=key id="65" x="603" y="1200" width="100" height="100" rx="21"></rect>
<rect class=key id="64" x="502.5" y="1200" width="100" height="100" rx="21"></rect>
<rect class=key id="62" opacity="0.620000005" x="301.5" y="1200" width="100" height="100" rx="21"></rect>
<rect class=key id="60" opacity="0.599999964" x="100.5" y="1200" width="100" height="100" rx="21"></rect>
<rect class=key id="59" x="0" y="1200" width="100" height="100" rx="21"></rect>
</g>
</g>
</g>
</svg>body {
background-color: #000000;
font-family: Avenir next;
font-size: 100%;
user-select: none;
touch-action: none;
}
svg{
display:block;
position: absolute;
z-index:0;
height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
touch-action: none;
background-color: #000000;
}
/* Portrait orientation */
/*
@media screen and (orientation: portrait) {
button{
display: block;
position: absolute;
background-color:#000000;
font-family: avenir next;
border-radius: 2px;
border-width: 2px;
border-style: solid;
user-select: none;
height: 7%;
width: 17%;
right: 2%;
z-index: 3;
font-size: 2vw
}
}
*/
/* Landscape orientation */
/*@media screen and (orientation: landscape) {*/
button{
display: block;
position: absolute;
background-color:#000000;
font-family: avenir next;
border-radius: 4px;
border-width: 2px;
border-style: solid;
user-select: none;
height: 10%;
width: 15%;
right: 2%;
z-index: 3;
font-size: 2.5vw
}
/*}*/
.ActiveButton {
color: #000000;
background-color: #577590;
border-color: #577590;
}
.OtherButton {
color: #577590;
background-color: #000000;
border-color: #577590;
}
#PureButton {
top: 35%;
left: 10%
}
#ReducedButton{
top: 55%;
left: 10%
}
#SelectorText{
display: none;
position: absolute;
left: 5%;
top: 8%;
color: #ffffff;
z-index: 5
}// General
console.clear();
var elem = document.documentElement;
const baseFreq = 293.66
var root = baseFreq
var transpose=0
var voice = 0
var maxVoices = 4
var KeyArray = []
let index
//*** initialize tone.js synth ***
// core synthesizer
const voice1 = new Tone.Synth({oscillator: {type:"triangle"},
envelope: { attack : 0.05, decay : 3.50, sustain : 0, release : 3.5},
volume: -6});
const voice2 = new Tone.Synth({oscillator: {type:"triangle"},
envelope: { attack : 0.05, decay : 3.50, sustain : 0, release : 3.5},
volume: -6});
const voice3 = new Tone.Synth({oscillator: {type:"triangle"},
envelope: { attack : 0.05, decay : 3.50, sustain : 0, release : 3.5},
volume: -6});
const voice4 = new Tone.Synth({oscillator: {type:"triangle"},
envelope: { attack : 0.05, decay : 3.50, sustain : 0, release : 3.5},
volume: -6});
const synth = [voice1, voice2, voice3, voice4]
const reverb = new Tone.Reverb({wet:0.5}).toDestination();
Tone.connect(voice1, reverb);
Tone.connect(voice2, reverb);
Tone.connect(voice3, reverb);
Tone.connect(voice4, reverb);
// Interaction mode
let isTouchDevice
var interaction = 'click'
if ((navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0)){isTouchDevice = true}
else {isTouchDevice = false}
if (isTouchDevice) {interaction = 'touchstart'}
var NoteArray = ["A3","A#3","B3","C4","C#4","D4","D#4","E4","F4","F#4","G4","G#4","A4","A#4","B4","C5","C#5","D5","D#5","E5","F5","F#5","G5"]
// Make array of key elements by id
for(var i=0, n=document.getElementsByClassName("key"); i<n.length; i++) {
KeyArray.push(n[i].id);
};
// Trigger notes
//Tone.Transport.start()
function triggerNoteOnOff() {
var index = math.eval(this.id)-57
synth[voice].triggerAttackRelease(NoteArray[index], "32n");
if (voice >= (maxVoices-1)){voice = 0}
else {voice ++}
this.style.fillOpacity=0.5
const key = this.id;
function resetOpacity(key){
document.getElementById(key).style.fillOpacity=0}
setTimeout(function(){resetOpacity(key)}, 200)
}
for (const KeyValue of KeyArray) {
document.getElementById(KeyValue).addEventListener(interaction, triggerNoteOnOff)
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.