Add embeddable /embed widget and copy-paste snippet.
This commit is contained in:
b1rdmania
@@ -16,6 +16,26 @@ MOTIF is a small experiment in **music-as-code**: treat MIDI as structural data,
|
|||||||
|
|
||||||
Note: if the backend isn’t deployed/configured for the demo environment, search/fetch won’t work from the hosted URL. Run locally for the full experience.
|
Note: if the backend isn’t deployed/configured for the demo environment, search/fetch won’t work from the hosted URL. Run locally for the full experience.
|
||||||
|
|
||||||
|
## Use on your website (embed)
|
||||||
|
|
||||||
|
MOTIF includes an embeddable widget page at **`/embed`**. It generates audio in the user’s browser (no audio files needed).
|
||||||
|
|
||||||
|
Example:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<iframe
|
||||||
|
src="https://YOUR_DOMAIN/embed?song=Hotel%20California"
|
||||||
|
width="420"
|
||||||
|
height="260"
|
||||||
|
style="border:0;border-radius:12px;overflow:hidden"
|
||||||
|
allow="autoplay"
|
||||||
|
></iframe>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Embed parameters (v1)
|
||||||
|
- **`song`**: the query to load (e.g. `Hotel%20California`)\n+- **`volume`**: preview volume `0..1` (optional)\n+- **`motifVolume`**: motif volume `0..1` (optional)
|
||||||
|
|
||||||
|
Notes:\n- Autoplay is best-effort; iOS/Safari requires a user gesture before sound.\n
|
||||||
## Features
|
## Features
|
||||||
|
|
||||||
- **MIDI search** (currently BitMidi; additional sources optional)
|
- **MIDI search** (currently BitMidi; additional sources optional)
|
||||||
|
|||||||
+223
@@ -0,0 +1,223 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
||||||
|
<title>MOTIF Embed</title>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--bg: #0b0b0b;
|
||||||
|
--surface: #151515;
|
||||||
|
--border: #2a2a2a;
|
||||||
|
--text: #eaeaea;
|
||||||
|
--text-dim: #a0a0a0;
|
||||||
|
--accent: #00ff88;
|
||||||
|
--accent2: #ffaa44;
|
||||||
|
--radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
* { box-sizing: border-box; }
|
||||||
|
html, body { height: 100%; }
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||||
|
background:
|
||||||
|
radial-gradient(900px 420px at 50% -180px, rgba(0, 255, 136, 0.10), transparent 60%),
|
||||||
|
radial-gradient(900px 420px at 110% 20%, rgba(255, 170, 68, 0.08), transparent 55%),
|
||||||
|
var(--bg);
|
||||||
|
color: var(--text);
|
||||||
|
padding: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
background: rgba(21, 21, 21, 0.88);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
box-shadow: 0 18px 80px rgba(0,0,0,0.55);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
padding: 12px 12px 10px 12px;
|
||||||
|
border-bottom: 1px solid rgba(255,255,255,0.06);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
.dot {
|
||||||
|
width: 9px; height: 9px; border-radius: 50%;
|
||||||
|
background: var(--accent);
|
||||||
|
box-shadow: 0 0 18px rgba(0,255,136,0.25);
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 14px;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
.subtitle {
|
||||||
|
margin-left: auto;
|
||||||
|
color: var(--text-dim);
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
main { padding: 12px; }
|
||||||
|
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
|
||||||
|
|
||||||
|
input[type="text"] {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 160px;
|
||||||
|
background: rgba(0,0,0,0.25);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
color: var(--text);
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 10px 10px;
|
||||||
|
font-size: 16px; /* iOS zoom prevention */
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
background: #1b1b1b;
|
||||||
|
color: var(--text);
|
||||||
|
padding: 10px 12px;
|
||||||
|
font-family: inherit;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
|
||||||
|
}
|
||||||
|
button:hover:not(:disabled) {
|
||||||
|
transform: translateY(-1px);
|
||||||
|
border-color: #444;
|
||||||
|
box-shadow: 0 10px 40px rgba(0,0,0,0.45);
|
||||||
|
}
|
||||||
|
button:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }
|
||||||
|
button.primary {
|
||||||
|
background: var(--accent);
|
||||||
|
color: #000;
|
||||||
|
border-color: rgba(0,255,136,0.75);
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status {
|
||||||
|
margin-top: 10px;
|
||||||
|
padding: 10px 12px;
|
||||||
|
border-left: 3px solid var(--accent);
|
||||||
|
background: rgba(0,0,0,0.22);
|
||||||
|
border-radius: 10px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--text-dim);
|
||||||
|
min-height: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section {
|
||||||
|
margin-top: 12px;
|
||||||
|
border-top: 1px solid rgba(255,255,255,0.06);
|
||||||
|
padding-top: 12px;
|
||||||
|
}
|
||||||
|
.sectionTitle {
|
||||||
|
font-size: 12px;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--text);
|
||||||
|
margin: 0 0 8px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
@media (max-width: 440px) {
|
||||||
|
.controls { grid-template-columns: 1fr; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel {
|
||||||
|
border: 1px solid rgba(255,255,255,0.08);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 10px;
|
||||||
|
background: rgba(0,0,0,0.18);
|
||||||
|
}
|
||||||
|
.panel h2 {
|
||||||
|
margin: 0 0 6px 0;
|
||||||
|
font-size: 13px;
|
||||||
|
color: var(--accent);
|
||||||
|
}
|
||||||
|
.panel p {
|
||||||
|
margin: 0 0 10px 0;
|
||||||
|
color: var(--text-dim);
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.panel.motif h2 { color: var(--accent2); }
|
||||||
|
|
||||||
|
.btnRow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
|
||||||
|
.btnRow button { flex: 1; min-width: 110px; }
|
||||||
|
|
||||||
|
.sliderRow { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
|
||||||
|
.sliderRow label { font-size: 12px; color: var(--text-dim); min-width: 52px; }
|
||||||
|
.sliderRow input[type="range"] { flex: 1; }
|
||||||
|
|
||||||
|
.footnote {
|
||||||
|
margin-top: 10px;
|
||||||
|
font-size: 11px;
|
||||||
|
color: rgba(255,255,255,0.55);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="card">
|
||||||
|
<header>
|
||||||
|
<div class="dot"></div>
|
||||||
|
<h1>MOTIF</h1>
|
||||||
|
<div class="subtitle">Embed</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<div class="row">
|
||||||
|
<input id="songInput" type="text" placeholder="Song (e.g. Hotel California)" />
|
||||||
|
<button id="loadBtn" class="primary">Load</button>
|
||||||
|
<button id="nextBtn" disabled>Next</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="status" class="status">Ready.</div>
|
||||||
|
|
||||||
|
<div class="section">
|
||||||
|
<p class="sectionTitle">Playback</p>
|
||||||
|
<div class="controls">
|
||||||
|
<div class="panel">
|
||||||
|
<h2>Preview</h2>
|
||||||
|
<p>Play the original MIDI (piano).</p>
|
||||||
|
<div class="btnRow">
|
||||||
|
<button id="previewPlayBtn" disabled class="primary">Play</button>
|
||||||
|
<button id="previewStopBtn" disabled>Stop</button>
|
||||||
|
</div>
|
||||||
|
<div class="sliderRow">
|
||||||
|
<label for="previewVol">Volume</label>
|
||||||
|
<input id="previewVol" type="range" min="0" max="1" step="0.01" value="0.8" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="panel motif">
|
||||||
|
<h2>Variation</h2>
|
||||||
|
<p>Generate a chiptune-ish Motif.</p>
|
||||||
|
<div class="btnRow">
|
||||||
|
<button id="motifPlayBtn" disabled class="primary">Generate & Play</button>
|
||||||
|
<button id="motifStopBtn" disabled>Stop</button>
|
||||||
|
</div>
|
||||||
|
<div class="sliderRow">
|
||||||
|
<label for="motifVol">Volume</label>
|
||||||
|
<input id="motifVol" type="range" min="0" max="1" step="0.01" value="0.35" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="footnote">
|
||||||
|
Note: autoplay is best-effort; iOS/Safari requires a tap before sound.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="module" src="/src/embed.ts"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
+70
@@ -541,6 +541,55 @@
|
|||||||
transition: width 0.1s linear;
|
transition: width 0.1s linear;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Use on your website */
|
||||||
|
.embed-card {
|
||||||
|
background: var(--color-surface);
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
padding: calc(var(--spacing-unit) * 3);
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
}
|
||||||
|
.embed-row {
|
||||||
|
display: flex;
|
||||||
|
gap: calc(var(--spacing-unit) * 1.5);
|
||||||
|
align-items: flex-start;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.embed-row button {
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.codeblock {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 260px;
|
||||||
|
margin: 0;
|
||||||
|
padding: calc(var(--spacing-unit) * 2);
|
||||||
|
border-radius: calc(var(--radius) + 2px);
|
||||||
|
background: rgba(0,0,0,0.35);
|
||||||
|
border: 1px solid rgba(255,255,255,0.08);
|
||||||
|
overflow: auto;
|
||||||
|
box-shadow: var(--shadow-sm);
|
||||||
|
}
|
||||||
|
.codeblock code {
|
||||||
|
font-size: 12px;
|
||||||
|
color: rgba(255,255,255,0.85);
|
||||||
|
white-space: pre;
|
||||||
|
}
|
||||||
|
.embed-hint {
|
||||||
|
margin-top: calc(var(--spacing-unit) * 1.5);
|
||||||
|
color: var(--color-text-dim);
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
.embed-hint strong {
|
||||||
|
color: var(--color-text);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.copy-toast {
|
||||||
|
margin-left: auto;
|
||||||
|
font-size: 12px;
|
||||||
|
color: rgba(0,255,136,0.85);
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.engine-selector {
|
.engine-selector {
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
@@ -647,6 +696,27 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="section" id="embedSection" style="display:none;">
|
||||||
|
<div class="section-header">
|
||||||
|
<h3 class="section-title">Use on your website</h3>
|
||||||
|
<p class="section-subtitle">Embed this generator as a widget.</p>
|
||||||
|
</div>
|
||||||
|
<div class="divider"></div>
|
||||||
|
|
||||||
|
<div class="embed-card">
|
||||||
|
<div class="embed-row">
|
||||||
|
<pre class="codeblock"><code id="embedCode"><iframe src="..."></iframe></code></pre>
|
||||||
|
<div style="display:flex; flex-direction:column; gap: calc(var(--spacing-unit) * 1.5);">
|
||||||
|
<button id="copyEmbedBtn" class="primary" type="button">Copy embed</button>
|
||||||
|
<span id="copyToast" class="copy-toast">Copied</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="embed-hint">
|
||||||
|
<strong>Tip:</strong> iOS/Safari requires a tap before audio can start. Add <code>allow="autoplay"</code> and expect a user gesture.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
+242
@@ -0,0 +1,242 @@
|
|||||||
|
import { MIDIService } from './services/MIDIService';
|
||||||
|
import { MIDIParser } from './midi/MIDIParser';
|
||||||
|
import { SoundfontMIDIPlayer } from './synthesis/SoundfontMIDIPlayer';
|
||||||
|
import { MotifEngine } from './core/MotifEngine';
|
||||||
|
import type { NoteEvent } from './types';
|
||||||
|
|
||||||
|
type SearchResult = {
|
||||||
|
title: string;
|
||||||
|
midiUrl: string;
|
||||||
|
confidence: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
function qs<T extends HTMLElement>(id: string): T {
|
||||||
|
const el = document.getElementById(id);
|
||||||
|
if (!el) throw new Error(`Missing element #${id}`);
|
||||||
|
return el as T;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getParam(name: string): string | null {
|
||||||
|
return new URLSearchParams(window.location.search).get(name);
|
||||||
|
}
|
||||||
|
|
||||||
|
function setStatus(msg: string): void {
|
||||||
|
qs<HTMLElement>('status').textContent = msg;
|
||||||
|
}
|
||||||
|
|
||||||
|
function clamp01(v: number): number {
|
||||||
|
return Math.max(0, Math.min(1, v));
|
||||||
|
}
|
||||||
|
|
||||||
|
async function main(): Promise<void> {
|
||||||
|
const songInput = qs<HTMLInputElement>('songInput');
|
||||||
|
const loadBtn = qs<HTMLButtonElement>('loadBtn');
|
||||||
|
const nextBtn = qs<HTMLButtonElement>('nextBtn');
|
||||||
|
|
||||||
|
const previewPlayBtn = qs<HTMLButtonElement>('previewPlayBtn');
|
||||||
|
const previewStopBtn = qs<HTMLButtonElement>('previewStopBtn');
|
||||||
|
const previewVol = qs<HTMLInputElement>('previewVol');
|
||||||
|
|
||||||
|
const motifPlayBtn = qs<HTMLButtonElement>('motifPlayBtn');
|
||||||
|
const motifStopBtn = qs<HTMLButtonElement>('motifStopBtn');
|
||||||
|
const motifVol = qs<HTMLInputElement>('motifVol');
|
||||||
|
|
||||||
|
const midiService = new MIDIService();
|
||||||
|
const audioContext = new AudioContext();
|
||||||
|
const previewPlayer = new SoundfontMIDIPlayer(audioContext);
|
||||||
|
const motifEngine = new MotifEngine();
|
||||||
|
|
||||||
|
let results: SearchResult[] = [];
|
||||||
|
let selectedIndex = 0;
|
||||||
|
let currentEvents: NoteEvent[] | null = null;
|
||||||
|
let isMotifPlaying = false;
|
||||||
|
|
||||||
|
function disableAll(): void {
|
||||||
|
previewPlayBtn.disabled = true;
|
||||||
|
previewStopBtn.disabled = true;
|
||||||
|
motifPlayBtn.disabled = true;
|
||||||
|
motifStopBtn.disabled = true;
|
||||||
|
nextBtn.disabled = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
function stopEverything(): void {
|
||||||
|
previewPlayer.stop();
|
||||||
|
motifEngine.stop();
|
||||||
|
previewPlayBtn.disabled = currentEvents === null;
|
||||||
|
previewStopBtn.disabled = true;
|
||||||
|
motifStopBtn.disabled = true;
|
||||||
|
isMotifPlaying = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function loadIndex(index: number): Promise<void> {
|
||||||
|
if (index < 0 || index >= results.length) return;
|
||||||
|
selectedIndex = index;
|
||||||
|
const r = results[selectedIndex];
|
||||||
|
|
||||||
|
setStatus(`Loading: ${r.title}`);
|
||||||
|
disableAll();
|
||||||
|
|
||||||
|
try {
|
||||||
|
const midiBuffer = await midiService.fetchMIDI(r.midiUrl);
|
||||||
|
if (!midiBuffer) throw new Error('Fetch failed');
|
||||||
|
|
||||||
|
const events = MIDIParser.parseMIDI(midiBuffer);
|
||||||
|
currentEvents = events;
|
||||||
|
|
||||||
|
await previewPlayer.load(events);
|
||||||
|
previewPlayer.setVolume(clamp01(parseFloat(previewVol.value)));
|
||||||
|
|
||||||
|
setStatus(`Ready: ${r.title}`);
|
||||||
|
previewPlayBtn.disabled = false;
|
||||||
|
motifPlayBtn.disabled = false;
|
||||||
|
nextBtn.disabled = results.length <= 1;
|
||||||
|
} catch (e) {
|
||||||
|
currentEvents = null;
|
||||||
|
setStatus(`Load error: ${e instanceof Error ? e.message : 'Unknown error'}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function doSearch(): Promise<void> {
|
||||||
|
const query = songInput.value.trim();
|
||||||
|
if (!query) return;
|
||||||
|
|
||||||
|
stopEverything();
|
||||||
|
disableAll();
|
||||||
|
setStatus('Searching…');
|
||||||
|
loadBtn.disabled = true;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const r = await midiService.search(query);
|
||||||
|
results = r.map((x: any) => ({
|
||||||
|
title: x.title,
|
||||||
|
midiUrl: x.midiUrl,
|
||||||
|
confidence: x.confidence,
|
||||||
|
}));
|
||||||
|
|
||||||
|
if (results.length === 0) {
|
||||||
|
setStatus('No results found.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Pick best by confidence (backend already sorts, but keep safe)
|
||||||
|
results.sort((a, b) => (b.confidence ?? 0) - (a.confidence ?? 0));
|
||||||
|
selectedIndex = 0;
|
||||||
|
setStatus(`Found ${results.length}. Loading best match…`);
|
||||||
|
await loadIndex(0);
|
||||||
|
} catch (e) {
|
||||||
|
setStatus(`Search error: ${e instanceof Error ? e.message : 'Unknown error'}`);
|
||||||
|
} finally {
|
||||||
|
loadBtn.disabled = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
loadBtn.addEventListener('click', () => void doSearch());
|
||||||
|
songInput.addEventListener('keydown', (e) => {
|
||||||
|
if (e.key === 'Enter') void doSearch();
|
||||||
|
});
|
||||||
|
|
||||||
|
nextBtn.addEventListener('click', () => {
|
||||||
|
if (results.length <= 1) return;
|
||||||
|
const next = (selectedIndex + 1) % results.length;
|
||||||
|
void loadIndex(next);
|
||||||
|
});
|
||||||
|
|
||||||
|
previewVol.addEventListener('input', (e) => {
|
||||||
|
const v = clamp01(parseFloat((e.target as HTMLInputElement).value));
|
||||||
|
previewPlayer.setVolume(v);
|
||||||
|
});
|
||||||
|
|
||||||
|
motifVol.addEventListener('input', (e) => {
|
||||||
|
const v = clamp01(parseFloat((e.target as HTMLInputElement).value));
|
||||||
|
motifEngine.setVolume(v);
|
||||||
|
});
|
||||||
|
|
||||||
|
previewPlayBtn.addEventListener('click', async () => {
|
||||||
|
if (!currentEvents) return;
|
||||||
|
try {
|
||||||
|
motifEngine.stop();
|
||||||
|
isMotifPlaying = false;
|
||||||
|
await previewPlayer.play();
|
||||||
|
previewPlayBtn.disabled = true;
|
||||||
|
previewStopBtn.disabled = false;
|
||||||
|
motifStopBtn.disabled = true;
|
||||||
|
setStatus('Playing preview…');
|
||||||
|
} catch (e) {
|
||||||
|
setStatus(`Preview error: ${e instanceof Error ? e.message : 'Unknown error'}`);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
previewStopBtn.addEventListener('click', () => {
|
||||||
|
previewPlayer.stop();
|
||||||
|
previewPlayBtn.disabled = currentEvents === null;
|
||||||
|
previewStopBtn.disabled = true;
|
||||||
|
setStatus('Preview stopped.');
|
||||||
|
});
|
||||||
|
|
||||||
|
motifPlayBtn.addEventListener('click', async () => {
|
||||||
|
if (!currentEvents) return;
|
||||||
|
try {
|
||||||
|
// Stop preview and generate variation
|
||||||
|
previewPlayer.stop();
|
||||||
|
previewPlayBtn.disabled = false;
|
||||||
|
previewStopBtn.disabled = true;
|
||||||
|
|
||||||
|
motifPlayBtn.disabled = true;
|
||||||
|
setStatus('Generating variation…');
|
||||||
|
|
||||||
|
await motifEngine.generateFromMIDI(currentEvents, 'procedural');
|
||||||
|
motifEngine.setVolume(clamp01(parseFloat(motifVol.value)));
|
||||||
|
await motifEngine.play();
|
||||||
|
|
||||||
|
isMotifPlaying = true;
|
||||||
|
motifStopBtn.disabled = false;
|
||||||
|
setStatus('Playing variation…');
|
||||||
|
} catch (e) {
|
||||||
|
motifPlayBtn.disabled = false;
|
||||||
|
setStatus(`Motif error: ${e instanceof Error ? e.message : 'Unknown error'}`);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
motifStopBtn.addEventListener('click', () => {
|
||||||
|
motifEngine.stop();
|
||||||
|
isMotifPlaying = false;
|
||||||
|
motifStopBtn.disabled = true;
|
||||||
|
motifPlayBtn.disabled = currentEvents === null;
|
||||||
|
setStatus('Variation stopped.');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Initialize from query params
|
||||||
|
const song = getParam('song');
|
||||||
|
const volume = getParam('volume');
|
||||||
|
const motifVolume = getParam('motifVolume');
|
||||||
|
|
||||||
|
if (volume) {
|
||||||
|
previewVol.value = String(clamp01(parseFloat(volume)));
|
||||||
|
previewPlayer.setVolume(parseFloat(previewVol.value));
|
||||||
|
}
|
||||||
|
if (motifVolume) {
|
||||||
|
motifVol.value = String(clamp01(parseFloat(motifVolume)));
|
||||||
|
}
|
||||||
|
|
||||||
|
if (song) {
|
||||||
|
songInput.value = song;
|
||||||
|
setStatus('Loading from URL…');
|
||||||
|
// best-effort: do not autoplay audio, just load the MIDI
|
||||||
|
void doSearch();
|
||||||
|
} else {
|
||||||
|
setStatus('Ready. Add ?song=Hotel%20California to auto-load.');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Defensive: stop audio when the iframe/tab is hidden
|
||||||
|
document.addEventListener('visibilitychange', () => {
|
||||||
|
if (document.hidden) {
|
||||||
|
stopEverything();
|
||||||
|
if (isMotifPlaying) {
|
||||||
|
motifPlayBtn.disabled = currentEvents === null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
void main();
|
||||||
|
|
||||||
+65
-2
@@ -41,6 +41,12 @@ class MotifApp {
|
|||||||
|
|
||||||
private nextResultBtn!: HTMLButtonElement;
|
private nextResultBtn!: HTMLButtonElement;
|
||||||
|
|
||||||
|
// Embed snippet UI
|
||||||
|
private embedSection: HTMLElement | null = null;
|
||||||
|
private embedCodeEl: HTMLElement | null = null;
|
||||||
|
private copyEmbedBtn: HTMLButtonElement | null = null;
|
||||||
|
private copyToast: HTMLElement | null = null;
|
||||||
|
|
||||||
private searchResults: any[] = [];
|
private searchResults: any[] = [];
|
||||||
private selectedResultIndex = 0;
|
private selectedResultIndex = 0;
|
||||||
private currentMIDI: { events: NoteEvent[], metadata: any } | null = null;
|
private currentMIDI: { events: NoteEvent[], metadata: any } | null = null;
|
||||||
@@ -86,6 +92,12 @@ class MotifApp {
|
|||||||
this.motifDuration = document.getElementById('motifDuration')!;
|
this.motifDuration = document.getElementById('motifDuration')!;
|
||||||
|
|
||||||
this.nextResultBtn = document.getElementById('nextResultBtn') as HTMLButtonElement;
|
this.nextResultBtn = document.getElementById('nextResultBtn') as HTMLButtonElement;
|
||||||
|
|
||||||
|
// Optional embed UI (only present on main page)
|
||||||
|
this.embedSection = document.getElementById('embedSection');
|
||||||
|
this.embedCodeEl = document.getElementById('embedCode');
|
||||||
|
this.copyEmbedBtn = document.getElementById('copyEmbedBtn') as HTMLButtonElement | null;
|
||||||
|
this.copyToast = document.getElementById('copyToast');
|
||||||
}
|
}
|
||||||
|
|
||||||
private setupEventListeners(): void {
|
private setupEventListeners(): void {
|
||||||
@@ -121,6 +133,9 @@ class MotifApp {
|
|||||||
this.motifProgressBar.addEventListener('change', seekHandler);
|
this.motifProgressBar.addEventListener('change', seekHandler);
|
||||||
|
|
||||||
this.nextResultBtn.addEventListener('click', () => this.handleNextResult());
|
this.nextResultBtn.addEventListener('click', () => this.handleNextResult());
|
||||||
|
|
||||||
|
// Embed snippet copy
|
||||||
|
this.copyEmbedBtn?.addEventListener('click', () => void this.copyEmbedSnippet());
|
||||||
}
|
}
|
||||||
|
|
||||||
private async handleSearch(): Promise<void> {
|
private async handleSearch(): Promise<void> {
|
||||||
@@ -236,6 +251,8 @@ class MotifApp {
|
|||||||
<strong>Notes:</strong> ${events.length} |
|
<strong>Notes:</strong> ${events.length} |
|
||||||
<strong>Tempo:</strong> ${metadata.tempo}bpm
|
<strong>Tempo:</strong> ${metadata.tempo}bpm
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
this.updateEmbedSnippet(result.title);
|
||||||
|
|
||||||
this.playerSection.classList.add('visible');
|
this.playerSection.classList.add('visible');
|
||||||
this.enablePlayerControls();
|
this.enablePlayerControls();
|
||||||
@@ -279,8 +296,8 @@ class MotifApp {
|
|||||||
this.motifBtn.disabled = true;
|
this.motifBtn.disabled = true;
|
||||||
|
|
||||||
console.log('Calling generateFromMIDI with', this.currentMIDI.events.length, 'events');
|
console.log('Calling generateFromMIDI with', this.currentMIDI.events.length, 'events');
|
||||||
// Use the current MIDI data directly in passthrough mode
|
// Generate a variation using the procedural role-mapping mode
|
||||||
await this.motifEngine.generateFromMIDI(this.currentMIDI.events, 'passthrough');
|
await this.motifEngine.generateFromMIDI(this.currentMIDI.events, 'procedural');
|
||||||
|
|
||||||
console.log('Calling motifEngine.play()');
|
console.log('Calling motifEngine.play()');
|
||||||
await this.motifEngine.play();
|
await this.motifEngine.play();
|
||||||
@@ -375,6 +392,52 @@ class MotifApp {
|
|||||||
private updateStatus(message: string): void {
|
private updateStatus(message: string): void {
|
||||||
this.status.textContent = message;
|
this.status.textContent = message;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private updateEmbedSnippet(songTitle: string): void {
|
||||||
|
if (!this.embedSection || !this.embedCodeEl) return;
|
||||||
|
|
||||||
|
const origin = window.location.origin;
|
||||||
|
const url = `${origin}/embed?song=${encodeURIComponent(songTitle)}`;
|
||||||
|
|
||||||
|
const snippet = `<iframe\n src=\"${url}\"\n width=\"420\"\n height=\"260\"\n style=\"border:0;border-radius:12px;overflow:hidden\"\n allow=\"autoplay\"\n></iframe>`;
|
||||||
|
|
||||||
|
this.embedCodeEl.textContent = snippet;
|
||||||
|
this.embedSection.style.display = 'block';
|
||||||
|
if (this.copyToast) this.copyToast.style.display = 'none';
|
||||||
|
}
|
||||||
|
|
||||||
|
private async copyEmbedSnippet(): Promise<void> {
|
||||||
|
if (!this.embedCodeEl) return;
|
||||||
|
|
||||||
|
const text = this.embedCodeEl.textContent || '';
|
||||||
|
if (!text.trim()) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
if (navigator.clipboard?.writeText) {
|
||||||
|
await navigator.clipboard.writeText(text);
|
||||||
|
} else {
|
||||||
|
// Fallback
|
||||||
|
const ta = document.createElement('textarea');
|
||||||
|
ta.value = text;
|
||||||
|
ta.style.position = 'fixed';
|
||||||
|
ta.style.left = '-9999px';
|
||||||
|
document.body.appendChild(ta);
|
||||||
|
ta.focus();
|
||||||
|
ta.select();
|
||||||
|
document.execCommand('copy');
|
||||||
|
document.body.removeChild(ta);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.copyToast) {
|
||||||
|
this.copyToast.style.display = 'inline';
|
||||||
|
window.setTimeout(() => {
|
||||||
|
if (this.copyToast) this.copyToast.style.display = 'none';
|
||||||
|
}, 1200);
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
this.updateStatus('Copy failed. Select the snippet and copy manually.');
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Make app globally available for onclick handlers
|
// Make app globally available for onclick handlers
|
||||||
|
|||||||
@@ -22,6 +22,10 @@
|
|||||||
"src": "/health",
|
"src": "/health",
|
||||||
"dest": "server/src/server.ts"
|
"dest": "server/src/server.ts"
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"src": "/embed",
|
||||||
|
"dest": "/embed.html"
|
||||||
|
},
|
||||||
{ "handle": "filesystem" },
|
{ "handle": "filesystem" },
|
||||||
{
|
{
|
||||||
"src": "/(.*)",
|
"src": "/(.*)",
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
import { defineConfig } from 'vite'
|
import { defineConfig } from 'vite'
|
||||||
|
import { resolve } from 'node:path'
|
||||||
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
server: {
|
server: {
|
||||||
@@ -7,5 +8,11 @@ export default defineConfig({
|
|||||||
build: {
|
build: {
|
||||||
outDir: 'dist',
|
outDir: 'dist',
|
||||||
sourcemap: true,
|
sourcemap: true,
|
||||||
|
rollupOptions: {
|
||||||
|
input: {
|
||||||
|
main: resolve(__dirname, 'index.html'),
|
||||||
|
embed: resolve(__dirname, 'embed.html'),
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
Reference in New Issue
Block a user