add interactive inputs for MIDI

Author: MaxAlyokhin

dist/index.html

@@ -1,6 +1,6 @@
 {
     "name": "binary-synth",
-    "version": "1.9.0",
+    "version": "1.10.0",
     "private": true,
     "scripts": {
         "dev": "vite --host",

package.json

@@ -14,7 +14,7 @@ const file = useFileStore()
             <FileInput />
             <ControlPanel />
             <div class="about">
-                <a href="https://github.com/MaxAlyokhin/binary-synth" target="_blank" rel="noopener noreferrer">About and sources (v1.9.0)</a>
+                <a href="https://github.com/MaxAlyokhin/binary-synth" target="_blank" rel="noopener noreferrer">About and sources (v1.10.0)</a>
                 <a href="https://dfap.stranno.su" target="_blank" rel="noopener noreferrer">by DFAP</a>
             </div>
         </div>

src/BinarySynth.vue

@@ -121,14 +121,26 @@ watch(midi, () => {
                 <div class="module__container">
                     <span>From</span>
                     <div class="notes-range__inputs">
-                        <input type="number" step="1" name="notes-range-from" class="notes-range-from" v-model="notesFrom" />
+                        <InteractiveInput
+                            :validValue="settings.notesRange.from"
+                            @valueFromInput="notesFrom = $event"
+                            step="1"
+                            keyCode="KeyA"
+                            letter="A"
+                        />
                         <span class="notes-range__from-span">{{ noteNameFrom }}</span>
                     </div>
                 </div>
                 <div class="module__container">
                     <span class="notes-range-to-span key">To</span>
                     <div class="notes-range__inputs">
-                        <input type="number" step="1" name="notes-range-to" class="notes-range-to" v-model="notesTo" />
+                        <InteractiveInput
+                            :validValue="settings.notesRange.to"
+                            @valueFromInput="notesTo = $event"
+                            step="1"
+                            keyCode="KeyS"
+                            letter="S"
+                        />
                         <span class="notes-range__to-span">{{ noteNameTo }}</span>
                     </div>
                 </div>
@@ -145,7 +157,9 @@ watch(midi, () => {
         span {
             position: absolute;
             top: 4px;
-            left: 6px;
+            left: 95px;
+            line-height: 13px;
+            z-index: 10;
         }
 
         input {

src/components/ControlPanel/Frequency.vue

@@ -24,8 +24,8 @@ export const useSettingsStore = defineStore('settings', () => {
         to: 256,
     })
     const notesRange = ref({
-        from: 48,
-        to: 60,
+        from: 36,
+        to: 48,
     })
     const fragment = ref({
         from: 0,