diff --git a/html/assets/scripts/map.js b/html/assets/scripts/map.js
new file mode 100644
index 0000000..9a12695
--- /dev/null
+++ b/html/assets/scripts/map.js
@@ -0,0 +1,161 @@
+// access ex: noteMap.get("C0");
+// Maps key names to key number
+{
+ let values = [
+ ["A0" , 1],
+ ["A#0", 2],
+ ["Bb0", 2],
+ ["B0" , 3],
+ ["B#0", 4],
+ ["Cb1", 3],
+ ["C1" , 4],
+ ["C#1", 5],
+ ["Db1", 5],
+ ["D1" , 6],
+ ["D#1", 7],
+ ["Eb1", 7],
+ ["E1" , 8],
+ ["E#1", 9],
+ ["Fb1", 8],
+ ["F1" , 9],
+ ["F#1",10],
+ ["Gb1",10],
+ ["G1" ,11],
+ ["G#1",12],
+ ["Ab1",12],
+ ["A1" ,13],
+ ["A#1",14],
+ ["Bb1",14],
+ ["B1" ,15],
+ ["B#1",16],
+ ["Cb2",15],
+ ["C2" ,16],
+ ["C#2",17],
+ ["Db2",17],
+ ["D2" ,18],
+ ["D#2",19],
+ ["Eb2",19],
+ ["E2" ,20],
+ ["E#2",21],
+ ["Fb2",20],
+ ["F2" ,21],
+ ["F#2",22],
+ ["Gb2",22],
+ ["G2" ,23],
+ ["G#2",24],
+ ["Ab2",24],
+ ["A2" ,25],
+ ["A#2",26],
+ ["Bb2",26],
+ ["B2" ,27],
+ ["B#2",28],
+ ["Cb3",27],
+ ["C3" ,28],
+ ["C#3",29],
+ ["Db3",29],
+ ["D3" ,30],
+ ["D#3",31],
+ ["Eb3",31],
+ ["E3" ,32],
+ ["E#3",33],
+ ["Fb3",32],
+ ["F3" ,33],
+ ["F#3",34],
+ ["Gb3",34],
+ ["G3" ,35],
+ ["G#3",36],
+ ["Ab3",36],
+ ["A3" ,37],
+ ["A#3",38],
+ ["Bb3",38],
+ ["B3" ,39],
+ ["B#3",40],
+ ["Cb4",39],
+ ["C4" ,40],
+ ["C#4",41],
+ ["Db4",41],
+ ["D4" ,42],
+ ["D#4",43],
+ ["Eb4",43],
+ ["E4" ,44],
+ ["E#4",45],
+ ["Fb4",44],
+ ["F4" ,45],
+ ["F#4",46],
+ ["Gb4",46],
+ ["G4" ,47],
+ ["G#4",48],
+ ["Ab4",48],
+ ["A4" ,49],
+ ["A#4",50],
+ ["Bb4",50],
+ ["B4" ,51],
+ ["B#4",52],
+ ["Cb5",51],
+ ["C5" ,52],
+ ["C#5",53],
+ ["Db5",53],
+ ["D5" ,54],
+ ["D#5",55],
+ ["Eb5",55],
+ ["E5" ,56],
+ ["E#5",57],
+ ["Fb5",56],
+ ["F5" ,57],
+ ["F#5",58],
+ ["Gb5",58],
+ ["G5" ,59],
+ ["G#5",60],
+ ["Ab5",60],
+ ["A5" ,61],
+ ["A#5",62],
+ ["Bb5",62],
+ ["B5" ,63],
+ ["B#5",64],
+ ["Cb6",63],
+ ["C6" ,64],
+ ["C#6",65],
+ ["Db6",65],
+ ["D6" ,66],
+ ["D#6",67],
+ ["Eb6",67],
+ ["E6" ,68],
+ ["E#6",69],
+ ["Fb6",68],
+ ["F6" ,69],
+ ["F#6",70],
+ ["Gb6",70],
+ ["G6" ,71],
+ ["G#6",72],
+ ["Ab6",72],
+ ["A6" ,73],
+ ["A#6",74],
+ ["Bb6",74],
+ ["B6" ,75],
+ ["B#6",76],
+ ["Cb7",75],
+ ["C7" ,76],
+ ["C#7",77],
+ ["Db7",77],
+ ["D7" ,78],
+ ["D#7",79],
+ ["Eb7",79],
+ ["E7" ,80],
+ ["E#7",81],
+ ["Fb7",80],
+ ["F7" ,81],
+ ["F#7",82],
+ ["Gb7",82],
+ ["G7" ,83],
+ ["G#7",84],
+ ["Ab7",84],
+ ["A7" ,85],
+ ["A#7",86],
+ ["Bb7",86],
+ ["B7" ,87],
+ ["B#7",88],
+ ["Cb8",87],
+ ["C8", 88]
+ ];
+ var noteMap = new Map(values);
+}
\ No newline at end of file
diff --git a/html/index.html b/html/index.html
index 5ea925d..50b46bb 100644
--- a/html/index.html
+++ b/html/index.html
@@ -1,3 +1,4 @@
+<!DOCTYPE html>
<head>
<title>MidiTrainer</title>
<link rel="stylesheet" href="assets/css/reset.css">
@@ -9,6 +10,8 @@
<object id="piano" data="assets/img/piano-keyboard.svg" type="image/svg+xml" width="100%" type="image/svg+xml"></object>
</div>
<script src="https://cdn.jsdelivr.net/npm/vexflow@4.0.3/build/cjs/vexflow.js"></script>
+ <script src="assets/scripts/map.js"></script>
<script src="assets/scripts/render.js"></script>
<script src="assets/scripts/midi.js"></script>
+ <script src="assets/scripts/practice.js"></script>
</body>
\ No newline at end of file