mode selector

static/piano/index.html

@@ -20,16 +20,31 @@
 
 <script>
   // const inputArea = document.querySelector('#input');
+  const selectNoteLayout = document.querySelector('#select-note-layout');
   const notesDiv = document.querySelector('#notes-held');
   const ctx = new AudioContext;
   const playing = {};
   let tone = {};
   addEventListener('keydown', onKeydown);
   addEventListener('keyup', onKeyup);
-  useIsomorphic(2, 1);
+  useLayout(selectNoteLayout.value);
+  selectNoteLayout.onchange = function(ev) {
+    ev.preventDefault();
+    useLayout(ev.target.value);
+  }
+
+  function useLayout(layout) {
+    if (layout == 'classic') {
+      useClassicPiano();
+    } else if (layout == 'isomorphic-2-1') {
+      useIsomorphic(2, 1);
+    } else if (layout == 'isomorphic-5-2') {
+      useIsomorphic(5, 2);
+    }
+  }
 
   // arrange notes like on a piano. the second and fourth rows are each a major scale, but the first and third rows have gaps.
-  function usePianoKeys() {
+  function useClassicPiano() {
     tone = {};
     ("zsxdcvgbhnjm,l.;/q2w3e4rt6y7ui9o0p-[]"
       .split('')