diff --git a/index.html b/index.html index 6df58b8..e2c7157 100644 --- a/index.html +++ b/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 @@ Title Source Duration + Preview + +
+
+ + +
+
+ + +
+
@@ -862,26 +919,6 @@

Select a MIDI file from search results to enable playback

-
-
-

Preview

-

Review the MIDI before generation.

-
-
- -
- - -
- - -
-
- -
-
-
-

Synthesis Engine

diff --git a/src/main.ts b/src/main.ts index adfcd0d..f669937 100644 --- a/src/main.ts +++ b/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 - this.soundfontPlayBtn.addEventListener('click', () => this.handleSoundfontPlay()); - this.soundfontStopBtn.addEventListener('click', () => this.handleSoundfontStop()); + // Preview player (row buttons in results table) + this.soundfontStopBtn.addEventListener('click', () => this.stopPreview(true)); 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 { ${result.title} ${result.source} ${result.parsed ? Math.round(result.parsed.durationSec) + 's' : '?'} + `; // 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 { + 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 { 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 { - 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 { 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;