<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 16573 9553" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>11 Keyboards chromatic</title>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <rect id="Rectangle" fill="#000000" x="0" y="0" width="16573" height="9553"></rect>
        <g id="JI" transform="translate(3044.106781, 5496.106781)">
            <g id="Background" fill="#F3722C" stroke="#F3722C" stroke-linejoin="round" stroke-width="75">
                <rect id="01/1" x="-37.5" y="1432.5" width="1075" height="1075" rx="50"></rect>
                <rect id="09/8" x="1462.5" y="1432.5" width="1075" height="1075" rx="50"></rect>
                <rect id="05/4" x="2962.5" y="1432.5" width="1075" height="1075" rx="50"></rect>
                <rect id="04/3" x="4462.5" y="1432.5" width="1075" height="1075" rx="50"></rect>
                <rect id="03/2" x="5962.5" y="1432.5" width="1075" height="1075" rx="50"></rect>
                <rect id="05/3" x="7462.5" y="1432.5" width="1075" height="1075" rx="50"></rect>
                <rect id="015/8" x="8962.5" y="1432.5" width="1075" height="1075" rx="50"></rect>
                <rect id="02/1" x="10462.5" y="1432.5" width="1075" height="1075" rx="50"></rect>
                <rect id="016/15" x="730.5" y="-21.5" width="1075" height="1075" rx="50"></rect>
                <rect id="06/5" x="2230.5" y="-21.5" width="1075" height="1075" rx="50"></rect>
                <rect id="045/32" x="5229.5" y="-37.5" width="1075" height="1075" rx="50"></rect>
                <rect id="08/5" x="6730.5" y="-37.5" width="1075" height="1075" rx="50"></rect>
                <rect id="016/9" x="8230.5" y="-37.5" width="1075" height="1075" rx="50"></rect>
            </g>
            <g id="Text" transform="translate(50, 280)" fill="#FFFFFF" font-family="AvenirNext-Regular, Avenir Next" font-size="350" font-weight="normal">
                <text id="16/15-text">
                    <tspan x="748.25" y="350">16/15</tspan>
                </text>
                <text id="6/5-text">
                    <tspan x="2470.25" y="350">6/5</tspan>
                </text>
                <text id="45/32-text">
                    <tspan x="5268.25" y="350">45/32</tspan>
                </text>
                <text id="8/5-text">
                    <tspan x="6970.25" y="350">8/5</tspan>
                </text>
                <text id="16/9-text">
                    <tspan x="8368.25" y="350">16/9</tspan>
                </text>
                <text id="2/1-text">
                    <tspan x="10702.25" y="1820">2/1</tspan>
                </text>
                <text id="15/8-text">
                    <tspan x="9101.25" y="1820">15/8</tspan>
                </text>
                <text id="5/3-text">
                    <tspan x="7702.25" y="1820">5/3</tspan>
                </text>
                <text id="3/2-text">
                    <tspan x="6202.25" y="1820">3/2</tspan>
                </text>
                <text id="4/3-text">
                    <tspan x="4702.25" y="1820">4/3</tspan>
                </text>
                <text id="5/4-text">
                    <tspan x="3202.25" y="1820">5/4</tspan>
                </text>
                <text id="9/8-text">
                    <tspan x="1702.25" y="1820">9/8</tspan>
                </text>
                <text id="1/1-text">
                    <tspan x="202.25" y="1820">1/1</tspan>
                </text>
            </g>
            <g id="Keys" fill="#000000" fill-opacity="0">
<rect class=key id="1/1" x="-75" y="1395" width="1150" height="1150"></rect>
<rect class=key id="9/8" x="1425" y="1395" width="1150" height="1150"></rect>
<rect class=key id="5/4" x="2925" y="1395" width="1150" height="1150"></rect>
<rect class=key id="4/3" x="4425" y="1395" width="1150" height="1150"></rect>
<rect class=key id="3/2" x="5925" y="1395" width="1150" height="1150"></rect>
<rect class=key id="5/3" x="7425" y="1395" width="1150" height="1150"></rect>
<rect class=key id="15/8" x="8925" y="1395" width="1150" height="1150"></rect>
<rect class=key id="2/1" x="10425" y="1395" width="1150" height="1150"></rect>
<rect class=key id="16/15" x="693" y="-59" width="1150" height="1150"></rect>
<rect class=key id="6/5" x="2193" y="-59" width="1150" height="1150"></rect>
<rect class=key id="45/32" x="5193" y="-75" width="1150" height="1150"></rect>
<rect class=key id="8/5" x="6693" y="-75" width="1150" height="1150"></rect>
<rect class=key id="16/9" x="8193" y="-75" width="1150" height="1150"></rect>
            </g>
        </g>
        <g id="ET" transform="translate(2534.000000, 1598.106781)">
            <g id="Background" transform="translate(2.106781, 0.000000)" fill="#90BE6D" stroke="#90BE6D" stroke-linejoin="round" stroke-width="75">
                <rect id="01.000000000" x="-37.5" y="1432.5" width="1075" height="1075"></rect>
                <rect id="01.05946309436" x="724.5" y="-21.5" width="1075" height="1075"></rect>
                <rect id="01.12246204831" x="1462.5" y="1432.5" width="1075" height="1075"></rect>
                <rect id="01.189207115" x="2224.5" y="-21.5" width="1075" height="1075"></rect>
                <rect id="01.25992104989" x="2962.5" y="1432.5" width="1075" height="1075"></rect>
                <rect id="01.33483985417-" x="4462.5" y="1432.5" width="1075" height="1075"></rect>
                <rect id="01.41421356237" x="5224.5" y="-37.5" width="1075" height="1075"></rect>
                <rect id="01.49830707688-" x="5962.5" y="1432.5" width="1075" height="1075"></rect>
                <rect id="01.58740105197" x="6724.5" y="-37.5" width="1075" height="1075"></rect>
                <rect id="01.68179283051-" x="7462.5" y="1432.5" width="1075" height="1075"></rect>
                <rect id="01.78179743628" x="8224.5" y="-37.5" width="1075" height="1075"></rect>
                <rect id="01.88774862536" x="8962.5" y="1432.5" width="1075" height="1075"></rect>
                <rect id="02.000000000" x="10462.5" y="1432.5" width="1075" height="1075"></rect>
            </g>
            <g id="Text" transform="translate(0.000000, 13.893219)" fill="#FFFFFF" font-family="AvenirNext-Regular, Avenir Next" font-size="350" font-weight="normal">
                <text id="Db">
                    <tspan x="941.181152" y="366">C</tspan>
                    <tspan x="1223.18115" y="366" font-family="ArialUnicodeMS, Arial Unicode MS">♯</tspan>
                    <tspan x="1376.81885" y="366"></tspan>
                    <tspan x="1125.225" y="868">   D</tspan>
                    <tspan x="1412.675" y="868" font-family="AppleSDGothicNeo-Thin, Apple SD Gothic Neo" font-weight="300">♭</tspan>
                </text>
                <text id="Eb">
                    <tspan x="2463.70615" y="366">D</tspan>
                    <tspan x="2758.65615" y="366" font-family="ArialUnicodeMS, Arial Unicode MS">♯</tspan>
                    <tspan x="2912.29385" y="366"></tspan>
                    <tspan x="2683.1" y="868">   E</tspan>
                    <tspan x="2912.8" y="868" font-family="AppleSDGothicNeo-Thin, Apple SD Gothic Neo" font-weight="300">♭</tspan>
                </text>
                <text id="F#">
                    <tspan x="5464.83115" y="350">F</tspan>
                    <tspan x="5691.53115" y="350" font-family="ArialUnicodeMS, Arial Unicode MS">♯</tspan>
                    <tspan x="5845.16885" y="350"></tspan>
                    <tspan x="5617.375" y="852">   G</tspan>
                    <tspan x="5912.525" y="852" font-family="AppleSDGothicNeo-Thin, Apple SD Gothic Neo" font-weight="300">♭</tspan>
                </text>
                <text id="Ab">
                    <tspan x="6943.85615" y="350">G</tspan>
                    <tspan x="7246.50615" y="350" font-family="ArialUnicodeMS, Arial Unicode MS">♯</tspan>
                    <tspan x="7400.14385" y="350"></tspan>
                    <tspan x="7151.35" y="852">   A</tspan>
                    <tspan x="7412.55" y="852" font-family="AppleSDGothicNeo-Thin, Apple SD Gothic Neo" font-weight="300">♭</tspan>
                </text>
                <text id="Bb">
                    <tspan x="8465.68115" y="350">A</tspan>
                    <tspan x="8740.68115" y="350" font-family="ArialUnicodeMS, Arial Unicode MS">♯</tspan>
                    <tspan x="8894.31885" y="350"></tspan>
                    <tspan x="8667.4" y="852">   B</tspan>
                    <tspan x="8912.5" y="852" font-family="AppleSDGothicNeo-Thin, Apple SD Gothic Neo" font-weight="300">♭</tspan>
                </text>
                <text id="C">
                    <tspan x="10874" y="2052">C</tspan>
                </text>
                <text id="B">
                    <tspan x="9403.2" y="2052">B</tspan>
                </text>
                <text id="A">
                    <tspan x="7881" y="2052">A</tspan>
                </text>
                <text id="G">
                    <tspan x="6353.175" y="2052">G</tspan>
                </text>
                <text id="F">
                    <tspan x="4929.15" y="2052">F</tspan>
                </text>
                <text id="E">
                    <tspan x="3418.4" y="2052">E</tspan>
                </text>
                <text id="D">
                    <tspan x="1861.025" y="2052">D</tspan>
                </text>
                <text id="C">
                    <tspan x="374" y="2052">C</tspan>
                </text>
            </g>
            <g id="Keys" transform="translate(2.106781, 0.000000)" fill="#000000" fill-opacity="0">
<rect class=key id="1.000000000" x="-75" y="1395" width="1150" height="1150"></rect>
<rect class=key id="1.05946309436" x="687" y="-59" width="1150" height="1150"></rect>
<rect class=key id="1.12246204831" x="1425" y="1395" width="1150" height="1150"></rect>
<rect class=key id="1.189207115" x="2187" y="-59" width="1150" height="1150"></rect>
<rect class=key id="1.25992104989" x="2925" y="1395" width="1150" height="1150"></rect>
<rect class=key id="1.33483985417" x="4425" y="1395" width="1150" height="1150"></rect>
<rect class=key id="1.41421356237" x="5187" y="-75" width="1150" height="1150"></rect>
<rect class=key id="1.49830707688" x="5925" y="1395" width="1150" height="1150"></rect>
<rect class=key id="1.58740105197" x="6687" y="-75" width="1150" height="1150"></rect>
<rect class=key id="1.68179283051" x="7425" y="1395" width="1150" height="1150"></rect>
<rect class=key id="1.78179743628" x="8187" y="-75" width="1150" height="1150"></rect>
<rect class=key id="1.88774862536" x="8925" y="1395" width="1150" height="1150"></rect>
<rect class=key id="2.000000000" x="10425" y="1395" width="1150" height="1150"></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 = 261.63
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'}



// 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)
 
synth[voice].triggerAttackRelease(root*index, "32n");
  
if (voice >= (maxVoices-1)){voice = 0}
else {voice ++}
 
  this.style.fillOpacity=0.75

  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)
  }


const justKeyArray = {
"z": 1,
  "s": eval(16/15),
  "x": eval(9/8),
  "d": eval(6/5),
  "c": eval(5/4),
  "v": eval(4/3),
  "g": eval(45/32),
  "b": eval(3/2),
  "h": eval(8/5),
  "n": eval(5/3),
  "j": eval(16/9),
  "m": eval(15/8),
  ",": eval(2),
  "q": 1,
  "2": Math.pow(2, 1/12),
  "w": Math.pow(2, 2/12),
  "3": Math.pow(2, 3/12),
  "e": Math.pow(2, 4/12),
  "r": Math.pow(2, 5/12),
  "5": Math.pow(2, 6/12),
  "t": Math.pow(2, 7/12),
  "6": Math.pow(2, 8/12),
  "y": Math.pow(2, 9/12),
  "7": Math.pow(2, 10/12),
  "u": Math.pow(2, 11/12),
  "i": Math.pow(2, 1)
}




document.addEventListener('keypress', function () {
  
  if (justKeyArray[event.key] !== undefined){
  synth[voice].triggerAttackRelease(root*(justKeyArray[event.key]), "8n");
  
if (voice >= (maxVoices-1)){voice = 0}
else {voice ++}
    
}})