Add /play share page and X share links.
Includes a UX test page and Vercel/Vite routing for share URLs.
This commit is contained in:
b1rdmania
@@ -0,0 +1,197 @@
|
||||
<!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" />
|
||||
<title>MOTIF - Play</title>
|
||||
<meta name="description" content="Play a shared MOTIF chiptune and generate your own." />
|
||||
<style>
|
||||
:root {
|
||||
--color-bg: #0a0a0a;
|
||||
--color-surface: #141414;
|
||||
--color-surface-elevated: #1a1a1a;
|
||||
--color-border: #2a2a2a;
|
||||
--color-text: #e8e8e8;
|
||||
--color-text-dim: #999;
|
||||
--color-accent-primary: #00ff88;
|
||||
--color-accent-secondary: #ffaa44;
|
||||
--radius: 10px;
|
||||
--shadow: 0 10px 40px rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 22px 16px;
|
||||
background:
|
||||
radial-gradient(1000px 600px at 50% -150px, rgba(0, 255, 136, 0.12), transparent 60%),
|
||||
radial-gradient(800px 600px at 110% 20%, rgba(255, 170, 68, 0.08), transparent 55%),
|
||||
var(--color-bg);
|
||||
color: var(--color-text);
|
||||
font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 720px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.brand {
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--color-accent-primary);
|
||||
text-shadow: 0 0 20px rgba(0, 255, 136, 0.25);
|
||||
}
|
||||
|
||||
.sub {
|
||||
color: var(--color-text-dim);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: rgba(20, 20, 20, 0.92);
|
||||
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow);
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0 0 6px 0;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
#status {
|
||||
margin-top: 10px;
|
||||
font-size: 13px;
|
||||
color: var(--color-text-dim);
|
||||
min-height: 18px;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
button, a.button {
|
||||
appearance: none;
|
||||
border: 1px solid rgba(255, 255, 255, 0.14);
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
color: var(--color-text);
|
||||
padding: 12px 14px;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
font-weight: 650;
|
||||
font-size: 14px;
|
||||
transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease, background 120ms ease;
|
||||
text-decoration: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
flex: 1;
|
||||
min-width: 140px;
|
||||
}
|
||||
|
||||
button.primary {
|
||||
background: var(--color-accent-secondary);
|
||||
border-color: rgba(255, 170, 68, 0.6);
|
||||
color: #000;
|
||||
}
|
||||
|
||||
button:hover:not(:disabled), a.button:hover {
|
||||
transform: translateY(-1px);
|
||||
border-color: rgba(255, 255, 255, 0.22);
|
||||
box-shadow: 0 16px 60px rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
opacity: 0.45;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: 12px;
|
||||
color: var(--color-text-dim);
|
||||
min-width: 54px;
|
||||
}
|
||||
|
||||
input[type="range"] {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
footer {
|
||||
margin-top: 14px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: rgba(0, 255, 136, 0.85);
|
||||
text-decoration: none;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
footer a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<header>
|
||||
<div>
|
||||
<div class="brand">MOTIF</div>
|
||||
<div class="sub">Shared chiptune player</div>
|
||||
</div>
|
||||
<div class="sub" id="shareHint">/play</div>
|
||||
</header>
|
||||
|
||||
<div class="card">
|
||||
<h1 id="title">Loading…</h1>
|
||||
<div class="controls">
|
||||
<button id="playBtn" class="primary" disabled>Play</button>
|
||||
<button id="stopBtn" disabled>Stop</button>
|
||||
</div>
|
||||
<div class="row">
|
||||
<label for="volume">Volume</label>
|
||||
<input id="volume" type="range" min="0" max="1" step="0.01" value="0.35" />
|
||||
</div>
|
||||
<div id="status"></div>
|
||||
<footer>
|
||||
<a id="generateOwn" href="/">Generate your own</a>
|
||||
<a href="/" aria-label="Back to MOTIF home">Home</a>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="module" src="/src/play.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -27,7 +27,10 @@ export class MotifEngine {
|
||||
this.roleMapper = new RoleMapper();
|
||||
}
|
||||
|
||||
async generateFromMIDI(events: NoteEvent[], transformMode: 'passthrough' | 'procedural' = 'passthrough'): Promise<void> {
|
||||
async generateFromMIDI(
|
||||
events: NoteEvent[],
|
||||
transformMode: 'passthrough' | 'procedural' = 'passthrough'
|
||||
): Promise<void> {
|
||||
// Initialize audio context using shared unlock (iOS compatibility)
|
||||
if (!this.audioContext) {
|
||||
this.audioContext = await unlockAudio();
|
||||
|
||||
+144
@@ -0,0 +1,144 @@
|
||||
import { MIDIService } from './services/MIDIService';
|
||||
import { MIDIParser } from './midi/MIDIParser';
|
||||
import { MotifEngine } from './core/MotifEngine';
|
||||
import type { NoteEvent } from './types';
|
||||
|
||||
function qs(id: string): HTMLElement {
|
||||
const el = document.getElementById(id);
|
||||
if (!el) throw new Error(`Missing element #${id}`);
|
||||
return el;
|
||||
}
|
||||
|
||||
function getParam(name: string): string | null {
|
||||
const url = new URL(window.location.href);
|
||||
return url.searchParams.get(name);
|
||||
}
|
||||
|
||||
function buildMidiUrlFromParams(): { midiUrl: string | null; title: string } {
|
||||
const u = getParam('u');
|
||||
const src = getParam('src');
|
||||
const id = getParam('id');
|
||||
const title = getParam('title') || 'Shared MOTIF';
|
||||
|
||||
if (u) return { midiUrl: u, title };
|
||||
|
||||
// Short-link form (no server storage): reconstruct known providers.
|
||||
if (src === 'bitmidi' && id && /^\d+$/.test(id)) {
|
||||
return { midiUrl: `https://bitmidi.com/uploads/${id}.mid`, title };
|
||||
}
|
||||
|
||||
return { midiUrl: null, title };
|
||||
}
|
||||
|
||||
async function copyToClipboard(text: string): Promise<void> {
|
||||
if (navigator.clipboard?.writeText) {
|
||||
await navigator.clipboard.writeText(text);
|
||||
return;
|
||||
}
|
||||
|
||||
const ta = document.createElement('textarea');
|
||||
ta.value = text;
|
||||
ta.style.position = 'fixed';
|
||||
ta.style.left = '-9999px';
|
||||
ta.style.top = '0';
|
||||
document.body.appendChild(ta);
|
||||
ta.focus();
|
||||
ta.select();
|
||||
document.execCommand('copy');
|
||||
document.body.removeChild(ta);
|
||||
}
|
||||
|
||||
async function main(): Promise<void> {
|
||||
const titleEl = qs('title');
|
||||
const statusEl = qs('status');
|
||||
const playBtn = qs('playBtn') as HTMLButtonElement;
|
||||
const stopBtn = qs('stopBtn') as HTMLButtonElement;
|
||||
const volumeEl = qs('volume') as HTMLInputElement;
|
||||
const generateOwn = qs('generateOwn') as HTMLAnchorElement;
|
||||
const shareHint = qs('shareHint');
|
||||
|
||||
const { midiUrl: u, title } = buildMidiUrlFromParams();
|
||||
|
||||
titleEl.textContent = title;
|
||||
shareHint.textContent = u ? 'Ready' : 'Missing MIDI URL';
|
||||
|
||||
// Set CTA back to home, prefilling search if we have a title.
|
||||
generateOwn.href = title ? `/?song=${encodeURIComponent(title)}` : '/';
|
||||
|
||||
if (!u) {
|
||||
statusEl.textContent = 'Missing link data (u=...).';
|
||||
playBtn.disabled = true;
|
||||
stopBtn.disabled = true;
|
||||
return;
|
||||
}
|
||||
|
||||
const midiService = new MIDIService();
|
||||
const motifEngine = new MotifEngine();
|
||||
let events: NoteEvent[] | null = null;
|
||||
let isPlaying = false;
|
||||
|
||||
statusEl.textContent = 'Loading MIDI…';
|
||||
try {
|
||||
const buf = await midiService.fetchMIDI(u);
|
||||
if (!buf) throw new Error('Failed to fetch MIDI');
|
||||
events = MIDIParser.parseMIDI(buf);
|
||||
statusEl.textContent = 'Ready. Tap Play.';
|
||||
playBtn.disabled = false;
|
||||
} catch (e) {
|
||||
statusEl.textContent = `Load error: ${e instanceof Error ? e.message : 'Unknown error'}`;
|
||||
playBtn.disabled = true;
|
||||
stopBtn.disabled = true;
|
||||
return;
|
||||
}
|
||||
|
||||
function setUiPlaying(playing: boolean): void {
|
||||
isPlaying = playing;
|
||||
playBtn.disabled = playing;
|
||||
stopBtn.disabled = !playing;
|
||||
}
|
||||
|
||||
volumeEl.addEventListener('input', () => {
|
||||
const vol = Number.parseFloat(volumeEl.value);
|
||||
motifEngine.setVolume(vol);
|
||||
});
|
||||
|
||||
stopBtn.addEventListener('click', () => {
|
||||
motifEngine.stop();
|
||||
setUiPlaying(false);
|
||||
statusEl.textContent = 'Stopped.';
|
||||
});
|
||||
|
||||
playBtn.addEventListener('click', async () => {
|
||||
if (!events || isPlaying) return;
|
||||
try {
|
||||
setUiPlaying(true);
|
||||
statusEl.textContent = 'Generating…';
|
||||
|
||||
// Match main page output: passthrough → existing SynthesisEngine.
|
||||
await motifEngine.generateFromMIDI(events, 'passthrough');
|
||||
motifEngine.setVolume(Number.parseFloat(volumeEl.value));
|
||||
|
||||
statusEl.textContent = 'Playing…';
|
||||
await motifEngine.play();
|
||||
} catch (e) {
|
||||
setUiPlaying(false);
|
||||
statusEl.textContent = `Play error: ${e instanceof Error ? e.message : 'Unknown error'}`;
|
||||
}
|
||||
});
|
||||
|
||||
// Small quality-of-life: let user click the header “Ready” to copy link.
|
||||
shareHint.addEventListener('click', async () => {
|
||||
try {
|
||||
await copyToClipboard(window.location.href);
|
||||
shareHint.textContent = 'Link copied';
|
||||
window.setTimeout(() => (shareHint.textContent = 'Ready'), 900);
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
});
|
||||
shareHint.style.cursor = 'pointer';
|
||||
shareHint.title = 'Click to copy link';
|
||||
}
|
||||
|
||||
void main();
|
||||
|
||||
+753
@@ -0,0 +1,753 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>MOTIF - UX Test</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg: #08080c;
|
||||
--surface: #101014;
|
||||
--surface-2: #18181f;
|
||||
--border: rgba(255,255,255,0.08);
|
||||
--text: #e8e8e8;
|
||||
--text-dim: #888;
|
||||
--neon-green: #00ff88;
|
||||
--neon-pink: #ff00aa;
|
||||
--neon-blue: #00aaff;
|
||||
--neon-orange: #ff8800;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 24px 16px;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
min-height: 100vh;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 480px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
header {
|
||||
text-align: center;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0 0 8px 0;
|
||||
color: var(--neon-green);
|
||||
text-shadow: 0 0 30px rgba(0, 255, 136, 0.4);
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.tagline {
|
||||
color: var(--text-dim);
|
||||
font-size: 15px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Search */
|
||||
.search-box {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
flex: 1;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text);
|
||||
padding: 14px 16px;
|
||||
border-radius: 10px;
|
||||
font-size: 15px;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
|
||||
input[type="text"]:focus {
|
||||
outline: none;
|
||||
border-color: var(--neon-green);
|
||||
box-shadow: 0 0 0 3px rgba(0, 255, 136, 0.1);
|
||||
}
|
||||
|
||||
input[type="text"]::placeholder {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
button {
|
||||
background: var(--surface);
|
||||
color: var(--text);
|
||||
border: 1px solid var(--border);
|
||||
padding: 14px 20px;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
button:hover:not(:disabled) {
|
||||
border-color: rgba(255,255,255,0.2);
|
||||
background: var(--surface-2);
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
button.primary {
|
||||
background: var(--neon-green);
|
||||
color: #000;
|
||||
border-color: var(--neon-green);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
button.primary:hover:not(:disabled) {
|
||||
box-shadow: 0 0 24px rgba(0, 255, 136, 0.4);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* Status */
|
||||
.status {
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
color: var(--text-dim);
|
||||
margin-bottom: 24px;
|
||||
min-height: 20px;
|
||||
}
|
||||
|
||||
.status.error {
|
||||
color: var(--neon-pink);
|
||||
}
|
||||
|
||||
/* Results */
|
||||
.results {
|
||||
display: none;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.results.visible {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.results-label {
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
color: var(--text-dim);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.result-item {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
padding: 12px 14px;
|
||||
margin-bottom: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.result-item:hover {
|
||||
border-color: rgba(255,255,255,0.15);
|
||||
background: var(--surface-2);
|
||||
}
|
||||
|
||||
.result-item.selected {
|
||||
border-color: var(--neon-green);
|
||||
box-shadow: 0 0 20px rgba(0, 255, 136, 0.15);
|
||||
}
|
||||
|
||||
.result-title {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.result-meta {
|
||||
font-size: 12px;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
/* Player Card */
|
||||
.player-card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 14px;
|
||||
padding: 20px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.player-card.visible {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.now-playing {
|
||||
text-align: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.now-playing-label {
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
color: var(--text-dim);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.now-playing-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
/* EQ Visualizer */
|
||||
.eq-visualizer {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
gap: 2px;
|
||||
height: 80px;
|
||||
background: rgba(0,0,0,0.5);
|
||||
border-radius: 8px;
|
||||
padding: 10px;
|
||||
margin-bottom: 16px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.eq-visualizer::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: repeating-linear-gradient(
|
||||
0deg,
|
||||
transparent,
|
||||
transparent 2px,
|
||||
rgba(0,0,0,0.1) 2px,
|
||||
rgba(0,0,0,0.1) 4px
|
||||
);
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.eq-bar {
|
||||
width: 6px;
|
||||
min-height: 3px;
|
||||
background: linear-gradient(to top, var(--neon-green) 0%, var(--neon-blue) 100%);
|
||||
border-radius: 2px;
|
||||
transition: height 0.05s ease-out;
|
||||
box-shadow: 0 0 8px rgba(0, 255, 136, 0.4);
|
||||
}
|
||||
|
||||
.eq-bar.hot {
|
||||
background: linear-gradient(to top, var(--neon-orange) 0%, var(--neon-pink) 100%);
|
||||
box-shadow: 0 0 8px rgba(255, 0, 170, 0.4);
|
||||
}
|
||||
|
||||
/* Player Controls */
|
||||
.player-controls {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.player-controls button {
|
||||
flex: 1;
|
||||
max-width: 140px;
|
||||
}
|
||||
|
||||
/* Share row */
|
||||
.share-row {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.share-row button {
|
||||
flex: 1;
|
||||
max-width: 140px;
|
||||
}
|
||||
.share-hint {
|
||||
margin: 0 0 16px 0;
|
||||
font-size: 12px;
|
||||
color: var(--text-dim);
|
||||
min-height: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Volume */
|
||||
.volume-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.volume-label {
|
||||
font-size: 12px;
|
||||
color: var(--text-dim);
|
||||
min-width: 50px;
|
||||
}
|
||||
|
||||
input[type="range"] {
|
||||
flex: 1;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
height: 4px;
|
||||
background: var(--surface-2);
|
||||
border-radius: 2px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input[type="range"]::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
background: var(--neon-green);
|
||||
cursor: pointer;
|
||||
box-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
|
||||
}
|
||||
|
||||
/* Mode Toggle */
|
||||
.mode-toggle {
|
||||
display: flex;
|
||||
background: var(--surface-2);
|
||||
border-radius: 8px;
|
||||
padding: 4px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.mode-btn {
|
||||
flex: 1;
|
||||
padding: 10px 12px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--text-dim);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.mode-btn:hover {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.mode-btn.active {
|
||||
background: var(--surface);
|
||||
color: var(--neon-green);
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
footer {
|
||||
text-align: center;
|
||||
margin-top: 32px;
|
||||
padding-top: 24px;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
footer p {
|
||||
font-size: 12px;
|
||||
color: var(--text-dim);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: var(--neon-green);
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<header>
|
||||
<h1>🎵 MOTIF</h1>
|
||||
<p class="tagline">Gameboy synth for any song</p>
|
||||
</header>
|
||||
|
||||
<div class="search-box">
|
||||
<input type="text" id="songInput" placeholder="Search any song..." value="Hotel California" />
|
||||
<button id="searchBtn">Search</button>
|
||||
</div>
|
||||
|
||||
<div id="status" class="status">Search for a song to get started</div>
|
||||
|
||||
<div id="results" class="results">
|
||||
<div class="results-label">Results</div>
|
||||
<div id="resultsList"></div>
|
||||
</div>
|
||||
|
||||
<div id="playerCard" class="player-card">
|
||||
<div class="now-playing">
|
||||
<div class="now-playing-label">Now Playing</div>
|
||||
<div class="now-playing-title" id="nowPlayingTitle">--</div>
|
||||
</div>
|
||||
|
||||
<div class="eq-visualizer" id="eqVisualizer"></div>
|
||||
|
||||
<div class="mode-toggle">
|
||||
<button class="mode-btn active" data-mode="preview">Preview</button>
|
||||
<button class="mode-btn" data-mode="synth">Synth Engine</button>
|
||||
</div>
|
||||
|
||||
<div class="player-controls">
|
||||
<button id="playBtn" class="primary">Play</button>
|
||||
<button id="stopBtn" disabled>Stop</button>
|
||||
</div>
|
||||
|
||||
<div class="share-row">
|
||||
<button id="copyLinkBtn" disabled>Copy link</button>
|
||||
<button id="shareXBtn" disabled>Share on X</button>
|
||||
</div>
|
||||
<div id="shareHint" class="share-hint"></div>
|
||||
|
||||
<div class="volume-row">
|
||||
<span class="volume-label">Volume</span>
|
||||
<input type="range" id="volumeSlider" min="0" max="1" step="0.01" value="0.7" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<p>UX Test Page · <a href="/">Back to main</a></p>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
import { MIDIService } from './src/services/MIDIService.ts';
|
||||
import { MIDIParser } from './src/midi/MIDIParser.ts';
|
||||
import { SoundfontMIDIPlayer } from './src/synthesis/SoundfontMIDIPlayer.ts';
|
||||
import { MotifEngine } from './src/core/MotifEngine.ts';
|
||||
import { unlockAudio } from './src/utils/audioUnlock.ts';
|
||||
|
||||
const NUM_BARS = 40;
|
||||
const midiService = new MIDIService();
|
||||
|
||||
let previewPlayer = null;
|
||||
let motifEngine = null;
|
||||
let analyser = null;
|
||||
let dataArray = null;
|
||||
let animationId = null;
|
||||
let currentEvents = null;
|
||||
let currentTitle = '';
|
||||
let currentMidiUrl = '';
|
||||
let currentSource = '';
|
||||
let currentMode = 'preview';
|
||||
let isPlaying = false;
|
||||
|
||||
// DOM
|
||||
const eqVisualizer = document.getElementById('eqVisualizer');
|
||||
const nowPlayingTitle = document.getElementById('nowPlayingTitle');
|
||||
const playBtn = document.getElementById('playBtn');
|
||||
const stopBtn = document.getElementById('stopBtn');
|
||||
const copyLinkBtn = document.getElementById('copyLinkBtn');
|
||||
const shareXBtn = document.getElementById('shareXBtn');
|
||||
const shareHint = document.getElementById('shareHint');
|
||||
const searchBtn = document.getElementById('searchBtn');
|
||||
const songInput = document.getElementById('songInput');
|
||||
const status = document.getElementById('status');
|
||||
const results = document.getElementById('results');
|
||||
const resultsList = document.getElementById('resultsList');
|
||||
const playerCard = document.getElementById('playerCard');
|
||||
const volumeSlider = document.getElementById('volumeSlider');
|
||||
const modeBtns = document.querySelectorAll('.mode-btn');
|
||||
|
||||
// Create EQ bars
|
||||
function createBars() {
|
||||
eqVisualizer.innerHTML = '';
|
||||
for (let i = 0; i < NUM_BARS; i++) {
|
||||
const bar = document.createElement('div');
|
||||
bar.className = 'eq-bar';
|
||||
bar.style.height = '3px';
|
||||
eqVisualizer.appendChild(bar);
|
||||
}
|
||||
}
|
||||
|
||||
// Update visualizer
|
||||
function updateVisualizer() {
|
||||
const bars = eqVisualizer.querySelectorAll('.eq-bar');
|
||||
|
||||
// If we don't have a real analyser wired up, run a lightweight faux animation
|
||||
// so the UX test page doesn't depend on player internals.
|
||||
if (!analyser || !dataArray) {
|
||||
bars.forEach((bar) => {
|
||||
const value = isPlaying ? Math.floor(Math.random() * 255) : 0;
|
||||
const height = Math.max(3, (value / 255) * 60);
|
||||
bar.style.height = height + 'px';
|
||||
if (value > 180) bar.classList.add('hot');
|
||||
else bar.classList.remove('hot');
|
||||
});
|
||||
if (isPlaying) animationId = requestAnimationFrame(updateVisualizer);
|
||||
return;
|
||||
}
|
||||
|
||||
analyser.getByteFrequencyData(dataArray);
|
||||
const step = Math.floor(dataArray.length / NUM_BARS);
|
||||
|
||||
bars.forEach((bar, i) => {
|
||||
let sum = 0;
|
||||
for (let j = 0; j < step; j++) {
|
||||
sum += dataArray[i * step + j] || 0;
|
||||
}
|
||||
const value = sum / step;
|
||||
const height = Math.max(3, (value / 255) * 60);
|
||||
bar.style.height = height + 'px';
|
||||
|
||||
if (value > 180) {
|
||||
bar.classList.add('hot');
|
||||
} else {
|
||||
bar.classList.remove('hot');
|
||||
}
|
||||
});
|
||||
|
||||
if (isPlaying) animationId = requestAnimationFrame(updateVisualizer);
|
||||
}
|
||||
|
||||
function stopVisualizer() {
|
||||
if (animationId) {
|
||||
cancelAnimationFrame(animationId);
|
||||
animationId = null;
|
||||
}
|
||||
const bars = eqVisualizer.querySelectorAll('.eq-bar');
|
||||
bars.forEach(bar => {
|
||||
bar.style.height = '3px';
|
||||
bar.classList.remove('hot');
|
||||
});
|
||||
}
|
||||
|
||||
// Search
|
||||
async function handleSearch() {
|
||||
const query = songInput.value.trim();
|
||||
if (!query) return;
|
||||
|
||||
setStatus('Searching...');
|
||||
searchBtn.disabled = true;
|
||||
results.classList.remove('visible');
|
||||
playerCard.classList.remove('visible');
|
||||
|
||||
try {
|
||||
const searchResults = await midiService.search(query);
|
||||
if (searchResults.length === 0) {
|
||||
setStatus('No results found', true);
|
||||
return;
|
||||
}
|
||||
|
||||
displayResults(searchResults.slice(0, 5));
|
||||
setStatus(`Found ${searchResults.length} results`);
|
||||
|
||||
} catch (e) {
|
||||
setStatus(`Error: ${e.message}`, true);
|
||||
} finally {
|
||||
searchBtn.disabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
function displayResults(items) {
|
||||
resultsList.innerHTML = '';
|
||||
items.forEach((item, index) => {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'result-item';
|
||||
div.innerHTML = `
|
||||
<span class="result-title">${item.title}</span>
|
||||
<span class="result-meta">${item.source}</span>
|
||||
`;
|
||||
div.addEventListener('click', () => selectResult(item, div));
|
||||
resultsList.appendChild(div);
|
||||
});
|
||||
results.classList.add('visible');
|
||||
}
|
||||
|
||||
async function selectResult(item, element) {
|
||||
// Update selection UI
|
||||
document.querySelectorAll('.result-item').forEach(el => el.classList.remove('selected'));
|
||||
element.classList.add('selected');
|
||||
|
||||
setStatus(`Loading ${item.title}...`);
|
||||
stopPlayback();
|
||||
|
||||
try {
|
||||
const midiBuffer = await midiService.fetchMIDI(item.midiUrl);
|
||||
if (!midiBuffer) throw new Error('Failed to fetch');
|
||||
|
||||
currentEvents = MIDIParser.parseMIDI(midiBuffer);
|
||||
currentTitle = item.title;
|
||||
currentMidiUrl = item.midiUrl;
|
||||
currentSource = item.source;
|
||||
|
||||
// Setup audio
|
||||
const audioContext = await unlockAudio();
|
||||
|
||||
// Create preview player
|
||||
previewPlayer = new SoundfontMIDIPlayer(audioContext);
|
||||
await previewPlayer.load(currentEvents);
|
||||
previewPlayer.setVolume(parseFloat(volumeSlider.value));
|
||||
|
||||
// Create motif engine
|
||||
motifEngine = new MotifEngine();
|
||||
|
||||
// Setup analyser
|
||||
// Note: SoundfontMIDIPlayer doesn't expose a stable analyser hook.
|
||||
// Keep analyser null and use faux EQ animation for the test page.
|
||||
analyser = null;
|
||||
dataArray = null;
|
||||
|
||||
// Show player
|
||||
nowPlayingTitle.textContent = currentTitle;
|
||||
playerCard.classList.add('visible');
|
||||
playBtn.disabled = false;
|
||||
copyLinkBtn.disabled = false;
|
||||
shareXBtn.disabled = false;
|
||||
setStatus('Ready to play');
|
||||
shareHint.textContent = '';
|
||||
|
||||
} catch (e) {
|
||||
setStatus(`Error: ${e.message}`, true);
|
||||
}
|
||||
}
|
||||
|
||||
async function handlePlay() {
|
||||
if (!currentEvents) return;
|
||||
|
||||
try {
|
||||
isPlaying = true;
|
||||
playBtn.disabled = true;
|
||||
stopBtn.disabled = false;
|
||||
|
||||
if (currentMode === 'preview') {
|
||||
await previewPlayer.play();
|
||||
} else {
|
||||
// Match main page output: passthrough → SynthesisEngine
|
||||
await motifEngine.generateFromMIDI(currentEvents, 'passthrough');
|
||||
motifEngine.setVolume(parseFloat(volumeSlider.value));
|
||||
await motifEngine.play();
|
||||
}
|
||||
|
||||
updateVisualizer();
|
||||
|
||||
} catch (e) {
|
||||
setStatus(`Play error: ${e.message}`, true);
|
||||
stopPlayback();
|
||||
}
|
||||
}
|
||||
|
||||
function stopPlayback() {
|
||||
isPlaying = false;
|
||||
if (previewPlayer) previewPlayer.stop();
|
||||
if (motifEngine) motifEngine.stop();
|
||||
playBtn.disabled = !currentEvents;
|
||||
stopBtn.disabled = true;
|
||||
stopVisualizer();
|
||||
}
|
||||
|
||||
async function copyShareLink() {
|
||||
if (!currentMidiUrl) return;
|
||||
const url = buildShareUrl();
|
||||
try {
|
||||
if (navigator.clipboard?.writeText) {
|
||||
await navigator.clipboard.writeText(url);
|
||||
} else {
|
||||
const ta = document.createElement('textarea');
|
||||
ta.value = url;
|
||||
ta.style.position = 'fixed';
|
||||
ta.style.left = '-9999px';
|
||||
document.body.appendChild(ta);
|
||||
ta.focus();
|
||||
ta.select();
|
||||
document.execCommand('copy');
|
||||
document.body.removeChild(ta);
|
||||
}
|
||||
shareHint.textContent = 'Link copied.';
|
||||
window.setTimeout(() => (shareHint.textContent = ''), 1200);
|
||||
} catch {
|
||||
shareHint.textContent = 'Copy failed.';
|
||||
}
|
||||
}
|
||||
|
||||
function cleanTitleForShare(title) {
|
||||
return (title || '')
|
||||
.replace(/\.mid$/i, '')
|
||||
.replace(/_/g, ' ')
|
||||
.replace(/\s+/g, ' ')
|
||||
.trim();
|
||||
}
|
||||
|
||||
function buildShareUrl() {
|
||||
const title = cleanTitleForShare(currentTitle);
|
||||
|
||||
// Make BitMidi links short: /play?src=bitmidi&id=12345&title=...
|
||||
if (currentSource === 'bitmidi') {
|
||||
const m = String(currentMidiUrl).match(/\/uploads\/(\d+)\.mid/i);
|
||||
if (m && m[1]) {
|
||||
return `${window.location.origin}/play?src=bitmidi&id=${encodeURIComponent(m[1])}&title=${encodeURIComponent(title)}`;
|
||||
}
|
||||
}
|
||||
|
||||
// Fallback: include full MIDI URL (long, but works)
|
||||
return `${window.location.origin}/play?u=${encodeURIComponent(currentMidiUrl)}&title=${encodeURIComponent(title)}`;
|
||||
}
|
||||
|
||||
function shareOnX() {
|
||||
if (!currentMidiUrl) return;
|
||||
const url = buildShareUrl();
|
||||
const niceTitle = cleanTitleForShare(currentTitle);
|
||||
// Keep tweet text clean; URL is passed separately.
|
||||
const text = niceTitle ? `MOTIF chiptune: ${niceTitle}` : 'MOTIF chiptune';
|
||||
const intent = `https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}&url=${encodeURIComponent(url)}`;
|
||||
window.open(intent, '_blank', 'noopener,noreferrer');
|
||||
}
|
||||
|
||||
function setStatus(msg, isError = false) {
|
||||
status.textContent = msg;
|
||||
status.classList.toggle('error', isError);
|
||||
}
|
||||
|
||||
// Mode toggle
|
||||
modeBtns.forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
modeBtns.forEach(b => b.classList.remove('active'));
|
||||
btn.classList.add('active');
|
||||
currentMode = btn.dataset.mode;
|
||||
stopPlayback();
|
||||
});
|
||||
});
|
||||
|
||||
// Volume
|
||||
volumeSlider.addEventListener('input', () => {
|
||||
const vol = parseFloat(volumeSlider.value);
|
||||
if (previewPlayer) previewPlayer.setVolume(vol);
|
||||
if (motifEngine) motifEngine.setVolume(vol);
|
||||
});
|
||||
|
||||
// Events
|
||||
searchBtn.addEventListener('click', handleSearch);
|
||||
songInput.addEventListener('keypress', e => {
|
||||
if (e.key === 'Enter') handleSearch();
|
||||
});
|
||||
playBtn.addEventListener('click', handlePlay);
|
||||
stopBtn.addEventListener('click', stopPlayback);
|
||||
copyLinkBtn.addEventListener('click', () => void copyShareLink());
|
||||
shareXBtn.addEventListener('click', shareOnX);
|
||||
|
||||
// Init
|
||||
createBars();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -30,6 +30,14 @@
|
||||
"src": "/models",
|
||||
"dest": "/models.html"
|
||||
},
|
||||
{
|
||||
"src": "/play",
|
||||
"dest": "/play.html"
|
||||
},
|
||||
{
|
||||
"src": "/ux-test",
|
||||
"dest": "/ux-test.html"
|
||||
},
|
||||
{ "handle": "filesystem" },
|
||||
{
|
||||
"src": "/(.*)",
|
||||
|
||||
@@ -11,8 +11,12 @@ export default defineConfig({
|
||||
rollupOptions: {
|
||||
input: {
|
||||
main: resolve(__dirname, 'index.html'),
|
||||
// Existing pages (keep for backward compatibility)
|
||||
embed: resolve(__dirname, 'embed.html'),
|
||||
models: resolve(__dirname, 'models.html'),
|
||||
// Sharing trial pages
|
||||
play: resolve(__dirname, 'play.html'),
|
||||
ux_test: resolve(__dirname, 'ux-test.html'),
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user