Move MIDI preview playback into results table.

Adds per-row Play/Stop buttons and replaces the standalone preview box with compact preview volume/stop controls.

index.html

@@ -348,6 +348,10 @@
             width: 80px;
             text-align: center;
         }
+        .results-table .preview-col {
+            width: 110px;
+            text-align: center;
+        }
 
         .results-table tbody tr {
             cursor: pointer;
@@ -389,6 +393,47 @@
             .results-table .duration-col {
                 width: 60px;
             }
+
+            .results-table .preview-col {
+                width: 84px;
+            }
+        }
+
+        .results-controls {
+            display: flex;
+            gap: calc(var(--spacing-unit) * 1.5);
+            align-items: center;
+            flex-wrap: wrap;
+            padding: calc(var(--spacing-unit) * 2);
+            background: var(--color-surface);
+            border-radius: var(--radius);
+            border: 1px solid var(--color-border);
+            box-shadow: var(--shadow-sm);
+            margin-top: calc(var(--spacing-unit) * 2);
+        }
+        .results-controls .volume-control {
+            flex: 1;
+            min-width: 220px;
+            margin-top: 0;
+        }
+        .results-controls .actions {
+            margin-left: auto;
+            display: inline-flex;
+            gap: calc(var(--spacing-unit) * 1.25);
+            align-items: center;
+            flex-wrap: wrap;
+        }
+        @media (max-width: 768px) {
+            .results-controls {
+                flex-direction: column;
+                align-items: stretch;
+            }
+            .results-controls .actions {
+                margin-left: 0;
+                width: 100%;
+                display: flex;
+                flex-direction: column;
+            }
         }
         
         .confidence-bar {
@@ -849,11 +894,23 @@
                         <th>Title</th>
                         <th class="source-col">Source</th>
                         <th class="duration-col">Duration</th>
+                        <th class="preview-col">Preview</th>
                     </tr>
                 </thead>
                 <tbody id="resultsBody">
                 </tbody>
             </table>
+
+            <div class="results-controls" aria-label="Preview controls">
+                <div class="volume-control">
+                    <label for="soundfontVolume">Preview volume</label>
+                    <input type="range" id="soundfontVolume" min="0" max="1" step="0.01" value="0.7" />
+                </div>
+                <div class="actions">
+                    <button id="soundfontStopBtn" disabled>Stop preview</button>
+                    <button id="nextResultBtn" class="next-result" disabled>Try Next Result</button>
+                </div>
+            </div>
         </div>
         
         <div id="playerSection" class="player-section">
@@ -862,26 +919,6 @@
                 <p id="selectedMeta">Select a MIDI file from search results to enable playback</p>
             </div>
 
-            <div class="section">
-                <div class="section-header">
-                    <h3 class="section-title">Preview</h3>
-                    <p class="section-subtitle">Review the MIDI before generation.</p>
-                </div>
-                <div class="divider"></div>
-
-                <div class="preview-controls">
-                    <button id="soundfontPlayBtn" class="preview-play" disabled>Play Preview</button>
-                    <button id="soundfontStopBtn" disabled>Stop</button>
-                    <div class="volume-control">
-                        <label for="soundfontVolume">Volume</label>
-                        <input type="range" id="soundfontVolume" min="0" max="1" step="0.01" value="0.7" />
-                    </div>
-                    <div class="preview-actions">
-                        <button id="nextResultBtn" class="next-result" disabled>Try Next Result</button>
-                    </div>
-                </div>
-            </div>
-
             <div class="section">
                 <div class="section-header">
                     <h3 class="section-title">Synthesis Engine</h3>

src/main.ts

@@ -11,6 +11,9 @@ class MotifApp {
 
   // Preview player (lazily created for iOS compatibility)
   private soundfontPlayer: SoundfontMIDIPlayer | null = null;
+  private playingPreviewIndex: number | null = null;
+  private previewStopTimeout: number | null = null;
+  private previewButtons: HTMLButtonElement[] = [];
   
   private searchBtn!: HTMLButtonElement;
   private songInput!: HTMLInputElement;
@@ -24,7 +27,6 @@ class MotifApp {
   private selectedMeta!: HTMLElement;
 
   // Preview player controls
-  private soundfontPlayBtn!: HTMLButtonElement;
   private soundfontStopBtn!: HTMLButtonElement;
   private soundfontVolumeSlider!: HTMLInputElement;
 
@@ -100,7 +102,6 @@ class MotifApp {
     this.selectedMeta = document.getElementById('selectedMeta')!;
 
     // Preview player controls
-    this.soundfontPlayBtn = document.getElementById('soundfontPlayBtn') as HTMLButtonElement;
     this.soundfontStopBtn = document.getElementById('soundfontStopBtn') as HTMLButtonElement;
     this.soundfontVolumeSlider = document.getElementById('soundfontVolume') as HTMLInputElement;
 
@@ -143,9 +144,8 @@ class MotifApp {
       }
     });
 
-    // Preview player
+    // Preview player (row buttons in results table)
-    this.soundfontPlayBtn.addEventListener('click', () => this.handleSoundfontPlay());
+    this.soundfontStopBtn.addEventListener('click', () => this.stopPreview(true));
-    this.soundfontStopBtn.addEventListener('click', () => this.handleSoundfontStop());
     this.soundfontVolumeSlider.addEventListener('input', (e) => {
       const volume = parseFloat((e.target as HTMLInputElement).value);
       this.soundfontPlayer?.setVolume(volume);
@@ -299,6 +299,7 @@ class MotifApp {
 
   private displayResults(): void {
     this.resultsBody.innerHTML = '';
+    this.previewButtons = [];
 
     this.searchResults.forEach((result, index) => {
       const row = document.createElement('tr');
@@ -310,11 +311,19 @@ class MotifApp {
         <td>${result.title}</td>
         <td class="source-col">${result.source}</td>
         <td class="duration-col">${result.parsed ? Math.round(result.parsed.durationSec) + 's' : '?'}</td>
+        <td class="preview-col"><button type="button" class="row-preview-btn">Play</button></td>
       `;
 
       // Make entire row clickable
       row.addEventListener('click', () => this.selectResult(index));
 
+      const btn = row.querySelector('button.row-preview-btn') as HTMLButtonElement;
+      btn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        void this.handleRowPreview(index);
+      });
+      this.previewButtons[index] = btn;
+
       this.resultsBody.appendChild(row);
     });
 
@@ -326,11 +335,70 @@ class MotifApp {
     }
   }
 
+  private updatePreviewButtons(): void {
+    for (let i = 0; i < this.previewButtons.length; i++) {
+      const btn = this.previewButtons[i];
+      if (!btn) continue;
+      btn.textContent = this.playingPreviewIndex === i ? 'Stop' : 'Play';
+    }
+  }
+
+  private async handleRowPreview(index: number): Promise<void> {
+    if (this.playingPreviewIndex === index) {
+      this.stopPreview(true);
+      return;
+    }
+
+    // Stop any existing preview first
+    this.stopPreview(false);
+
+    // Ensure this MIDI is selected/loaded (also satisfies iOS user-gesture unlock path)
+    await this.selectResult(index);
+
+    try {
+      const player = await this.ensureAudioReady();
+      player.setVolume(parseFloat(this.soundfontVolumeSlider.value));
+      await player.play();
+
+      this.playingPreviewIndex = index;
+      this.soundfontStopBtn.disabled = false;
+      this.updatePreviewButtons();
+      this.updateStatus('Previewing MIDI…');
+
+      // Best-effort: reset UI after playback ends (SoundfontMIDIPlayer self-stops)
+      const duration = player.getDuration();
+      if (this.previewStopTimeout) window.clearTimeout(this.previewStopTimeout);
+      this.previewStopTimeout = window.setTimeout(() => {
+        if (this.playingPreviewIndex === index) {
+          this.stopPreview(false);
+          this.updateStatus('Preview finished.');
+        }
+      }, Math.max(0.5, duration + 0.5) * 1000);
+    } catch (error) {
+      this.updateStatus(`Preview error: ${error instanceof Error ? error.message : 'Unknown error'}`);
+      this.stopPreview(false);
+    }
+  }
+
+  private stopPreview(updateStatus: boolean): void {
+    if (this.previewStopTimeout) {
+      window.clearTimeout(this.previewStopTimeout);
+      this.previewStopTimeout = null;
+    }
+    this.soundfontPlayer?.stop();
+    this.playingPreviewIndex = null;
+    this.soundfontStopBtn.disabled = true;
+    this.updatePreviewButtons();
+    if (updateStatus) this.updateStatus('Preview stopped.');
+  }
+
   public async selectResult(index: number): Promise<void> {
     if (index < 0 || index >= this.searchResults.length) return;
 
     // Stop any playing Motif audio
     this.handleMotifStop();
+    // Stop any playing preview audio
+    this.stopPreview(false);
 
     this.selectedResultIndex = index;
     const result = this.searchResults[index];
@@ -390,29 +458,6 @@ class MotifApp {
     }
   }
 
-  // Preview player handlers
-  private async handleSoundfontPlay(): Promise<void> {
-    if (!this.currentMIDI) return;
-    try {
-      // Ensure audio is unlocked (user gesture context)
-      const player = await this.ensureAudioReady();
-      await player.play();
-      this.soundfontPlayBtn.disabled = true;
-      this.soundfontStopBtn.disabled = false;
-      this.updateStatus('Previewing MIDI...');
-    } catch (error) {
-      this.updateStatus(`Preview error: ${error instanceof Error ? error.message : 'Unknown error'}`);
-    }
-    this.updateIOSAudioBanner();
-  }
-
-  private handleSoundfontStop(): void {
-    this.soundfontPlayer?.stop();
-    this.soundfontPlayBtn.disabled = false;
-    this.soundfontStopBtn.disabled = true;
-    this.updateStatus('Preview stopped.');
-  }
-
   // Motif handlers
   private async handleMotif(): Promise<void> {
     console.log('Motif Generate & Play button clicked');
@@ -510,14 +555,12 @@ class MotifApp {
   }
 
   private enablePlayerControls(): void {
-    this.soundfontPlayBtn.disabled = false;
     this.motifBtn.disabled = false;
     this.nextResultBtn.disabled = this.searchResults.length <= 1;
     this.copyLinkBtn.disabled = this.searchResults.length === 0;
   }
 
   private disablePlayerControls(): void {
-    this.soundfontPlayBtn.disabled = true;
     this.soundfontStopBtn.disabled = true;
     this.motifBtn.disabled = true;
     this.motifStopBtn.disabled = true;