Chord-progression enhancements

Author: danrose499

README.md

@@ -1,6 +1,6 @@
 # Music Mate
 
-Live: https://danrose499.github.io/Music-Mate/
+Live: https://danielrosenthal.dev/Music-Mate/
 
 ![App Page](src/assets/images/Screenshot.png?raw=true "App Page")
 

package-lock.json

@@ -16,6 +16,7 @@
     "@sveltejs/vite-plugin-svelte": "^3.0.0",
     "autoprefixer": "^10.4.18",
     "postcss": "^8.4.35",
+    "svelte-preprocess": "^6.0.3",
     "tailwindcss": "^3.4.10",
     "vite": "^5.2.0",
     "vite-plugin-pwa": "^0.20.0"

package.json

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

postcss.config.js

@@ -27,9 +27,10 @@
   let tremolo
   let compressor
   let started = false
-  let loop = false
+  let loop = true
   let part
   let isTouch = false
+  let currentBeat = -1
 
   // Clicking a chord selects it (updates diagrams) without triggering audio
   function selectChord(chord) {
@@ -141,43 +142,72 @@
     progression = [...progression.slice(0, i), item, ...progression.slice(i)]
   }
 
-  async function playProgression() {
-    await ensureAudio()
-    Tone.Transport.stop()
+  // Reactive statement to update the sequence whenever the progression changes
+  $: if (progression && started) {
+    if (Tone.Transport.state === 'started') {
+      updateSequence(true) // restart playback
+    }
+  }
+
+  // This function builds or rebuilds the Tone.js Part from the progression
+  function updateSequence(restart = false) {
+    const wasRunning = Tone.Transport.state === 'started'
+    if (wasRunning) Tone.Transport.stop()
+
     Tone.Transport.cancel(0)
-    if (part) { part.dispose(); part = null }
+    if (part) {
+      part.dispose()
+      part = null
+    }
+    
+    if (progression.length === 0) {
+      currentBeat = -1
+      return
+    }
 
     const quarter = Tone.Time('4n').toSeconds()
     const events = []
     let acc = 0
-    for (let i = 0; i < progression.length; i++) {
-      const item = progression[i]
+    progression.forEach((item, i) => {
       const notes = item?.chord ? chordNotes(item.chord) : []
-      const strums = (item?.beats || 4)
-      for (let s = 0; s < strums; s++) {
+      const beats = item?.beats || 4
+      item.startBeat = Math.floor(acc / quarter)
+      for (let s = 0; s < beats; s++) {
         const dir = 'down'
-        events.push({ time: acc + s * quarter, notes, dir })
+        events.push({ time: acc + s * quarter, notes, dir, beat: item.startBeat + s, chord: item.chord })
       }
-      acc += (item?.beats || 4) * quarter
-    }
-
-    if (events.length === 0) return
+      acc += beats * quarter
+    })
 
     part = new Tone.Part((time, ev) => {
+      currentBeat = ev.beat
+      if (currentChord !== ev.chord) {
+        currentChord = ev.chord
+      }
       if (ev.notes && ev.notes.length) {
         strumChord(ev.notes, time, ev.dir)
       }
     }, events).start(0)
     part.loop = loop
     part.loopEnd = acc
 
-    Tone.Transport.start('+0.05')
+    if (restart || wasRunning) {
+      Tone.Transport.start('+0.05')
+    }
+  }
+
+  async function playProgression() {
+    await ensureAudio()
+    currentBeat = 0
+    updateSequence(true)
+    Tone.Transport.on('stop', () => { currentBeat = -1 })
   }
 
   function stopProgression() {
     Tone.Transport.stop()
     Tone.Transport.cancel(0)
     if (part) { part.dispose(); part = null }
+    currentBeat = -1
   }
 </script>
 
@@ -205,7 +235,7 @@
             <ChordButton name={c} {isTouch} onPreview={() => preview(c)} onAdd={() => addToProgression(c)} onSelect={() => selectChord(c)} />
           {/each}
           <!-- Rest tile (draggable) -->
-          <ChordButton name="Rest" {isTouch} dragPayload="REST" onAdd={addRestToProgression} />
+          <ChordButton name="Rest" {isTouch} dragPayload="REST" onAdd={addRestToProgression} onSelect={() => selectChord('Rest')} />
         </div>
       </div>
 
@@ -220,11 +250,11 @@
           <div class="grid grid-cols-2 gap-3">
             <div class="space-y-2">
               <div class="text-xs uppercase tracking-wide text-slate-400">Guitar</div>
-              <ChordDiagram instrument="guitar" shape={guitarShapes[currentChord]} />
+              <ChordDiagram instrument="guitar" shape={{...guitarShapes[currentChord || 'Rest'], chord: currentChord || 'Rest'}} clickable={true} on:click={() => preview(currentChord)} />
             </div>
             <div class="space-y-2">
               <div class="text-xs uppercase tracking-wide text-slate-400">Ukulele</div>
-              <ChordDiagram instrument="uke" shape={ukeShapes[currentChord]} />
+              <ChordDiagram instrument="uke" shape={{...ukeShapes[currentChord || 'Rest'], chord: currentChord || 'Rest'}} clickable={true} on:click={() => preview(currentChord)} />
             </div>
           </div>
         {/if}
@@ -233,7 +263,7 @@
 
     <section class="space-y-4">
       <h2 class="font-semibold text-slate-200">Progression</h2>
-      <ProgressionBar {progression} {isTouch} onRemove={removeFromProgression} onUpdateBeat={updateBeats} onReorder={reorderProgression} onInsert={insertAt} />
+      <ProgressionBar {progression} {currentBeat} {isTouch} onRemove={removeFromProgression} onUpdateBeat={updateBeats} onReorder={reorderProgression} onInsert={insertAt} />
       <div class="flex flex-wrap items-center gap-3">
         <button class="px-4 py-2 rounded-lg bg-cyan-500 hover:bg-cyan-400 text-slate-900 font-semibold"
           on:click={playProgression}

src/App.svelte

@@ -57,18 +57,18 @@
       ▶︎
     </button>
 
+    <button type="button" class="px-2 py-1 rounded bg-cyan-500 hover:bg-cyan-400 text-slate-900 text-sm"
+      on:click|stopPropagation={() => onAdd?.()}
+      on:touchstart|stopPropagation|preventDefault={() => onAdd?.()}>
+      Add
+    </button>
 <style>
   /* Hide drag handle on mobile/tablet (coarse pointer) in all orientations */
   @media (pointer: coarse) {
     .drag-icon { display: none !important; }
   }
   /* Prevent long-press image drag ghosting on iOS */
   img[draggable="false"] { -webkit-user-drag: none; }
-}</style>
-    <button type="button" class="px-2 py-1 rounded bg-cyan-500 hover:bg-cyan-400 text-slate-900 text-sm"
-      on:click|stopPropagation={() => onAdd?.()}
-      on:touchstart|stopPropagation|preventDefault={() => onAdd?.()}>
-      Add
-    </button>
+</style>
   </div>
 </button>