Impaczus/motif
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move MIDI preview playback into results table.

Browse Source 
Adds per-row Play/Stop buttons and replaces the standalone preview box with compact preview volume/stop controls.
This commit is contained in:
b1rdmania
2025-12-26 18:42:31 +00:00
parent ba34f66c91
commit f437bba281
2 changed files with 130 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+57 -20
View File
@@ -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
+73 -30
View File
@@ -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 {
<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;