feat: guess chord and 8 voices to try

components/MidiKeys.vue

@@ -4,7 +4,7 @@ import { computed, ref, watch } from 'vue';
 import { useGesture } from '@vueuse/gesture';
 import { useClamp } from '@vueuse/math'
 import { useStorage } from '@vueuse/core'
-import { ScaleType } from 'tonal'
+import { ScaleType, Chord } from 'tonal'
 
 import { useMidi } from '../composables/useMidi.js'
 import { notes, pitchColor } from '../composables/calculations.js';
@@ -22,7 +22,7 @@ const props = defineProps({
 })
 
 
-const { activeNotes } = useMidi()
+const { activeNotes, guessChords } = useMidi()
 
 const { roundBegin: begin, roundEnd: end, beginControl, endControl, range } = useRange()
 
@@ -206,6 +206,13 @@ svg.cursor-pointer.select-none.touch-none.shadow-xl.mx-auto(
         :y="controlOffset * .75"
         ) {{ notes[(end + 3) % 12] }}{{ Math.floor((end + 3) / 12) - 1 }}
 
+    g.detect(
+      :transform="`translate(${width * 4 / 5},${controlOffset * .75})`"
+      )
+      text.text-3xl.pointer-events-none(
+        text-anchor="middle"
+        ) {{ guessChords[0] }}
+
 
     g.range.pointer-events-none(
       :transform="`translate(${width * 3 / 5},0)`"

composables/useSynth.js

@@ -24,7 +24,7 @@ export const meters = reactive({})
 export const scopes = reactive({})
 export const FFTs = reactive({})
 
-export function useSynth() {
+export function useSynth(voiceCount = 8) {
 
   const initiated = ref(false)
   const started = ref(false)
@@ -33,7 +33,7 @@ export function useSynth() {
 
   const { controls, cv, groups, initRefs } = useParams(params, 'el')
 
-  const { voices, cycleNote, initVoices, getVoiceParams, stopAll } = useVoices()
+  const { voices, cycleNote, initVoices, getVoiceParams, stopAll } = useVoices(voiceCount)
 
   async function start() {
     if (initiated.value) return