Commit 0731d798 authored by Toni Salo's avatar Toni Salo
Browse files

kuulemma scenen tradition mukainen asettelu

parent 9bb73463
{
"name": "piano",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.10",
"@testing-library/react": "^11.2.6",
......
......@@ -52,146 +52,140 @@ function App() {
useEffect(() => {
let edellinen =""
const listener = event => {
if (event.key === "§") {
if (edellinen !== "A#1") {audioPlayer.playNote(34+korkeus)}
edellinen = "A#1"
}
if (event.key === "1") {
if (event.key === "<") {
if (edellinen !== "B1") {audioPlayer.playNote(35+korkeus)}
edellinen = "B1"
}
if (event.key === "q") {
if (event.key === "z") {
if (edellinen !== "C2") {audioPlayer.playNote(36+korkeus)}
edellinen = "C2"
}
if (event.key === "2") {
if (event.key === "s") {
if (edellinen !== "C#2") {audioPlayer.playNote(37+korkeus)}
edellinen = "C#2"
}
if (event.key === "w") {
if (event.key === "x") {
if (edellinen !== "D2") {audioPlayer.playNote(38+korkeus)}
edellinen = "D2"
}
if (event.key === "3") {
if (event.key === "d") {
if (edellinen !== "D#2") {audioPlayer.playNote(39+korkeus)}
edellinen = "D#2"
}
if (event.key === "e") {
if (event.key === "c") {
if (edellinen !== "E2") {audioPlayer.playNote(40+korkeus)}
edellinen = "E2"
}
if (event.key === "r") {
if (event.key === "v") {
if (edellinen !== "F2") {audioPlayer.playNote(41+korkeus)}
edellinen = "F2"
}
if (event.key === "5") {
if (event.key === "g") {
if (edellinen !== "F#2") {audioPlayer.playNote(42+korkeus)}
edellinen = "F#2"
}
if (event.key === "t") {
if (event.key === "b") {
if (edellinen !== "G2") {audioPlayer.playNote(43+korkeus)}
edellinen = "G2"
}
if (event.key === "6") {
if (event.key === "h") {
if (edellinen !== "G#2") {audioPlayer.playNote(44+korkeus)}
edellinen = "G#2"
}
if (event.key === "y") {
if (event.key === "n") {
if (edellinen !== "A2") {audioPlayer.playNote(45+korkeus)}
edellinen = "A2"
}
if (event.key === "7") {
if (event.key === "j") {
if (edellinen !== "A#2") {audioPlayer.playNote(46+korkeus)}
edellinen = "A#2"
}
if (event.key === "u") {
if (event.key === "m") {
if (edellinen !== "B2") {audioPlayer.playNote(47+korkeus)}
edellinen = "B2"
}
if (event.key === "i" || event.key === "<") {
if (event.key === "q" || event.key === ",") {
if (edellinen !== "C3") {audioPlayer.playNote(48+korkeus)}
edellinen = "C3"
}
if (event.key === "a" || event.key === "9") {
if (event.key === "l" || event.key === "2") {
if (edellinen !== "C#3") {audioPlayer.playNote(49+korkeus)}
edellinen = "C#3"
}
if (event.key === "o" || event.key === "z") {
if (event.key === "." || event.key === "w") {
if (edellinen !== "D3") {audioPlayer.playNote(50+korkeus)}
edellinen = "D3"
}
if (event.key === "s" || event.key === "0") {
if (event.key === "ö" || event.key === "3") {
if (edellinen !== "D#3") {audioPlayer.playNote(51+korkeus)}
edellinen = "D#3"
}
if (event.key === "x" || event.key === "p") {
if (event.key === "-" || event.key === "e") {
if (edellinen !== "E3") {audioPlayer.playNote(52+korkeus)}
edellinen = "E3"
}
if (event.key === "c" || event.key === "å") {
if (event.key === "ä" || event.key === "r") {
if (edellinen !== "F3") {audioPlayer.playNote(53+korkeus)}
edellinen = "F3"
}
if (event.key === "f") {
if (event.key === "5") {
if (edellinen !== "F#3") {audioPlayer.playNote(54+korkeus)}
edellinen = "F#3"
}
if (event.key === "v") {
if (event.key === "t") {
if (edellinen !== "G3") {audioPlayer.playNote(55+korkeus)}
edellinen = "G3"
}
if (event.key === "g") {
if (event.key === "6") {
if (edellinen !== "G#3") {audioPlayer.playNote(56+korkeus)}
edellinen = "G#3"
}
if (event.key === "b") {
if (event.key === "y") {
if (edellinen !== "A3") {audioPlayer.playNote(57+korkeus)}
edellinen = "A3"
}
if (event.key === "h") {
if (event.key === "7") {
if (edellinen !== "A#3") {audioPlayer.playNote(58+korkeus)}
edellinen = "A#3"
}
if (event.key === "n") {
if (event.key === "u") {
if (edellinen !== "B3") {audioPlayer.playNote(59+korkeus)}
edellinen = "B3"
}
if (event.key === "m") {
if (event.key === "i") {
if (edellinen !== "C4") {audioPlayer.playNote(60+korkeus)}
edellinen = "C4"
}
if (event.key === "k") {
if (event.key === "9") {
if (edellinen !== "C#4") {audioPlayer.playNote(61+korkeus)}
edellinen = "C#4"
}
if (event.key === ",") {
if (event.key === "o") {
if (edellinen !== "D4") {audioPlayer.playNote(62+korkeus)}
edellinen = "D4"
}
if (event.key === "l") {
if (event.key === "0") {
if (edellinen !== "D#4") {audioPlayer.playNote(63+korkeus)}
edellinen = "D#4"
}
if (event.key === ".") {
if (event.key === "p") {
if (edellinen !== "E4") {audioPlayer.playNote(64+korkeus)}
edellinen = "E4"
}
if (event.key === "-") {
if (event.key === "å") {
if (edellinen !== "F4") {audioPlayer.playNote(65+korkeus)}
edellinen = "F4"
}
if (event.key === "ä") {
if (event.key === "´") {
if (edellinen !== "F#4") {audioPlayer.playNote(66+korkeus)}
edellinen = "F#4"
}
if (event.key === "'") {
if (event.key === "¨") {
if (edellinen !== "G4") {audioPlayer.playNote(67+korkeus)}
edellinen = "G4"
}
if (event.key === "d") {
audioPlayer.stopNote(0)
}
};
const irrotus = event => {
......@@ -250,39 +244,36 @@ function App() {
// sivulla näkyvien elementtien renderöinti
return (
<div className="app-container">
<button id="sharp" onClick={handleAis1Click}>§</button>
<button id="perus" onClick={handleB1Click}>1</button>
<button id="thin" onClick={handleC2Click}>q</button>
<button id="sharp" onClick={handleCis2Click}>2</button>
<button id="perus" onClick={handleD2Click}>w</button>
<button id="sharp" onClick={handleDis2Click}>3</button>
<button id="perus" onClick={handleE2Click}>e</button>
<button id="thin" onClick={handleF2Click}>r</button>
<button id="sharp" onClick={handleFis2Click}>5</button>
<button id="perus" onClick={handleG2Click}>t</button>
<button id="sharp" onClick={handleGis2Click}>6</button>
<button id="perus" onClick={handleA2Click}>y</button>
<button id="sharp" onClick={handleAis2Click}>7</button>
<button id="perus" onClick={handleB2Click}>u</button>
<button id="thin" onClick={handleC3Click}>i</button>
<button id="sharp" onClick={handleCis3Click}>a9</button>
<button id="perus" onClick={handleD3Click}>zo</button>
<button id="sharp" onClick={handleDis3Click}>s0</button>
<button id="perus" onClick={handleE3Click}>xp</button>
<button id="thin" onClick={handleF3Click}>åc</button>
<button id="sharp" onClick={handleFis3Click}>f</button>
<button id="perus" onClick={handleG3Click}>v</button>
<button id="sharp" onClick={handleGis3Click}>g</button>
<button id="perus" onClick={handleA3Click}>b</button>
<button id="sharp" onClick={handleAis3Click}>h</button>
<button id="perus" onClick={handleB3Click}>n</button>
<button id="thin" onClick={handleC4Click}>m</button>
<button id="sharp" onClick={handleCis4Click}>k</button>
<button id="perus" onClick={handleD4Click}>,</button>
<button id="sharp" onClick={handleDis4Click}>l</button>
<button id="perus" onClick={handleE4Click}>.</button>
<button id="thin" onClick={handleF4Click}>-</button>
<button id="sharp" onClick={handleFis4Click}>ä</button>
<button id="thin" onClick={handleC2Click}>z</button>
<button id="sharp" onClick={handleCis2Click}>s</button>
<button id="perus" onClick={handleD2Click}>x</button>
<button id="sharp" onClick={handleDis2Click}>d</button>
<button id="perus" onClick={handleE2Click}>c</button>
<button id="thin" onClick={handleF2Click}>v</button>
<button id="sharp" onClick={handleFis2Click}>g</button>
<button id="perus" onClick={handleG2Click}>b</button>
<button id="sharp" onClick={handleGis2Click}>h</button>
<button id="perus" onClick={handleA2Click}>n</button>
<button id="sharp" onClick={handleAis2Click}>j</button>
<button id="perus" onClick={handleB2Click}>m</button>
<button id="thin" onClick={handleC3Click}>q,</button>
<button id="sharp" onClick={handleCis3Click}>2l</button>
<button id="perus" onClick={handleD3Click}>w.</button>
<button id="sharp" onClick={handleDis3Click}>3ö</button>
<button id="perus" onClick={handleE3Click}>e-</button>
<button id="thin" onClick={handleF3Click}></button>
<button id="sharp" onClick={handleFis3Click}>5</button>
<button id="perus" onClick={handleG3Click}>t</button>
<button id="sharp" onClick={handleGis3Click}>6</button>
<button id="perus" onClick={handleA3Click}>y</button>
<button id="sharp" onClick={handleAis3Click}>7</button>
<button id="perus" onClick={handleB3Click}>u</button>
<button id="thin" onClick={handleC4Click}>i</button>
<button id="sharp" onClick={handleCis4Click}>9</button>
<button id="perus" onClick={handleD4Click}>o</button>
<button id="sharp" onClick={handleDis4Click}>0</button>
<button id="perus" onClick={handleE4Click}>p</button>
<button id="thin" onClick={handleF4Click}>å</button>
<button id="omenu" onClick={() => {if (korkeus < 15) {setKorkeus(korkeus + 12)}}}>
Nosta oktaavilla
</button>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment