some minor UI changes: adding the playback functionality for the chosen section with no key and bpm change and replacing the upload new with choose a different song

backend/presets/sample-track/bass.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:34d0bf1999390c1846ec635d7d13f719f12235dd0c3b43aff37c978defd20166
+size 70893820

backend/presets/sample-track/click_record.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:436b475a472014349fe08f7acee5916bf17d1ff475471b6f04b45e1cf3f67233
+size 70893820

backend/presets/sample-track/drums.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:536d1b91df21e93ca9f1f1352da5b70f64e6b0b8ac884e7ef794122f63183cfd
+size 70893820

backend/presets/sample-track/guitar.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8ed112603fd68bed8a61c290b9ca36fcecee998b085eb283a21e127df0b2bc9e
+size 70893820

backend/presets/sample-track/synth.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ba8a34d85b65a69e09ba0a319136bba8c9d92a6e0fa10e9dc3770d6e26d25a49
+size 70893820

convert_to_ogg.py

@@ -0,0 +1,67 @@
+"""
+Convert a single preset's WAV stems to OGG Vorbis at quality 9.
+Verifies sample count matches original WAV after conversion.
+Usage: python convert_to_ogg.py <preset_folder_name>
+"""
+
+import subprocess
+import sys
+import soundfile as sf
+from pathlib import Path
+
+PRESETS_DIR = Path(__file__).parent / "backend" / "presets"
+
+preset_name = sys.argv[1] if len(sys.argv) > 1 else "274-SUNSPILL"
+preset_dir = PRESETS_DIR / preset_name
+
+wav_files = sorted(preset_dir.glob("*.wav"))
+if not wav_files:
+    print(f"No WAV files found in {preset_dir}")
+    sys.exit(1)
+
+print(f"Converting {preset_name} ({len(wav_files)} stems) at OGG quality 9\n")
+
+all_ok = True
+for wav_path in wav_files:
+    ogg_path = wav_path.with_suffix(".ogg")
+
+    # Get original sample count
+    info = sf.info(str(wav_path))
+    original_frames = info.frames
+    sr = info.samplerate
+
+    # Convert: pipe exact sample count via atrim so encoder sees correct length
+    result = subprocess.run(
+        [
+            "ffmpeg", "-y", "-i", str(wav_path),
+            "-af", f"atrim=end_sample={original_frames}",
+            "-c:a", "vorbis", "-strict", "experimental",
+            "-q:a", "9",
+            str(ogg_path)
+        ],
+        capture_output=True
+    )
+
+    if result.returncode != 0:
+        print(f"  ERROR converting {wav_path.name}")
+        print(result.stderr.decode()[-300:])
+        all_ok = False
+        continue
+
+    # Verify decoded length
+    ogg_info = sf.info(str(ogg_path))
+    decoded_frames = ogg_info.frames
+    delta = decoded_frames - original_frames
+
+    wav_mb = wav_path.stat().st_size / 1024 / 1024
+    ogg_mb = ogg_path.stat().st_size / 1024 / 1024
+    length_ok = "✓" if delta == 0 else f"✗ delta={delta:+d} samples ({delta/sr*1000:.1f}ms)"
+
+    print(f"  {wav_path.name}")
+    print(f"    Size:   {wav_mb:.1f} MB → {ogg_mb:.1f} MB ({ogg_mb/wav_mb*100:.0f}%)")
+    print(f"    Length: {original_frames} → {decoded_frames} samples  {length_ok}")
+
+if all_ok:
+    print("\nAll conversions successful. WAV files kept for now — delete manually after listening test.")
+else:
+    print("\nSome conversions failed.")

frontend/src/App.jsx

@@ -51,6 +51,8 @@ function App() {
     setPan,
     resetVolumes,
     setLoop,
+    setRawRegion,
+    isRawRegionActive,
     clearBufferCache
   } = useAudioEngine()
 
@@ -84,6 +86,24 @@ function App() {
     await loadPreset(presetName)
   }, [loadPreset])
 
+  // Main play button: always plays full song — clears any active raw-region loop first
+  const handlePlay = useCallback(() => {
+    if (isRawRegionActive) {
+      setRawRegion(null)
+      setLoop(false)
+    }
+    play()
+  }, [isRawRegionActive, setRawRegion, setLoop, play])
+
+  // Play Section: loops the selected region using full-song buffers (no processing needed)
+  const handlePlaySection = useCallback(() => {
+    if (!hasRegion) return
+    stop()
+    setRawRegion(regionStart, regionEnd)
+    setLoop(true)
+    play()
+  }, [hasRegion, stop, setRawRegion, regionStart, regionEnd, setLoop, play])
+
   const handleProcess = useCallback(async (semitones, targetBpm) => {
     setIsProcessing(true)
     resetProgress()
@@ -100,6 +120,7 @@ function App() {
           // Clear stale region cache (new processing produced new audio)
           clearBufferCache('region')
           await loadStems(sessionId, stems, { region: true })
+          setRawRegion(null)  // processed region takes over; raw region no longer needed
           setPlaybackMode('region')
           setLoop(true)
         } else {
@@ -113,7 +134,7 @@ function App() {
     } finally {
       setIsProcessing(false)
     }
-  }, [process, sessionId, stems, loadStems, resetProgress, hasRegion, regionStart, regionEnd, setLoop, clearBufferCache])
+  }, [process, sessionId, stems, loadStems, resetProgress, hasRegion, regionStart, regionEnd, setRawRegion, setLoop, clearBufferCache])
 
   const handleGenerate = useCallback(async (prompt) => {
     if (!hasRegion) return
@@ -134,6 +155,7 @@ function App() {
   const handlePlayFullSong = useCallback(async () => {
     // Stop current playback
     stop()
+    setRawRegion(null)
     setLoop(false)
     setPlaybackMode('full')
 
@@ -142,7 +164,7 @@ function App() {
       // Setting processed=true will get processed if available, else original
       await loadStems(sessionId, stems)
     }
-  }, [stop, setLoop, sessionId, stems, loadStems])
+  }, [stop, setRawRegion, setLoop, sessionId, stems, loadStems])
 
   const handleStemsReady = useCallback(async () => {
     if (sessionId && stems.length > 0) {
@@ -210,7 +232,7 @@ function App() {
             onClick={() => window.location.reload()}
             className="text-sm text-gray-400 hover:text-white transition-colors"
           >
-            Upload New
+            Choose a different song
           </button>
         </header>
 
@@ -246,7 +268,9 @@ function App() {
                 isPlaying={isPlaying}
                 currentTime={currentTime}
                 duration={duration}
-                onPlay={play}
+                onPlay={handlePlay}
+                onPlaySection={handlePlaySection}
+                isRawRegionActive={isRawRegionActive}
                 onPause={pause}
                 onStop={stop}
                 onSeek={seek}
@@ -255,10 +279,16 @@ function App() {
                 onRegionChange={(start, end) => {
                   setRegionStart(start)
                   setRegionEnd(end)
+                  if (playbackMode !== 'region') {
+                    setRawRegion(start, end)
+                    setLoop(true)
+                  }
                 }}
                 onClearRegion={() => {
                   setRegionStart(null)
                   setRegionEnd(null)
+                  setRawRegion(null)
+                  setLoop(false)
                   if (playbackMode === 'region') {
                     handlePlayFullSong()
                   }

frontend/src/components/TransportBar.jsx

@@ -42,6 +42,8 @@ function TransportBar({
   onClearRegion,
   playbackMode,
   onPlayFullSong,
+  onPlaySection,
+  isRawRegionActive,
   fullSongDuration
 }) {
   // In region mode, map the playhead position into the region's span on the full bar
@@ -264,6 +266,7 @@ function TransportBar({
           </svg>
         </button>
 
+
         {/* Progress bar with region selection */}
         <div className="flex-1 flex items-center gap-3">
           <span className="text-sm text-gray-400 w-12 text-right">
@@ -379,6 +382,19 @@ function TransportBar({
             </span>
           </div>
 
+          {/* Play Section button */}
+          {playbackMode !== 'region' && (
+            <button
+              onClick={onPlaySection}
+              className="flex items-center gap-1.5 px-3 py-1 rounded-lg bg-yellow-500/20 hover:bg-yellow-500/30 border border-yellow-500/40 text-yellow-300 text-xs font-medium transition-colors"
+            >
+              <svg className="w-3 h-3 fill-current" viewBox="0 0 24 24">
+                <polygon points="5,3 19,12 5,21" />
+              </svg>
+              Play Section
+            </button>
+          )}
+
           {/* Clear region button */}
           <button
             onClick={onClearRegion}
@@ -387,8 +403,8 @@ function TransportBar({
             Clear Selection
           </button>
 
-          {/* Looping indicator + Play Full Song button (when in region mode) */}
-          {playbackMode === 'region' && (
+          {/* Looping indicator + Play Full Song button — shown when section is looping */}
+          {(playbackMode === 'region' || isRawRegionActive) && (
             <>
               <span className="text-xs text-yellow-400 flex items-center gap-1">
                 <svg className="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
@@ -397,7 +413,7 @@ function TransportBar({
                   <path d="M7 22l-4-4 4-4" />
                   <path d="M21 13v2a4 4 0 01-4 4H3" />
                 </svg>
-                Looping region
+                Looping section
               </span>
 
               <button

frontend/src/hooks/useAudioEngine.js

@@ -40,6 +40,8 @@ export function useAudioEngine() {
   const animationRef = useRef(null)
   const lastTimeUpdateRef = useRef(0) // Last time we updated currentTime state (for throttling)
   const loopRef = useRef(false)       // Whether to loop playback
+  const rawRegionRef = useRef(null)   // { start, end } in seconds for raw-region loop (no processing)
+  const [isRawRegionActive, setIsRawRegionActive] = useState(false)
   // Persistent AudioBuffer cache: keys like "drums_full", "drums_region" → AudioBuffer
   // Survives across loadStems calls so we skip fetch+decode on replay
   const bufferCacheRef = useRef({})
@@ -385,8 +387,10 @@ export function useAudioEngine() {
       // Update current time - throttled to every 100ms for performance
       if (audioContextRef.current && isPlayingRef.current) {
         const elapsed = audioContextRef.current.currentTime - startTimeRef.current + pauseTimeRef.current
-        const dur = durationRef.current
-        const newTime = Math.min(elapsed, dur)
+        const rawRegion = rawRegionRef.current
+        // For raw region loops, treat region end as the effective song end
+        const effectiveDur = rawRegion ? rawRegion.end : durationRef.current
+        const newTime = Math.min(elapsed, effectiveDur)
 
         // Only update state every 100ms (10fps) to reduce re-renders
         const timeSinceLastUpdate = timestamp - lastTimeUpdateRef.current
@@ -396,17 +400,20 @@ export function useAudioEngine() {
         }
 
         // Check if playback ended
-        if (elapsed >= dur && dur > 0) {
+        if (elapsed >= effectiveDur && effectiveDur > 0) {
           if (loopRef.current) {
-            // Loop: restart from beginning
+            // Loop: restart from region start (or song beginning)
             Object.values(sourcesRef.current).forEach(source => {
               try { source.stop() } catch (e) {}
             })
             sourcesRef.current = {}
-            pauseTimeRef.current = 0
-            setCurrentTime(0)
 
-            // Recreate sources and start from 0
+            const loopStart = rawRegion ? rawRegion.start : 0
+            const loopDur = rawRegion ? (rawRegion.end - rawRegion.start) : undefined
+
+            pauseTimeRef.current = loopStart
+            setCurrentTime(loopStart)
+
             const ctx = audioContextRef.current
             Object.entries(buffersRef.current).forEach(([stem, buffer]) => {
               if (!buffer || !gainsRef.current[stem]) return
@@ -414,7 +421,7 @@ export function useAudioEngine() {
               source.buffer = buffer
               source.connect(gainsRef.current[stem])
               sourcesRef.current[stem] = source
-              source.start(0, 0)
+              source.start(0, loopStart, loopDur)
             })
             startTimeRef.current = ctx.currentTime
           } else {
@@ -509,6 +516,7 @@ export function useAudioEngine() {
     sourcesRef.current = {}
 
     // Create new source nodes for each stem (AudioBufferSourceNode is one-shot)
+    const rawRegion = rawRegionRef.current
     Object.entries(buffersRef.current).forEach(([stem, buffer]) => {
       if (!buffer || !gainsRef.current[stem]) return
 
@@ -517,8 +525,13 @@ export function useAudioEngine() {
       source.connect(gainsRef.current[stem])
       sourcesRef.current[stem] = source
 
-      // Start from paused position: source.start(when, offset)
-      source.start(0, pauseTimeRef.current)
+      if (rawRegion) {
+        // Confine playback to the selected region
+        const remaining = Math.max(0, rawRegion.end - pauseTimeRef.current)
+        source.start(0, pauseTimeRef.current, remaining)
+      } else {
+        source.start(0, pauseTimeRef.current)
+      }
     })
 
     startTimeRef.current = ctx.currentTime
@@ -611,6 +624,23 @@ export function useAudioEngine() {
     loopRef.current = enabled
   }, [])
 
+  // Set raw region for looping a selection without processing.
+  // When active, play() confines audio to [start, end] and loops there.
+  const setRawRegion = useCallback((start, end) => {
+    if (start !== null && end !== null) {
+      rawRegionRef.current = { start, end }
+      setIsRawRegionActive(true)
+      // Snap playhead to region start if it's currently outside the region
+      if (pauseTimeRef.current < start || pauseTimeRef.current >= end) {
+        pauseTimeRef.current = start
+        setCurrentTime(start)
+      }
+    } else {
+      rawRegionRef.current = null
+      setIsRawRegionActive(false)
+    }
+  }, [])
+
   // Clear cached AudioBuffers for a specific tag ('full', 'region', or all)
   const clearBufferCache = useCallback((tag = null) => {
     if (tag) {
@@ -642,6 +672,7 @@ export function useAudioEngine() {
     // State
     isPlaying,
     isLoaded,
+    isRawRegionActive,
     currentTime,
     duration,
     volumes,
@@ -665,6 +696,7 @@ export function useAudioEngine() {
     setPan,
     resetVolumes,
     setLoop,
+    setRawRegion,
     clearBufferCache,
     getAnalyserData
   }