الموسيقى صعب
Clausic — Pokemon Collection
MIDI pieces across 6 Pokemon generations with piano-roll visualizer — Kanto, Johto, Hoenn, Sinnoh, Unova, Kalos with region-specific instruments and scales.
فتح في المختبر
MCP
html-midi-player tone-js magenta
الأهداف: JS HTML
الكود
:root {
--bg: #0f0f14;
--surface: #1a1a24;
--accent: #7c6af7;
--accent-dim: rgba(124, 106, 247, 0.15);
--text: #e0dff5;
--muted: #6b6a8a;
--radius: 10px;
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: var(--bg);
color: var(--text);
font-family: "Inter", system-ui, -apple-system, sans-serif;
max-width: 900px;
margin: 0 auto;
padding: 3rem 1.5rem 5rem;
min-height: 100vh;
}
header {
margin-bottom: 2rem;
}
header h1 {
font-size: 2.6rem;
font-weight: 700;
letter-spacing: -0.04em;
background: linear-gradient(135deg, var(--text), var(--accent));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1.1;
}
.subtitle {
color: var(--muted);
font-size: 0.95rem;
margin-top: 0.4rem;
}
.tabs {
display: flex;
gap: 0.4rem;
margin-bottom: 1.8rem;
flex-wrap: wrap;
}
.tab {
background: var(--surface);
border: 1px solid transparent;
color: var(--muted);
padding: 0.45rem 1.1rem;
border-radius: 999px;
cursor: pointer;
font-size: 0.88rem;
font-weight: 500;
font-family: inherit;
transition: background 0.15s, color 0.15s;
}
.tab:hover {
color: var(--text);
border-color: var(--accent-dim);
}
.tab.active {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
.piece {
display: none;
}
.piece.active {
display: block;
animation: fadeIn 0.22s ease;
}
.piece h2 {
font-size: 1.35rem;
font-weight: 600;
letter-spacing: -0.02em;
margin-bottom: 0.3rem;
display: flex;
align-items: center;
gap: 0.6rem;
}
.meta {
font-family: "SF Mono", "Fira Mono", "Consolas", monospace;
font-size: 0.8rem;
color: var(--muted);
margin-bottom: 1.4rem;
letter-spacing: 0.02em;
}
.gen-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: 50%;
background: #e05252;
color: #fff;
font-size: 0.78rem;
font-weight: 700;
flex-shrink: 0;
}
midi-visualizer {
display: block;
width: 100%;
height: 280px;
background: var(--surface);
border-radius: var(--radius);
margin-bottom: 0.8rem;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.04);
}
midi-visualizer svg {
width: 100%;
height: 100%;
}
midi-player {
display: block;
width: 100%;
--player-background: var(--surface);
--player-color: var(--accent);
--player-playing-color: var(--accent);
border-radius: var(--radius);
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.04);
margin-bottom: 1.2rem;
}
/* Generation code details */
.gen-details {
margin-top: 0.4rem;
margin-bottom: 1.2rem;
}
.gen-details summary {
cursor: pointer;
font-size: 0.82rem;
font-weight: 500;
color: var(--accent);
padding: 0.4rem 0;
user-select: none;
display: inline-flex;
align-items: center;
gap: 0.4rem;
list-style: none;
}
.gen-details summary::-webkit-details-marker {
display: none;
}
.gen-details summary::before {
content: "\25B6";
font-size: 0.6rem;
transition: transform 0.2s ease;
display: inline-block;
}
.gen-details[open] summary::before {
transform: rotate(90deg);
}
.gen-details summary:hover {
color: var(--text);
}
.gen-code {
background: var(--surface);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: var(--radius);
padding: 1rem 1.2rem;
margin-top: 0.5rem;
overflow-x: auto;
}
.gen-code pre {
font-family: "SF Mono", "Fira Mono", "Consolas", monospace;
font-size: 0.75rem;
line-height: 1.6;
color: var(--text);
white-space: pre-wrap;
word-wrap: break-word;
}
.gen-code .comment {
color: var(--muted);
}
.gen-code .key {
color: #7dd3fc;
}
.gen-code .val {
color: #a5f3c4;
}
.gen-code .str {
color: #fcd34d;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(7px);
}
to {
opacity: 1;
transform: translateY(0);
}
}/* ===================================================================
Clausic — Pokemon Collection · script.js
6 programmatic NoteSequence tracks for <midi-player> web components
=================================================================== */
// --------------- Scale & Utility ---------------
const SCALES = {
majorPentatonic: [0, 2, 4, 7, 9],
major: [0, 2, 4, 5, 7, 9, 11],
dorian: [0, 2, 3, 5, 7, 9, 10],
phrygian: [0, 1, 3, 5, 7, 8, 10],
mixolydian: [0, 2, 4, 5, 7, 9, 10],
};
const ROOTS = { C: 60, D: 62, E: 64, F: 65, G: 67, A: 69, Bb: 70, B: 71 };
/**
* Return a MIDI pitch from a scale degree (0-based) relative to a root.
* Negative degrees go below root; degrees >= scale.length wrap into higher octaves.
*/
function scaleNote(root, scale, degree) {
const len = scale.length;
const octave = Math.floor(degree / len);
const idx = ((degree % len) + len) % len;
return root + octave * 12 + scale[idx];
}
/** Seconds per beat */
function spb(qpm) {
return 60 / qpm;
}
// --------------- NoteSequence Generator ---------------
/**
* Build a NoteSequence from a config object.
* cfg.qpm — tempo
* cfg.totalTime — total duration in seconds
* cfg.layers — array of { fn, program, isDrum }
* fn(notes, beat) receives the array and the beat helper
* beat(n) returns seconds at beat n
*/
function generate(cfg) {
const b = (n) => n * spb(cfg.qpm);
const notes = [];
for (const layer of cfg.layers) {
const layerNotes = [];
layer.fn(layerNotes, b);
for (const n of layerNotes) {
if (layer.isDrum) {
n.isDrum = true;
} else {
n.program = layer.program;
}
notes.push(n);
}
}
return {
notes,
tempos: [{ time: 0, qpm: cfg.qpm }],
totalTime: cfg.totalTime,
};
}
/** Helper: add a note to array */
function N(arr, pitch, start, end, velocity) {
arr.push({ pitch, startTime: start, endTime: end, velocity: velocity || 80 });
}
// --------------- Track Definitions (16 bars each) ---------------
// ===== 0: KANTO (Gen I) — G major pentatonic · 108 BPM =====
function buildKanto() {
const root = ROOTS.G - 12; // G3
const sc = SCALES.majorPentatonic;
const qpm = 108;
const totalBars = 16;
const totalTime = totalBars * 4 * spb(qpm);
return generate({
qpm,
totalTime,
layers: [
// Marimba melody (program 12)
{
program: 12,
fn(notes, b) {
// Cheerful, nostalgic 8-bit style melody — two 8-bar phrases
const melodyDegrees = [
// Phrase A (bars 1-4)
4, 5, 7, 5, 4, 3, 2, -1, 0, 2, 4, 5, 7, 5, 4, 2,
// Phrase A variation (bars 5-8)
4, 5, 7, 9, 7, 5, 4, 2, 0, 2, 4, 5, 4, 2, 0, -1,
// Phrase B (bars 9-12)
7, 9, 10, 9, 7, 5, 4, 5, 7, 5, 4, 2, 0, 2, 4, -1,
// Phrase B variation / ending (bars 13-16)
9, 7, 5, 4, 2, 4, 5, 7, 9, 7, 5, 4, 2, 0, -1, 0,
];
const rhythms = [
// Each value = duration in eighth notes (0.5 beats)
2, 2, 3, 1, 2, 2, 2, 2, 2, 2, 2, 2, 3, 1, 2, 2, 2, 2, 3, 1, 2, 1, 1, 2, 2, 2, 2, 2, 3,
1, 2, 2, 2, 2, 3, 1, 2, 2, 2, 2, 2, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 3, 1, 2, 2,
2, 2, 3, 1, 2, 4,
];
let t = 0;
for (let i = 0; i < melodyDegrees.length; i++) {
const deg = melodyDegrees[i];
const dur = rhythms[i] * 0.5 * spb(qpm);
if (deg === -1) {
// rest
t += dur;
continue;
}
const p = scaleNote(root + 12, sc, deg);
const vel = i % 4 === 0 ? 95 : 80;
N(notes, p, t, t + dur * 0.9, vel);
t += dur;
}
},
},
// Acoustic guitar chords (program 25)
{
program: 25,
fn(notes, b) {
// Strum pattern: quarter-note chords on beats, varying voicings
const chordProgressions = [
// bars 1-4: I - V - vi(rel) - IV
[0, 4, 7],
[4, 7, 9],
[2, 5, 9],
[0, 4, 7],
[0, 4, 7],
[4, 7, 9],
[2, 5, 9],
[0, 2, 4],
// bars 5-8
[0, 4, 7],
[2, 5, 9],
[4, 7, 9],
[0, 4, 7],
[0, 4, 7],
[2, 5, 9],
[4, 7, 9],
[0, 2, 4],
// bars 9-12
[4, 7, 9],
[2, 5, 7],
[0, 4, 7],
[2, 4, 9],
[4, 7, 9],
[2, 5, 7],
[0, 4, 7],
[0, 2, 4],
// bars 13-16
[4, 7, 9],
[2, 5, 7],
[0, 4, 7],
[2, 4, 9],
[4, 7, 9],
[2, 5, 7],
[0, 4, 7],
[0, 4, 7],
];
for (let bar = 0; bar < totalBars; bar++) {
for (let beat = 0; beat < 4; beat += 2) {
const idx = bar * 2 + Math.floor(beat / 2);
const chord = chordProgressions[idx % chordProgressions.length];
const t = b(bar * 4 + beat);
for (const deg of chord) {
const p = scaleNote(root, sc, deg);
N(notes, p, t, t + b(1.8), 60);
}
}
}
},
},
// Glockenspiel counter-melody accents (program 9)
{
program: 9,
fn(notes, b) {
const accents = [
{ bar: 0, beat: 2.5, deg: 7, dur: 1 },
{ bar: 1, beat: 0.5, deg: 9, dur: 1.5 },
{ bar: 2, beat: 3, deg: 5, dur: 1 },
{ bar: 3, beat: 1, deg: 4, dur: 2 },
{ bar: 4, beat: 2.5, deg: 9, dur: 1 },
{ bar: 5, beat: 0, deg: 7, dur: 1.5 },
{ bar: 6, beat: 3.5, deg: 5, dur: 0.5 },
{ bar: 7, beat: 2, deg: 4, dur: 2 },
{ bar: 8, beat: 1, deg: 10, dur: 1 },
{ bar: 9, beat: 3, deg: 9, dur: 1 },
{ bar: 10, beat: 0.5, deg: 7, dur: 1.5 },
{ bar: 11, beat: 2, deg: 5, dur: 2 },
{ bar: 12, beat: 0, deg: 9, dur: 1 },
{ bar: 13, beat: 2.5, deg: 7, dur: 1.5 },
{ bar: 14, beat: 1, deg: 5, dur: 2 },
{ bar: 15, beat: 3, deg: 4, dur: 1 },
];
for (const a of accents) {
const t = b(a.bar * 4 + a.beat);
const p = scaleNote(root + 24, sc, a.deg);
N(notes, p, t, t + b(a.dur), 65);
}
},
},
// Drums
{
isDrum: true,
fn(notes, b) {
for (let bar = 0; bar < totalBars; bar++) {
for (let beat = 0; beat < 4; beat++) {
const t = b(bar * 4 + beat);
// Hi-hat every beat
N(notes, 42, t, t + b(0.15), 60);
// Bass drum on 1 and 3
if (beat === 0 || beat === 2) {
N(notes, 36, t, t + b(0.15), 90);
}
// Snare on 2 and 4
if (beat === 1 || beat === 3) {
N(notes, 38, t, t + b(0.15), 85);
}
// Off-beat hi-hat
N(notes, 42, t + b(0.5), t + b(0.65), 45);
}
// Crash on bar 1, 5, 9, 13
if (bar % 4 === 0) {
N(notes, 49, b(bar * 4), b(bar * 4 + 0.3), 80);
}
}
},
},
],
});
}
// ===== 1: JOHTO (Gen II) — A Dorian · 76 BPM =====
function buildJohto() {
const root = ROOTS.A - 12; // A3
const sc = SCALES.dorian;
const qpm = 76;
const totalBars = 16;
const totalTime = totalBars * 4 * spb(qpm);
return generate({
qpm,
totalTime,
layers: [
// Piano melody (program 0)
{
program: 0,
fn(notes, b) {
// Melancholic, folk-like melody
const melody = [
// Phrase A — wistful ascending (bars 1-4)
{ d: 0, s: 0, dur: 2 },
{ d: 2, s: 2, dur: 1 },
{ d: 3, s: 3, dur: 1 },
{ d: 4, s: 4, dur: 2 },
{ d: 5, s: 6, dur: 2 },
{ d: 6, s: 8, dur: 1.5 },
{ d: 5, s: 9.5, dur: 1 },
{ d: 4, s: 10.5, dur: 1.5 },
{ d: 3, s: 12, dur: 2 },
{ d: 2, s: 14, dur: 2 },
// Phrase A2 (bars 5-8)
{ d: 0, s: 16, dur: 1 },
{ d: 2, s: 17, dur: 1 },
{ d: 4, s: 18, dur: 2 },
{ d: 6, s: 20, dur: 1.5 },
{ d: 7, s: 21.5, dur: 1 },
{ d: 6, s: 22.5, dur: 1.5 },
{ d: 5, s: 24, dur: 2 },
{ d: 4, s: 26, dur: 1 },
{ d: 3, s: 27, dur: 1 },
{ d: 2, s: 28, dur: 2 },
{ d: 0, s: 30, dur: 2 },
// Phrase B — climax (bars 9-12)
{ d: 7, s: 32, dur: 2 },
{ d: 8, s: 34, dur: 1 },
{ d: 9, s: 35, dur: 1 },
{ d: 7, s: 36, dur: 2 },
{ d: 6, s: 38, dur: 2 },
{ d: 5, s: 40, dur: 1.5 },
{ d: 4, s: 41.5, dur: 1.5 },
{ d: 3, s: 43, dur: 1 },
{ d: 2, s: 44, dur: 2 },
{ d: 4, s: 46, dur: 2 },
// Phrase B2 — resolution (bars 13-16)
{ d: 5, s: 48, dur: 1 },
{ d: 4, s: 49, dur: 1 },
{ d: 3, s: 50, dur: 2 },
{ d: 2, s: 52, dur: 1 },
{ d: 3, s: 53, dur: 1 },
{ d: 4, s: 54, dur: 2 },
{ d: 3, s: 56, dur: 1.5 },
{ d: 2, s: 57.5, dur: 1.5 },
{ d: 1, s: 59, dur: 1 },
{ d: 0, s: 60, dur: 4 },
];
for (const n of melody) {
const p = scaleNote(root + 12, sc, n.d);
const vel = n.dur >= 2 ? 90 : 78;
N(notes, p, b(n.s), b(n.s + n.dur * 0.95), vel);
}
},
},
// Flute counter-melody (program 73)
{
program: 73,
fn(notes, b) {
// Enters bar 3, weaves around the piano
const flute = [
// bars 3-4
{ d: 7, s: 8, dur: 1 },
{ d: 6, s: 9, dur: 0.5 },
{ d: 5, s: 9.5, dur: 1.5 },
{ d: 4, s: 11, dur: 1 },
{ d: 5, s: 12, dur: 2 },
{ d: 4, s: 14, dur: 1 },
// bars 5-6
{ d: 2, s: 17, dur: 1.5 },
{ d: 4, s: 18.5, dur: 1.5 },
{ d: 5, s: 20, dur: 2 },
{ d: 6, s: 22, dur: 1 },
{ d: 7, s: 23, dur: 1 },
// bars 7-8
{ d: 6, s: 24, dur: 1.5 },
{ d: 5, s: 25.5, dur: 1 },
{ d: 4, s: 26.5, dur: 1.5 },
{ d: 3, s: 28, dur: 2 },
{ d: 2, s: 30, dur: 2 },
// bars 9-10
{ d: 9, s: 33, dur: 1 },
{ d: 8, s: 34, dur: 1 },
{ d: 7, s: 35, dur: 1 },
{ d: 8, s: 36, dur: 2 },
{ d: 7, s: 38, dur: 1 },
{ d: 6, s: 39, dur: 1 },
// bars 11-12
{ d: 5, s: 40, dur: 2 },
{ d: 4, s: 42, dur: 1 },
{ d: 3, s: 43, dur: 1 },
{ d: 4, s: 44, dur: 2 },
{ d: 5, s: 46, dur: 2 },
// bars 13-14
{ d: 4, s: 48, dur: 1 },
{ d: 3, s: 49, dur: 1 },
{ d: 2, s: 50, dur: 2 },
{ d: 3, s: 52, dur: 1.5 },
{ d: 4, s: 53.5, dur: 1.5 },
{ d: 5, s: 55, dur: 1 },
// bars 15-16
{ d: 4, s: 56, dur: 2 },
{ d: 2, s: 58, dur: 2 },
{ d: 0, s: 60, dur: 4 },
];
for (const n of flute) {
const p = scaleNote(root + 24, sc, n.d);
N(notes, p, b(n.s), b(n.s + n.dur * 0.92), 68);
}
},
},
// Strings pad (program 48)
{
program: 48,
fn(notes, b) {
// Sustained chords, 2-bar changes
const chords = [
[0, 2, 4], // Am (i)
[3, 5, 7], // C (III)
[5, 7, 9], // D (IV) — dorian IV is major
[4, 6, 8], // Em (v)
[0, 2, 4], // Am (i)
[3, 5, 7], // C (III)
[5, 7, 9], // D (IV)
[0, 2, 4], // Am (i)
];
for (let i = 0; i < chords.length; i++) {
const startBeat = i * 8;
for (const deg of chords[i]) {
const p = scaleNote(root, sc, deg);
N(notes, p, b(startBeat), b(startBeat + 7.5), 50);
}
}
},
},
// Drums — gentle brush-like
{
isDrum: true,
fn(notes, b) {
for (let bar = 0; bar < totalBars; bar++) {
for (let beat = 0; beat < 4; beat++) {
const t = b(bar * 4 + beat);
// Ride cymbal
N(notes, 51, t, t + b(0.12), 45);
// Bass drum on 1 and 3 (soft)
if (beat === 0 || beat === 2) {
N(notes, 36, t, t + b(0.12), 65);
}
// Snare ghost notes on 2 and 4
if (beat === 1 || beat === 3) {
N(notes, 38, t, t + b(0.12), 50);
}
}
}
},
},
],
});
}
// ===== 2: HOENN (Gen III) — C major · 96 BPM =====
function buildHoenn() {
const root = ROOTS.C; // C4
const sc = SCALES.major;
const qpm = 96;
const totalBars = 16;
const totalTime = totalBars * 4 * spb(qpm);
return generate({
qpm,
totalTime,
layers: [
// Synth lead saw melody (program 81)
{
program: 81,
fn(notes, b) {
// Tropical adventure, energetic melody
const melody = [
// Phrase A (bars 1-4) — upbeat, adventurous
{ d: 0, s: 0, dur: 1 },
{ d: 2, s: 1, dur: 0.5 },
{ d: 4, s: 1.5, dur: 1.5 },
{ d: 5, s: 3, dur: 1 },
{ d: 7, s: 4, dur: 1.5 },
{ d: 5, s: 5.5, dur: 0.5 },
{ d: 4, s: 6, dur: 1 },
{ d: 2, s: 7, dur: 1 },
{ d: 4, s: 8, dur: 0.5 },
{ d: 5, s: 8.5, dur: 0.5 },
{ d: 7, s: 9, dur: 1.5 },
{ d: 9, s: 10.5, dur: 1.5 },
{ d: 7, s: 12, dur: 1 },
{ d: 5, s: 13, dur: 1 },
{ d: 4, s: 14, dur: 1 },
{ d: 2, s: 15, dur: 1 },
// Phrase A2 (bars 5-8)
{ d: 0, s: 16, dur: 0.5 },
{ d: 4, s: 16.5, dur: 0.5 },
{ d: 7, s: 17, dur: 1.5 },
{ d: 9, s: 18.5, dur: 1.5 },
{ d: 11, s: 20, dur: 1 },
{ d: 9, s: 21, dur: 0.5 },
{ d: 7, s: 21.5, dur: 1.5 },
{ d: 5, s: 23, dur: 1 },
{ d: 4, s: 24, dur: 0.5 },
{ d: 5, s: 24.5, dur: 0.5 },
{ d: 7, s: 25, dur: 1 },
{ d: 9, s: 26, dur: 1 },
{ d: 7, s: 27, dur: 1 },
{ d: 5, s: 28, dur: 1.5 },
{ d: 4, s: 29.5, dur: 1 },
{ d: 2, s: 30.5, dur: 1.5 },
// Phrase B (bars 9-12) — build
{ d: 9, s: 32, dur: 1 },
{ d: 11, s: 33, dur: 1 },
{ d: 12, s: 34, dur: 1.5 },
{ d: 11, s: 35.5, dur: 0.5 },
{ d: 9, s: 36, dur: 1 },
{ d: 7, s: 37, dur: 1 },
{ d: 9, s: 38, dur: 2 },
{ d: 11, s: 40, dur: 0.5 },
{ d: 12, s: 40.5, dur: 0.5 },
{ d: 14, s: 41, dur: 1.5 },
{ d: 12, s: 42.5, dur: 1.5 },
{ d: 11, s: 44, dur: 1 },
{ d: 9, s: 45, dur: 1 },
{ d: 7, s: 46, dur: 2 },
// Phrase B2 (bars 13-16) — resolution
{ d: 5, s: 48, dur: 1 },
{ d: 7, s: 49, dur: 1 },
{ d: 9, s: 50, dur: 2 },
{ d: 7, s: 52, dur: 0.5 },
{ d: 5, s: 52.5, dur: 0.5 },
{ d: 4, s: 53, dur: 1 },
{ d: 2, s: 54, dur: 2 },
{ d: 4, s: 56, dur: 1 },
{ d: 5, s: 57, dur: 0.5 },
{ d: 4, s: 57.5, dur: 0.5 },
{ d: 2, s: 58, dur: 1 },
{ d: 0, s: 59, dur: 1 },
{ d: 0, s: 60, dur: 4 },
];
for (const n of melody) {
const p = scaleNote(root, sc, n.d);
N(notes, p, b(n.s), b(n.s + n.dur * 0.9), 88);
}
},
},
// Marimba arpeggios (program 12)
{
program: 12,
fn(notes, b) {
// Sixteenth-note arpeggios
const chordDegs = [
[0, 2, 4, 7], // C
[3, 5, 7, 9], // F
[4, 6, 7, 11], // G
[0, 2, 4, 7], // C
[5, 7, 9, 11], // Am
[3, 5, 7, 9], // F
[4, 6, 7, 11], // G
[0, 2, 4, 7], // C
];
for (let bar = 0; bar < totalBars; bar++) {
const chord = chordDegs[bar % chordDegs.length];
for (let sixteenth = 0; sixteenth < 16; sixteenth++) {
const deg = chord[sixteenth % chord.length];
const t = b(bar * 4 + sixteenth * 0.25);
const p = scaleNote(root + 12, sc, deg + (sixteenth >= 8 ? 7 : 0));
N(notes, p, t, t + b(0.2), 55 + (sixteenth % 4 === 0 ? 15 : 0));
}
}
},
},
// Steel drums chords (program 114)
{
program: 114,
fn(notes, b) {
const chords = [
[0, 4, 7],
[5, 9, 12],
[7, 11, 14],
[0, 4, 7],
[5, 9, 12],
[0, 4, 7],
[7, 11, 14],
[0, 4, 7],
];
for (let bar = 0; bar < totalBars; bar++) {
const chord = chords[bar % chords.length];
// Half-note chords on beats 1 and 3
for (let beat = 0; beat < 4; beat += 2) {
const t = b(bar * 4 + beat);
for (const deg of chord) {
const p = scaleNote(root, sc, deg);
N(notes, p, t, t + b(1.8), 62);
}
}
}
},
},
// Drums — upbeat
{
isDrum: true,
fn(notes, b) {
for (let bar = 0; bar < totalBars; bar++) {
for (let beat = 0; beat < 4; beat++) {
const t = b(bar * 4 + beat);
// Hi-hat 8ths
N(notes, 42, t, t + b(0.1), 65);
N(notes, 42, t + b(0.5), t + b(0.6), 50);
// Kick on 1, 2-and, 3
if (beat === 0 || beat === 2) {
N(notes, 36, t, t + b(0.1), 95);
}
if (beat === 1) {
N(notes, 36, t + b(0.5), t + b(0.6), 80);
}
// Snare on 2 and 4
if (beat === 1 || beat === 3) {
N(notes, 38, t, t + b(0.1), 90);
}
}
// Open hi-hat accent every 2 bars
if (bar % 2 === 1) {
N(notes, 46, b(bar * 4 + 3.5), b(bar * 4 + 3.7), 70);
}
// Crash on phrase starts
if (bar % 4 === 0) {
N(notes, 49, b(bar * 4), b(bar * 4 + 0.3), 85);
}
}
},
},
],
});
}
// ===== 3: SINNOH (Gen IV) — D Phrygian · 72 BPM =====
function buildSinnoh() {
const root = ROOTS.D - 12; // D3
const sc = SCALES.phrygian;
const qpm = 72;
const totalBars = 16;
const totalTime = totalBars * 4 * spb(qpm);
return generate({
qpm,
totalTime,
layers: [
// Organ chords (program 19)
{
program: 19,
fn(notes, b) {
// Dark, sustained organ pads — whole-note chords
const chords = [
[0, 2, 4], // Dm (i)
[1, 3, 5], // Eb (bII)
[0, 2, 4], // Dm (i)
[5, 7, 9], // Am- (v)
[3, 5, 7], // F (III)
[1, 3, 5], // Eb (bII)
[0, 2, 4], // Dm (i)
[5, 7, 9], // Am- (v)
[3, 5, 7], // F (III)
[1, 3, 5], // Eb (bII)
[6, 8, 10], // Bb (VI)
[5, 7, 9], // Am- (v)
[3, 5, 7], // F (III)
[1, 3, 5], // Eb (bII)
[0, 2, 4], // Dm (i)
[0, 2, 4], // Dm (i) — final
];
for (let bar = 0; bar < totalBars; bar++) {
const chord = chords[bar];
const t = b(bar * 4);
for (const deg of chord) {
const p = scaleNote(root, sc, deg);
N(notes, p, t, t + b(3.8), 55);
}
}
},
},
// Choir pad (program 52)
{
program: 52,
fn(notes, b) {
// Ethereal sustained notes, 2-bar phrasing
const pads = [
{ d: 7, s: 0, dur: 7 },
{ d: 5, s: 8, dur: 7 },
{ d: 7, s: 16, dur: 7 },
{ d: 4, s: 24, dur: 7 },
{ d: 7, s: 32, dur: 7 },
{ d: 5, s: 40, dur: 7 },
{ d: 4, s: 48, dur: 7 },
{ d: 0, s: 56, dur: 8 },
];
for (const n of pads) {
const p = scaleNote(root + 12, sc, n.d);
N(notes, p, b(n.s), b(n.s + n.dur), 42);
// Add a fifth above for richness
const p2 = scaleNote(root + 12, sc, n.d + 4);
N(notes, p2, b(n.s + 0.5), b(n.s + n.dur - 0.5), 35);
}
},
},
// Strings melody (program 48) — slow, mysterious
{
program: 48,
fn(notes, b) {
const melody = [
// Phrase A (bars 1-4) — dark, descending
{ d: 7, s: 0, dur: 3 },
{ d: 6, s: 3, dur: 1 },
{ d: 5, s: 4, dur: 2 },
{ d: 4, s: 6, dur: 2 },
{ d: 3, s: 8, dur: 3 },
{ d: 1, s: 11, dur: 1 },
{ d: 0, s: 12, dur: 4 },
// Phrase A2 (bars 5-8) — ascending
{ d: 0, s: 16, dur: 2 },
{ d: 1, s: 18, dur: 1 },
{ d: 3, s: 19, dur: 1 },
{ d: 4, s: 20, dur: 2 },
{ d: 5, s: 22, dur: 2 },
{ d: 7, s: 24, dur: 3 },
{ d: 8, s: 27, dur: 1 },
{ d: 7, s: 28, dur: 4 },
// Phrase B (bars 9-12) — climax
{ d: 9, s: 32, dur: 2 },
{ d: 10, s: 34, dur: 1 },
{ d: 9, s: 35, dur: 1 },
{ d: 7, s: 36, dur: 2 },
{ d: 8, s: 38, dur: 2 },
{ d: 10, s: 40, dur: 2 },
{ d: 9, s: 42, dur: 1 },
{ d: 7, s: 43, dur: 1 },
{ d: 5, s: 44, dur: 2 },
{ d: 4, s: 46, dur: 2 },
// Phrase B2 (bars 13-16) — fading resolution
{ d: 3, s: 48, dur: 3 },
{ d: 1, s: 51, dur: 1 },
{ d: 0, s: 52, dur: 4 },
{ d: 2, s: 56, dur: 2 },
{ d: 1, s: 58, dur: 2 },
{ d: 0, s: 60, dur: 4 },
];
for (const n of melody) {
const p = scaleNote(root + 12, sc, n.d);
const vel = n.s >= 32 && n.s < 48 ? 85 : 72;
N(notes, p, b(n.s), b(n.s + n.dur * 0.95), vel);
}
},
},
// Sparse atmospheric percussion (no full kit — just accents)
{
isDrum: true,
fn(notes, b) {
// Very sparse: cymbal swells and occasional low hits
for (let bar = 0; bar < totalBars; bar++) {
// Ride bell every 2 bars
if (bar % 2 === 0) {
N(notes, 51, b(bar * 4), b(bar * 4 + 0.2), 35);
}
// Gentle bass drum on beat 1 every 4 bars
if (bar % 4 === 0) {
N(notes, 36, b(bar * 4), b(bar * 4 + 0.15), 50);
}
// Crash at climax sections
if (bar === 8 || bar === 12) {
N(notes, 49, b(bar * 4), b(bar * 4 + 0.3), 55);
}
}
},
},
],
});
}
// ===== 4: UNOVA (Gen V) — Bb Mixolydian · 110 BPM =====
function buildUnova() {
const root = ROOTS.Bb - 12; // Bb3
const sc = SCALES.mixolydian;
const qpm = 110;
const totalBars = 16;
const totalTime = totalBars * 4 * spb(qpm);
return generate({
qpm,
totalTime,
layers: [
// Synth lead square melody (program 80)
{
program: 80,
fn(notes, b) {
// Modern, urban, electronic groove
const melody = [
// Phrase A (bars 1-4) — punchy, rhythmic
{ d: 0, s: 0, dur: 0.5 },
{ d: 2, s: 0.5, dur: 0.5 },
{ d: 4, s: 1, dur: 1 },
{ d: 5, s: 2, dur: 0.5 },
{ d: 4, s: 2.5, dur: 0.5 },
{ d: 2, s: 3, dur: 1 },
{ d: 4, s: 4, dur: 0.5 },
{ d: 5, s: 4.5, dur: 0.5 },
{ d: 7, s: 5, dur: 1.5 },
{ d: 5, s: 6.5, dur: 0.5 },
{ d: 4, s: 7, dur: 1 },
{ d: 2, s: 8, dur: 0.5 },
{ d: 4, s: 8.5, dur: 0.5 },
{ d: 5, s: 9, dur: 1 },
{ d: 7, s: 10, dur: 0.5 },
{ d: 9, s: 10.5, dur: 1.5 },
{ d: 7, s: 12, dur: 1 },
{ d: 5, s: 13, dur: 0.5 },
{ d: 4, s: 13.5, dur: 0.5 },
{ d: 2, s: 14, dur: 1 },
{ d: 0, s: 15, dur: 1 },
// Phrase A2 (bars 5-8) — variation
{ d: 7, s: 16, dur: 0.5 },
{ d: 9, s: 16.5, dur: 0.5 },
{ d: 11, s: 17, dur: 1 },
{ d: 9, s: 18, dur: 0.5 },
{ d: 7, s: 18.5, dur: 1 },
{ d: 5, s: 19.5, dur: 0.5 },
{ d: 7, s: 20, dur: 1 },
{ d: 9, s: 21, dur: 0.5 },
{ d: 11, s: 21.5, dur: 1 },
{ d: 9, s: 22.5, dur: 0.5 },
{ d: 7, s: 23, dur: 1 },
{ d: 5, s: 24, dur: 0.5 },
{ d: 4, s: 24.5, dur: 0.5 },
{ d: 2, s: 25, dur: 1 },
{ d: 4, s: 26, dur: 0.5 },
{ d: 5, s: 26.5, dur: 1 },
{ d: 4, s: 27.5, dur: 0.5 },
{ d: 2, s: 28, dur: 1 },
{ d: 0, s: 29, dur: 1 },
// rest
{ d: 0, s: 31, dur: 1 },
// Phrase B (bars 9-12) — energetic climax
{ d: 7, s: 32, dur: 0.5 },
{ d: 9, s: 32.5, dur: 0.5 },
{ d: 11, s: 33, dur: 0.5 },
{ d: 12, s: 33.5, dur: 1 },
{ d: 11, s: 34.5, dur: 0.5 },
{ d: 9, s: 35, dur: 1 },
{ d: 11, s: 36, dur: 0.5 },
{ d: 12, s: 36.5, dur: 0.5 },
{ d: 14, s: 37, dur: 1.5 },
{ d: 12, s: 38.5, dur: 0.5 },
{ d: 11, s: 39, dur: 1 },
{ d: 9, s: 40, dur: 0.5 },
{ d: 11, s: 40.5, dur: 0.5 },
{ d: 12, s: 41, dur: 1 },
{ d: 11, s: 42, dur: 0.5 },
{ d: 9, s: 42.5, dur: 0.5 },
{ d: 7, s: 43, dur: 1 },
{ d: 5, s: 44, dur: 0.5 },
{ d: 7, s: 44.5, dur: 0.5 },
{ d: 9, s: 45, dur: 1.5 },
{ d: 7, s: 46.5, dur: 0.5 },
{ d: 5, s: 47, dur: 1 },
// Phrase B2 (bars 13-16) — outro
{ d: 4, s: 48, dur: 0.5 },
{ d: 5, s: 48.5, dur: 0.5 },
{ d: 7, s: 49, dur: 1 },
{ d: 5, s: 50, dur: 0.5 },
{ d: 4, s: 50.5, dur: 0.5 },
{ d: 2, s: 51, dur: 1 },
{ d: 4, s: 52, dur: 1 },
{ d: 5, s: 53, dur: 0.5 },
{ d: 4, s: 53.5, dur: 0.5 },
{ d: 2, s: 54, dur: 1 },
{ d: 0, s: 55, dur: 1 },
{ d: 2, s: 56, dur: 0.5 },
{ d: 4, s: 56.5, dur: 0.5 },
{ d: 5, s: 57, dur: 1 },
{ d: 4, s: 58, dur: 1 },
{ d: 2, s: 59, dur: 1 },
{ d: 0, s: 60, dur: 4 },
];
for (const n of melody) {
const p = scaleNote(root + 12, sc, n.d);
N(notes, p, b(n.s), b(n.s + n.dur * 0.85), 92);
}
},
},
// Trumpet accents (program 56)
{
program: 56,
fn(notes, b) {
// Stab accents on off-beats, enters bar 3
const stabs = [
{ d: 7, s: 8.5, dur: 0.5 },
{ d: 9, s: 10, dur: 0.5 },
{ d: 7, s: 12.5, dur: 0.5 },
{ d: 5, s: 14, dur: 0.5 },
{ d: 9, s: 16.5, dur: 0.5 },
{ d: 11, s: 18, dur: 0.5 },
{ d: 7, s: 20.5, dur: 0.5 },
{ d: 9, s: 22, dur: 0.5 },
{ d: 5, s: 24.5, dur: 0.5 },
{ d: 7, s: 26, dur: 0.5 },
{ d: 4, s: 28.5, dur: 0.5 },
{ d: 5, s: 30, dur: 0.5 },
// Climax section — more accents
{ d: 11, s: 32.5, dur: 0.5 },
{ d: 12, s: 33.5, dur: 0.5 },
{ d: 14, s: 34.5, dur: 0.5 },
{ d: 12, s: 36, dur: 0.5 },
{ d: 11, s: 37.5, dur: 0.5 },
{ d: 14, s: 38.5, dur: 0.5 },
{ d: 12, s: 40, dur: 0.5 },
{ d: 11, s: 41.5, dur: 0.5 },
{ d: 9, s: 42.5, dur: 0.5 },
{ d: 7, s: 44, dur: 0.5 },
{ d: 9, s: 45.5, dur: 0.5 },
{ d: 7, s: 46.5, dur: 0.5 },
// Outro
{ d: 5, s: 48.5, dur: 0.5 },
{ d: 7, s: 50.5, dur: 0.5 },
{ d: 4, s: 52.5, dur: 0.5 },
{ d: 5, s: 54.5, dur: 0.5 },
{ d: 2, s: 56.5, dur: 0.5 },
{ d: 4, s: 58.5, dur: 0.5 },
{ d: 0, s: 60, dur: 2 },
];
for (const n of stabs) {
const p = scaleNote(root + 12, sc, n.d);
N(notes, p, b(n.s), b(n.s + n.dur * 0.8), 78);
}
},
},
// Electric piano chords (program 4)
{
program: 4,
fn(notes, b) {
const chords = [
[0, 4, 7], // Bb (I)
[5, 7, 11], // F (V)
[2, 4, 7], // Cm (ii)
[6, 9, 11], // Ab (bVII)
[0, 4, 7], // Bb (I)
[5, 7, 11], // F (V)
[3, 5, 9], // Eb (IV)
[0, 4, 7], // Bb (I)
];
for (let bar = 0; bar < totalBars; bar++) {
const chord = chords[bar % chords.length];
// Rhythmic comping pattern
const beats = [0, 1.5, 2.5, 3.5];
for (const beat of beats) {
const t = b(bar * 4 + beat);
for (const deg of chord) {
const p = scaleNote(root, sc, deg);
N(notes, p, t, t + b(0.8), beat === 0 ? 68 : 55);
}
}
}
},
},
// Drums — electronic, driving
{
isDrum: true,
fn(notes, b) {
for (let bar = 0; bar < totalBars; bar++) {
for (let beat = 0; beat < 4; beat++) {
const t = b(bar * 4 + beat);
// Closed hi-hat 16ths
for (let s = 0; s < 4; s++) {
const ht = t + b(s * 0.25);
N(notes, 42, ht, ht + b(0.05), 50 + (s === 0 ? 20 : 0));
}
// Kick pattern: syncopated
if (beat === 0) {
N(notes, 36, t, t + b(0.1), 100);
}
if (beat === 1) {
N(notes, 36, t + b(0.5), t + b(0.6), 85);
}
if (beat === 2) {
N(notes, 36, t, t + b(0.1), 95);
N(notes, 36, t + b(0.75), t + b(0.85), 80);
}
// Snare on 2 and 4
if (beat === 1 || beat === 3) {
N(notes, 38, t, t + b(0.1), 95);
}
}
// Open hi-hat on beat 4-and
N(notes, 46, b(bar * 4 + 3.5), b(bar * 4 + 3.7), 75);
// Crash on 1, 5, 9, 13
if (bar % 4 === 0) {
N(notes, 49, b(bar * 4), b(bar * 4 + 0.3), 90);
}
}
},
},
],
});
}
// ===== 5: KALOS (Gen VI) — F major pentatonic · 84 BPM =====
function buildKalos() {
const root = ROOTS.F - 12; // F3
const sc = SCALES.majorPentatonic;
const qpm = 84;
const totalBars = 16;
const totalTime = totalBars * 4 * spb(qpm);
return generate({
qpm,
totalTime,
layers: [
// Harp arpeggios (program 46)
{
program: 46,
fn(notes, b) {
// Flowing eighth-note arpeggios, French-waltz feel
const chordDegs = [
[0, 2, 4, 7], // F
[2, 4, 7, 9], // Am
[0, 2, 4, 7], // F
[4, 7, 9, 12], // C
[2, 4, 7, 9], // Am/Dm
[0, 2, 4, 7], // F
[4, 7, 9, 12], // C
[0, 2, 4, 7], // F
];
for (let bar = 0; bar < totalBars; bar++) {
const chord = chordDegs[bar % chordDegs.length];
// Ascending-descending arpeggio pattern per bar
const pattern = [0, 1, 2, 3, 2, 1, 0, 3];
for (let eighth = 0; eighth < 8; eighth++) {
const deg = chord[pattern[eighth]];
const octShift = eighth < 4 ? 0 : 7;
const t = b(bar * 4 + eighth * 0.5);
const p = scaleNote(root + 12, sc, deg + octShift);
N(notes, p, t, t + b(0.45), 55 + (eighth === 0 ? 10 : 0));
}
}
},
},
// Accordion melody (program 21)
{
program: 21,
fn(notes, b) {
// Romantic, French-inspired melody
const melody = [
// Phrase A (bars 1-4) — gentle, lilting
{ d: 4, s: 0, dur: 2 },
{ d: 5, s: 2, dur: 1 },
{ d: 4, s: 3, dur: 1 },
{ d: 2, s: 4, dur: 2 },
{ d: 4, s: 6, dur: 2 },
{ d: 5, s: 8, dur: 1.5 },
{ d: 7, s: 9.5, dur: 1 },
{ d: 5, s: 10.5, dur: 1.5 },
{ d: 4, s: 12, dur: 3 },
{ d: 2, s: 15, dur: 1 },
// Phrase A2 (bars 5-8) — expands upward
{ d: 4, s: 16, dur: 1 },
{ d: 5, s: 17, dur: 1 },
{ d: 7, s: 18, dur: 2 },
{ d: 9, s: 20, dur: 1.5 },
{ d: 7, s: 21.5, dur: 1 },
{ d: 5, s: 22.5, dur: 1.5 },
{ d: 4, s: 24, dur: 2 },
{ d: 2, s: 26, dur: 1 },
{ d: 4, s: 27, dur: 1 },
{ d: 5, s: 28, dur: 2 },
{ d: 4, s: 30, dur: 2 },
// Phrase B (bars 9-12) — emotional climax
{ d: 7, s: 32, dur: 2 },
{ d: 9, s: 34, dur: 1 },
{ d: 10, s: 35, dur: 1 },
{ d: 9, s: 36, dur: 2 },
{ d: 7, s: 38, dur: 1 },
{ d: 5, s: 39, dur: 1 },
{ d: 7, s: 40, dur: 1.5 },
{ d: 9, s: 41.5, dur: 1.5 },
{ d: 10, s: 43, dur: 1 },
{ d: 9, s: 44, dur: 2 },
{ d: 7, s: 46, dur: 2 },
// Phrase B2 (bars 13-16) — gentle resolution
{ d: 5, s: 48, dur: 1.5 },
{ d: 4, s: 49.5, dur: 1 },
{ d: 2, s: 50.5, dur: 1.5 },
{ d: 4, s: 52, dur: 2 },
{ d: 5, s: 54, dur: 1 },
{ d: 4, s: 55, dur: 1 },
{ d: 2, s: 56, dur: 2 },
{ d: 0, s: 58, dur: 2 },
{ d: 0, s: 60, dur: 4 },
];
for (const n of melody) {
const p = scaleNote(root + 12, sc, n.d);
const vel = n.s >= 32 && n.s < 48 ? 85 : 75;
N(notes, p, b(n.s), b(n.s + n.dur * 0.92), vel);
}
},
},
// Strings pad (program 48)
{
program: 48,
fn(notes, b) {
// Warm sustained chords, 2-bar phrasing
const chords = [
[0, 4, 7], // F (I)
[2, 4, 9], // Am (iii-ish pentatonic)
[0, 4, 7], // F (I)
[4, 7, 9], // C area
[2, 4, 7], // Dm
[0, 4, 9], // F
[4, 7, 9], // C
[0, 4, 7], // F
];
for (let i = 0; i < chords.length; i++) {
const startBeat = i * 8;
const t = b(startBeat);
for (const deg of chords[i]) {
const p = scaleNote(root, sc, deg);
N(notes, p, t, t + b(7.5), 45);
}
}
},
},
// Drums — light, waltz-ish
{
isDrum: true,
fn(notes, b) {
for (let bar = 0; bar < totalBars; bar++) {
for (let beat = 0; beat < 4; beat++) {
const t = b(bar * 4 + beat);
// Ride cymbal on each beat
N(notes, 51, t, t + b(0.12), 42);
// Light kick on 1
if (beat === 0) {
N(notes, 36, t, t + b(0.12), 65);
}
// Ghost snare on 3
if (beat === 2) {
N(notes, 38, t, t + b(0.12), 45);
}
// Cross-stick on 2 and 4 (using snare at low velocity for brush feel)
if (beat === 1 || beat === 3) {
N(notes, 38, t, t + b(0.08), 30);
}
}
// Kick on beat 3 every other bar for gentle pulse
if (bar % 2 === 1) {
N(notes, 36, b(bar * 4 + 2), b(bar * 4 + 2.12), 50);
}
}
},
},
],
});
}
// --------------- Visualizer Helpers ---------------
function stopAllPlayers() {
document.querySelectorAll("midi-player").forEach((p) => {
try {
p.stop();
} catch (_) {}
});
}
function zoomVisualizer(viz) {
const svg = viz.querySelector("svg");
if (!svg) return;
const rects = svg.querySelectorAll("rect[data-note]");
if (!rects.length) return;
let minY = Infinity,
maxY = -Infinity;
rects.forEach((r) => {
const y = parseFloat(r.getAttribute("y") || 0);
const h = parseFloat(r.getAttribute("height") || 0);
if (y < minY) minY = y;
if (y + h > maxY) maxY = y + h;
});
if (!isFinite(minY)) return;
const vb = svg.getAttribute("viewBox");
if (!vb) return;
const [vx, , vw, vh] = vb.split(" ").map(Number);
const m = vh * 0.05;
svg.setAttribute(
"viewBox",
`${vx} ${Math.max(0, minY - m)} ${vw} ${Math.min(vh, maxY - minY + m * 2)}`
);
svg.setAttribute("preserveAspectRatio", "xMidYMid meet");
}
function observeViz(viz) {
const obs = new MutationObserver(() => {
const svg = viz.querySelector("svg");
if (svg && svg.querySelectorAll("rect[data-note]").length > 0) {
zoomVisualizer(viz);
obs.disconnect();
}
});
obs.observe(viz, { childList: true, subtree: true, attributes: true });
zoomVisualizer(viz);
}
// --------------- Initialization ---------------
document.addEventListener("DOMContentLoaded", () => {
// Build NoteSequences for generated tracks (Gen I–V)
const sequences = [buildKanto(), buildJohto(), buildHoenn(), buildSinnoh(), buildUnova()];
// Assign NoteSequences to players/visualizers without a src attribute
const players = document.querySelectorAll("midi-player");
const visualizers = document.querySelectorAll("midi-visualizer");
players.forEach((player, i) => {
if (!player.getAttribute("src") && i < sequences.length) {
player.noteSequence = sequences[i];
}
});
visualizers.forEach((viz, i) => {
if (!viz.getAttribute("src") && i < sequences.length) {
viz.noteSequence = sequences[i];
}
observeViz(viz);
});
// Tab navigation
document.querySelectorAll(".tabs").forEach((nav) => {
const tabs = nav.querySelectorAll(".tab");
tabs.forEach((tab) => {
tab.addEventListener("click", () => {
stopAllPlayers();
tabs.forEach((t) => t.classList.remove("active"));
tab.classList.add("active");
const parent = tab.closest(".collection") || document.body;
parent.querySelectorAll(".piece").forEach((p) => p.classList.remove("active"));
const target = document.getElementById(`piece-${tab.dataset.track}`);
if (target) {
target.classList.add("active");
target.querySelectorAll("midi-visualizer").forEach(observeViz);
}
});
});
});
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clausic — Pokemon Collection</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.jsdelivr.net/combine/npm/[email protected],npm/@magenta/[email protected]/es6/core.js,npm/[email protected]"></script>
</head>
<body>
<header>
<h1>Clausic — Pokemon Collection</h1>
<p class="subtitle">7 original MIDI pieces across 6 Pokemon generations</p>
</header>
<nav class="tabs" role="tablist">
<button class="tab active" data-track="pk-0">Gen I — Kanto</button>
<button class="tab" data-track="pk-1">Gen II — Johto</button>
<button class="tab" data-track="pk-2">Gen III — Hoenn</button>
<button class="tab" data-track="pk-3">Gen IV — Sinnoh</button>
<button class="tab" data-track="pk-4">Gen V — Unova</button>
<button class="tab" data-track="pk-5">Gen VI — Kalos</button>
<button class="tab" data-track="pk-6">Gen VI — Azure Bay</button>
</nav>
<section class="piece active" id="piece-pk-0">
<h2><span class="gen-badge">I</span> Kanto</h2>
<p class="meta">Pallet Town warmth · G major pentatonic · 108 BPM · marimba + guitar + glockenspiel</p>
<details class="gen-details">
<summary>View generation code</summary>
<div class="gen-code"><pre><span class="comment">// KANTO (Gen I) — G major pentatonic · 108 BPM</span>
<span class="comment">// Cheerful, nostalgic 8-bit style melody — two 8-bar phrases</span>
<span class="comment">// Pallet Town warmth: marimba melody + acoustic guitar chords + glockenspiel accents</span>
{
<span class="key">root</span>: <span class="str">"G"</span> <span class="val">(-12)</span>, <span class="key">scale</span>: <span class="str">"majorPentatonic"</span> <span class="val">[0,2,4,7,9]</span>,
<span class="key">qpm</span>: <span class="val">108</span>, <span class="key">bars</span>: <span class="val">16</span>,
<span class="key">layers</span>: [
{ <span class="key">program</span>: <span class="val">12</span> <span class="comment">/* Marimba */</span>, <span class="comment">// melody — cheerful pentatonic phrases with varied rhythms</span> },
{ <span class="key">program</span>: <span class="val">25</span> <span class="comment">/* AcousticGuitar */</span>, <span class="comment">// strum chords: I-V-vi-IV progression</span> },
{ <span class="key">program</span>: <span class="val">9</span> <span class="comment">/* Glockenspiel */</span>, <span class="comment">// sparse counter-melody accents</span> },
{ <span class="key">isDrum</span>: <span class="val">true</span>, <span class="comment">// pop beat: kick 1&3, snare 2&4, 8th-note hats, crash every 4 bars</span> }
]
}</pre></div>
</details>
<midi-visualizer type="piano-roll" id="viz-0"></midi-visualizer>
<midi-player sound-font visualizer="#viz-0"></midi-player>
</section>
<section class="piece" id="piece-pk-1">
<h2><span class="gen-badge">II</span> Johto</h2>
<p class="meta">Bittersweet nostalgia · A Dorian · 76 BPM · piano + flute + strings</p>
<details class="gen-details">
<summary>View generation code</summary>
<div class="gen-code"><pre><span class="comment">// JOHTO (Gen II) — A Dorian · 76 BPM</span>
<span class="comment">// Bittersweet nostalgia: piano melody + flute counter + string pads</span>
<span class="comment">// Dorian mode gives the natural 6th (F#) that lifts the melancholy</span>
{
<span class="key">root</span>: <span class="str">"A"</span>, <span class="key">scale</span>: <span class="str">"dorian"</span> <span class="val">[0,2,3,5,7,9,10]</span>,
<span class="key">qpm</span>: <span class="val">76</span>, <span class="key">bars</span>: <span class="val">16</span>,
<span class="key">layers</span>: [
{ <span class="key">program</span>: <span class="val">0</span> <span class="comment">/* Piano */</span>, <span class="comment">// gentle, lyrical melody with jazz-inflected phrasing</span> },
{ <span class="key">program</span>: <span class="val">73</span> <span class="comment">/* Flute */</span>, <span class="comment">// counter-melody entering bar 3, weaves around piano</span> },
{ <span class="key">program</span>: <span class="val">48</span> <span class="comment">/* Strings */</span>, <span class="comment">// sustained chords: Am-C-D-Em (Dorian IV is major)</span> },
{ <span class="key">isDrum</span>: <span class="val">true</span>, <span class="comment">// soft brushed ride cymbal + gentle kick-snare</span> }
]
}</pre></div>
</details>
<midi-visualizer type="piano-roll" id="viz-1"></midi-visualizer>
<midi-player sound-font visualizer="#viz-1"></midi-player>
</section>
<section class="piece" id="piece-pk-2">
<h2><span class="gen-badge">III</span> Hoenn</h2>
<p class="meta">Tropical energy · C major · 96 BPM · synth + marimba + steel drums</p>
<details class="gen-details">
<summary>View generation code</summary>
<div class="gen-code"><pre><span class="comment">// HOENN (Gen III) — C major · 96 BPM</span>
<span class="comment">// Tropical energy: synth lead + marimba arpeggios + steel drums</span>
<span class="comment">// Bright major-key adventure with island vibes</span>
{
<span class="key">root</span>: <span class="str">"C"</span>, <span class="key">scale</span>: <span class="str">"major"</span> <span class="val">[0,2,4,5,7,9,11]</span>,
<span class="key">qpm</span>: <span class="val">96</span>, <span class="key">bars</span>: <span class="val">16</span>,
<span class="key">layers</span>: [
{ <span class="key">program</span>: <span class="val">81</span> <span class="comment">/* SynthLeadSaw */</span>, <span class="comment">// bright tropical melody</span> },
{ <span class="key">program</span>: <span class="val">12</span> <span class="comment">/* Marimba */</span>, <span class="comment">// 16th-note arpeggios cycling chord tones</span> },
{ <span class="key">program</span>: <span class="val">114</span> <span class="comment">/* SteelDrums */</span>, <span class="comment">// half-note chord voicings: C-F-G-Am</span> },
{ <span class="key">isDrum</span>: <span class="val">true</span>, <span class="comment">// upbeat: kick+snare with 8th-note hats, crash every 4 bars</span> }
]
}</pre></div>
</details>
<midi-visualizer type="piano-roll" id="viz-2"></midi-visualizer>
<midi-player sound-font visualizer="#viz-2"></midi-player>
</section>
<section class="piece" id="piece-pk-3">
<h2><span class="gen-badge">IV</span> Sinnoh</h2>
<p class="meta">Mythic depths · D Phrygian · 72 BPM · organ + choir + strings</p>
<details class="gen-details">
<summary>View generation code</summary>
<div class="gen-code"><pre><span class="comment">// SINNOH (Gen IV) — D Phrygian · 72 BPM</span>
<span class="comment">// Mythic depths: organ melody + choir pads + string counterpoint</span>
<span class="comment">// Phrygian b2 (Eb) creates the dark, ancient atmosphere</span>
{
<span class="key">root</span>: <span class="str">"D"</span>, <span class="key">scale</span>: <span class="str">"phrygian"</span> <span class="val">[0,1,3,5,7,8,10]</span>,
<span class="key">qpm</span>: <span class="val">72</span>, <span class="key">bars</span>: <span class="val">16</span>,
<span class="key">layers</span>: [
{ <span class="key">program</span>: <span class="val">19</span> <span class="comment">/* ChurchOrgan */</span>, <span class="comment">// dark sustained chords: Dm-Eb-Am-F Phrygian cycle</span> },
{ <span class="key">program</span>: <span class="val">52</span> <span class="comment">/* ChoirAahs */</span>, <span class="comment">// ethereal sustained pads with parallel fifths</span> },
{ <span class="key">program</span>: <span class="val">48</span> <span class="comment">/* Strings */</span>, <span class="comment">// slow, mysterious melody — dark descending phrases</span> },
{ <span class="key">isDrum</span>: <span class="val">true</span>, <span class="comment">// sparse atmospheric percussion: ride bell + distant kick</span> }
]
}</pre></div>
</details>
<midi-visualizer type="piano-roll" id="viz-3"></midi-visualizer>
<midi-player sound-font visualizer="#viz-3"></midi-player>
</section>
<section class="piece" id="piece-pk-4">
<h2><span class="gen-badge">V</span> Unova</h2>
<p class="meta">Urban electric · Bb Mixolydian · 110 BPM · synth + brass + electric piano</p>
<details class="gen-details">
<summary>View generation code</summary>
<div class="gen-code"><pre><span class="comment">// UNOVA (Gen V) — Bb Mixolydian · 110 BPM</span>
<span class="comment">// Urban electric: synth lead + brass stabs + electric piano chords</span>
<span class="comment">// Mixolydian b7 (Ab) gives the funky, urban edge</span>
{
<span class="key">root</span>: <span class="str">"Bb"</span>, <span class="key">scale</span>: <span class="str">"mixolydian"</span> <span class="val">[0,2,4,5,7,9,10]</span>,
<span class="key">qpm</span>: <span class="val">110</span>, <span class="key">bars</span>: <span class="val">16</span>,
<span class="key">layers</span>: [
{ <span class="key">program</span>: <span class="val">80</span> <span class="comment">/* SynthLeadSquare */</span>, <span class="comment">// driving, rhythmic melody</span> },
{ <span class="key">program</span>: <span class="val">56</span> <span class="comment">/* Trumpet */</span>, <span class="comment">// punchy off-beat stab accents</span> },
{ <span class="key">program</span>: <span class="val">4</span> <span class="comment">/* ElectricPiano */</span>, <span class="comment">// rhythmic chord comping: Bb-F-Cm-Ab</span> },
{ <span class="key">isDrum</span>: <span class="val">true</span>, <span class="comment">// electronic: syncopated kick, 16th-note hats, open hat on 4-and</span> }
]
}</pre></div>
</details>
<midi-visualizer type="piano-roll" id="viz-4"></midi-visualizer>
<midi-player sound-font visualizer="#viz-4"></midi-player>
</section>
<section class="piece" id="piece-pk-5">
<h2><span class="gen-badge">VI</span> Kalos</h2>
<p class="meta">Elegant warmth · harp + oboe + strings + horn · F major pentatonic · 84 BPM</p>
<details class="gen-details">
<summary>View generation code</summary>
<div class="gen-code"><pre><span class="comment">// KALOS (Gen VI) — F major pentatonic · 84 BPM</span>
<span class="comment">// Elegant warmth: harp arpeggios + accordion melody + string pads</span>
<span class="comment">// French-waltz feel with flowing eighth-note arpeggios</span>
{
<span class="key">root</span>: <span class="str">"F"</span> <span class="val">(-12)</span>, <span class="key">scale</span>: <span class="str">"majorPentatonic"</span> <span class="val">[0,2,4,7,9]</span>,
<span class="key">qpm</span>: <span class="val">84</span>, <span class="key">bars</span>: <span class="val">16</span>,
<span class="key">layers</span>: [
{ <span class="key">program</span>: <span class="val">46</span> <span class="comment">/* Harp */</span>, <span class="comment">// flowing ascending-descending arpeggios per bar</span> },
{ <span class="key">program</span>: <span class="val">21</span> <span class="comment">/* Accordion */</span>, <span class="comment">// romantic, French-inspired melody</span> },
{ <span class="key">program</span>: <span class="val">48</span> <span class="comment">/* Strings */</span>, <span class="comment">// warm sustained chord pads, 2-bar phrasing</span> },
{ <span class="key">isDrum</span>: <span class="val">true</span>, <span class="comment">// light waltz-ish: ride cymbal + ghost snare</span> }
]
}</pre></div>
</details>
<midi-visualizer type="piano-roll" id="viz-5" src="data:audio/midi;base64,TVRoZAAAAAYAAQAFAeBNVHJrAAAKNgD/AwRIYXJwAP9RAwrmLQDALgCQNSqBcIA1AACQQTOBcIBBAACQQyuBcIBDAACQRTGBcIBFAACQSDWBcIBIAACQSjOBcIBKAACQSDSBcIBIAACQRSqBcIBFAACQPjGBcIA+AACQSi2BcIBKAACQTC+BcIBMAACQTiaBcIBOAACQUSyBcIBRAACQUzSBcIBTAACQUTSBcIBRAACQTjSBcIBOAACQOieBcIA6AACQRjSBcIBGAACQSDKBcIBIAACQSjCBcIBKAACQTSaBcIBNAACQTyuBcIBPAACQTSuBcIBNAACQSi+BcIBKAACQPCmBcIA8AACQSCqBcIBIAACQSieBcIBKAACQTC2BcIBMAACQTyaBcIBPAACQUSuBcIBRAACQTyeBcIBPAACQTCmBcIBMAACQNS6BcIA1AACQQTaBcIBBAACQQyeBcIBDAACQRTGBcIBFAACQSC+BcIBIAACQSieBcIBKAACQSCuBcIBIAACQRSiBcIBFAACQPi6BcIA+AACQSiuBcIBKAACQTDCBcIBMAACQTiiBcIBOAACQUTaBcIBRAACQUzGBcIBTAACQUS6BcIBRAACQTi2BcIBOAACQOjaBcIA6AACQRjaBcIBGAACQSCiBcIBIAACQSiaBcIBKAACQTS6BcIBNAACQTyyBcIBPAACQTTCBcIBNAACQSjaBcIBKAACQPCeBcIA8AACQSDCBcIBIAACQSimBcIBKAACQTDSBcIBMAACQTzaBcIBPAACQUSiBcIBRAACQTyyBcIBPAACQTCyBcIBMAACQNTGBcIA1AACQQSyBcIBBAACQQy+BcIBDAACQRS+BcIBFAACQSCeBcIBIAACQSiaBcIBKAACQSCqBcIBIAACQRSuBcIBFAACQPiaBcIA+AACQSiuBcIBKAACQTDCBcIBMAACQTiyBcIBOAACQUTCBcIBRAACQUy+BcIBTAACQUSeBcIBRAACQTjGBcIBOAACQOi6BcIA6AACQRieBcIBGAACQSCmBcIBIAACQSjKBcIBKAACQTSqBcIBNAACQTzSBcIBPAACQTTWBcIBNAACQSi2BcIBKAACQPDaBcIA8AACQSDKBcIBIAACQSi6BcIBKAACQTCmBcIBMAACQTy2BcIBPAACQUTKBcIBRAACQTzSBcIBPAACQTDKBcIBMAACQNS2BcIA1AACQQTGBcIBBAACQQy6BcIBDAACQRTGBcIBFAACQSCyBcIBIAACQSiqBcIBKAACQSC2BcIBIAACQRTKBcIBFAACQPi+BcIA+AACQSiuBcIBKAACQTDWBcIBMAACQTjGBcIBOAACQUTCBcIBRAACQUzSBcIBTAACQUSmBcIBRAACQTjGBcIBOAACQOjaBcIA6AACQRieBcIBGAACQSCqBcIBIAACQSjaBcIBKAACQTS6BcIBNAACQTy2BcIBPAACQTTaBcIBNAACQSjGBcIBKAACQPCyBcIA8AACQSDOBcIBIAACQSi6BcIBKAACQTDCBcIBMAACQTzGBcIBPAACQUS2BcIBRAACQTyaBcIBPAACQTDKBcIBMAACQNTaBcIA1AACQQSmBcIBBAACQQyuBcIBDAACQRSqBcIBFAACQSCaBcIBIAACQSjCBcIBKAACQSCuBcIBIAACQRTSBcIBFAACQPjaBcIA+AACQSi6BcIBKAACQTDaBcIBMAACQTjOBcIBOAACQUTWBcIBRAACQUy6BcIBTAACQUS2BcIBRAACQTi6BcIBOAACQOimBcIA6AACQRjaBcIBGAACQSCmBcIBIAACQSjOBcIBKAACQTSeBcIBNAACQTzaBcIBPAACQTSiBcIBNAACQSiyBcIBKAACQPDOBcIA8AACQSCaBcIBIAACQSiyBcIBKAACQTDCBcIBMAACQTzSBcIBPAACQUTCBcIBRAACQTzOBcIBPAACQTDWBcIBMAACQNSmBcIA1AACQQSmBcIBBAACQQzOBcIBDAACQRTKBcIBFAACQSDSBcIBIAACQSimBcIBKAACQSDCBcIBIAACQRSuBcIBFAACQPi+BcIA+AACQSieBcIBKAACQTDSBcIBMAACQTiaBcIBOAACQUS6BcIBRAACQUyaBcIBTAACQUTGBcIBRAACQTjaBcIBOAACQOjaBcIA6AACQRjaBcIBGAACQSDGBcIBIAACQSjSBcIBKAACQTSuBcIBNAACQTy2BcIBPAACQTSeBcIBNAACQSiaBcIBKAACQPCiBcIA8AACQSDSBcIBIAACQSiiBcIBKAACQTCqBcIBMAACQTyyBcIBPAACQUS2BcIBRAACQTzKBcIBPAACQTC2BcIBMAACQNTOBcIA1AACQQS6BcIBBAACQQzWBcIBDAACQRTSB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"></midi-visualizer>
<midi-player sound-font visualizer="#viz-5" src="data:audio/midi;base64,TVRoZAAAAAYAAQAFAeBNVHJrAAAKNgD/AwRIYXJwAP9RAwrmLQDALgCQNSqBcIA1AACQQTOBcIBBAACQQyuBcIBDAACQRTGBcIBFAACQSDWBcIBIAACQSjOBcIBKAACQSDSBcIBIAACQRSqBcIBFAACQPjGBcIA+AACQSi2BcIBKAACQTC+BcIBMAACQTiaBcIBOAACQUSyBcIBRAACQUzSBcIBTAACQUTSBcIBRAACQTjSBcIBOAACQOieBcIA6AACQRjSBcIBGAACQSDKBcIBIAACQSjCBcIBKAACQTSaBcIBNAACQTyuBcIBPAACQTSuBcIBNAACQSi+BcIBKAACQPCmBcIA8AACQSCqBcIBIAACQSieBcIBKAACQTC2BcIBMAACQTyaBcIBPAACQUSuBcIBRAACQTyeBcIBPAACQTCmBcIBMAACQNS6BcIA1AACQQTaBcIBBAACQQyeBcIBDAACQRTGBcIBFAACQSC+BcIBIAACQSieBcIBKAACQSCuBcIBIAACQRSiBcIBFAACQPi6BcIA+AACQSiuBcIBKAACQTDCBcIBMAACQTiiBcIBOAACQUTaBcIBRAACQUzGBcIBTAACQUS6BcIBRAACQTi2BcIBOAACQOjaBcIA6AACQRjaBcIBGAACQSCiBcIBIAACQSiaBcIBKAACQTS6BcIBNAACQTyyBcIBPAACQTTCBcIBNAACQSjaBcIBKAACQPCeBcIA8AACQSDCBcIBIAACQSimBcIBKAACQTDSBcIBMAACQTzaBcIBPAACQUSiBcIBRAACQTyyBcIBPAACQTCyBcIBMAACQNTGBcIA1AACQQSyBcIBBAACQQy+BcIBDAACQRS+BcIBFAACQSCeBcIBIAACQSiaBcIBKAACQSCqBcIBIAACQRSuBcIBFAACQPiaBcIA+AACQSiuBcIBKAACQTDCBcIBMAACQTiyBcIBOAACQUTCBcIBRAACQUy+BcIBTAACQUSeBcIBRAACQTjGBcIBOAACQOi6BcIA6AACQRieBcIBGAACQSCmBcIBIAACQSjKBcIBKAACQTSqBcIBNAACQTzSBcIBPAACQTTWBcIBNAACQSi2BcIBKAACQPDaBcIA8AACQSDKBcIBIAACQSi6BcIBKAACQTCmBcIBMAACQTy2BcIBPAACQUTKBcIBRAACQTzSBcIBPAACQTDKBcIBMAACQNS2BcIA1AACQQTGBcIBBAACQQy6BcIBDAACQRTGBcIBFAACQSCyBcIBIAACQSiqBcIBKAACQSC2BcIBIAACQRTKBcIBFAACQPi+BcIA+AACQSiuBcIBKAACQTDWBcIBMAACQTjGBcIBOAACQUTCBcIBRAACQUzSBcIBTAACQUSmBcIBRAACQTjGBcIBOAACQOjaBcIA6AACQRieBcIBGAACQSCqBcIBIAACQSjaBcIBKAACQTS6BcIBNAACQTy2BcIBPAACQTTaBcIBNAACQSjGBcIBKAACQPCyBcIA8AACQSDOBcIBIAACQSi6BcIBKAACQTDCBcIBMAACQTzGBcIBPAACQUS2BcIBRAACQTyaBcIBPAACQTDKBcIBMAACQNTaBcIA1AACQQSmBcIBBAACQQyuBcIBDAACQRSqBcIBFAACQSCaBcIBIAACQSjCBcIBKAACQSCuBcIBIAACQRTSBcIBFAACQPjaBcIA+AACQSi6BcIBKAACQTDaBcIBMAACQTjOBcIBOAACQUTWBcIBRAACQUy6BcIBTAACQUS2BcIBRAACQTi6BcIBOAACQOimBcIA6AACQRjaBcIBGAACQSCmBcIBIAACQSjOBcIBKAACQTSeBcIBNAACQTzaBcIBPAACQTSiBcIBNAACQSiyBcIBKAACQPDOBcIA8AACQSCaBcIBIAACQSiyBcIBKAACQTDCBcIBMAACQTzSBcIBPAACQUTCBcIBRAACQTzOBcIBPAACQTDWBcIBMAACQNSmBcIA1AACQQSmBcIBBAACQQzOBcIBDAACQRTKBcIBFAACQSDSBcIBIAACQSimBcIBKAACQSDCBcIBIAACQRSuBcIBFAACQPi+BcIA+AACQSieBcIBKAACQTDSBcIBMAACQTiaBcIBOAACQUS6BcIBRAACQUyaBcIBTAACQUTGBcIBRAACQTjaBcIBOAACQOjaBcIA6AACQRjaBcIBGAACQSDGBcIBIAACQSjSBcIBKAACQTSuBcIBNAACQTy2BcIBPAACQTSeBcIBNAACQSiaBcIBKAACQPCiBcIA8AACQSDSBcIBIAACQSiiBcIBKAACQTCqBcIBMAACQTyyBcIBPAACQUS2BcIBRAACQTzKBcIBPAACQTC2BcIBMAACQNTOBcIA1AACQQS6BcIBBAACQQzWBcIBDAACQRTSB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"></midi-player>
</section>
<section class="piece" id="piece-pk-6">
<h2><span class="gen-badge">VI</span> Azure Bay</h2>
<p class="meta">Coastal serenity · harp + oboe + warm strings + flute · 84 BPM</p>
<details class="gen-details">
<summary>View generation code</summary>
<div class="gen-code"><pre><span class="comment">// KALOS — Azure Bay · 84 BPM</span>
<span class="comment">// Coastal serenity: harp arpeggios + oboe melody + warm strings + flute</span>
<span class="comment">// A serene coastal variation of the Kalos theme</span>
{
<span class="key">instruments</span>: <span class="str">"harp + oboe + warm strings + flute"</span>,
<span class="key">bpm</span>: <span class="val">84</span>,
<span class="comment">// Pre-composed MIDI (data URI embedded) — handcrafted coastal arrangement</span>
}</pre></div>
</details>
<midi-visualizer type="piano-roll" id="viz-6" src="data:audio/midi;base64,TVRoZAAAAAYAAQAEAeBNVHJrAAAKPAD/AwpIYXJwIFdhdmVzAP9RAwy3NQDALgCQMCiBcIAwAACQPCuBcIA8AACQPi2BcIA+AACQQCKBcIBAAACQQyyBcIBDAACQRSSBcIBFAACQQyKBcIBDAACQQC+BcIBAAACQNyGBcIA3AACQQzGBcIBDAACQRTCBcIBFAACQRyGBcIBHAACQSiGBcIBKAACQTCiBcIBMAACQSjGBcIBKAACQRyWBcIBHAACQOS+BcIA5AACQRSuBcIBFAACQRy2BcIBHAACQSS6BcIBJAACQTCyBcIBMAACQTjCBcIBOAACQTCOBcIBMAACQSSOBcIBJAACQNSqBcIA1AACQQS+BcIBBAACQQzCBcIBDAACQRS6BcIBFAACQSCSBcIBIAACQSiKBcIBKAACQSDGBcIBIAACQRSKBcIBFAACQMC+BcIAwAACQPCWBcIA8AACQPiKBcIA+AACQQCWBcIBAAACQQzGBcIBDAACQRSSBcIBFAACQQySBcIBDAACQQCaBcIBAAACQNyGBcIA3AACQQy+BcIBDAACQRS+BcIBFAACQRyeBcIBHAACQSimBcIBKAACQTCWBcIBMAACQSiKBcIBKAACQRymBcIBHAACQOSCBcIA5AACQRTKBcIBFAACQRyqBcIBHAACQSSmBcIBJAACQTCqBcIBMAACQTjCBcIBOAACQTCGBcIBMAACQSSWBcIBJAACQNS2BcIA1AACQQSaBcIBBAACQQyuBcIBDAACQRS+BcIBFAACQSCiBcIBIAACQSjKBcIBKAACQSC6BcIBIAACQRS2BcIBFAACQMCmBcIAwAACQPCmBcIA8AACQPiGBcIA+AACQQDCBcIBAAACQQyaBcIBDAACQRSCBcIBFAACQQy+BcIBDAACQQDCBcIBAAACQNyuBcIA3AACQQzGBcIBDAACQRTCBcIBFAACQRy2BcIBHAACQSieBcIBKAACQTCWBcIBMAACQSiCBcIBKAACQRyCBcIBHAACQOSaBcIA5AACQRTKBcIBFAACQRzGBcIBHAACQSSeBcIBJAACQTCCBcIBMAACQTimBcIBOAACQTCWBcIBMAACQSSyBcIBJAACQNTCBcIA1AACQQSSBcIBBAACQQymBcIBDAACQRSuBcIBFAACQSCSBcIBIAACQSiaBcIBKAACQSCuBcIBIAACQRSuBcIBFAACQMCqBcIAwAACQPCmBcIA8AACQPiOBcIA+AACQQDGBcIBAAACQQyqBcIBDAACQRSKBcIBFAACQQy6BcIBDAACQQCGBcIBAAACQNy2BcIA3AACQQyqBcIBDAACQRSKBcIBFAACQRyCBcIBHAACQSi2BcIBKAACQTCeBcIBMAACQSiGBcIBKAACQRy+BcIBHAACQOSiBcIA5AACQRTKBcIBFAACQRzGBcIBHAACQSS6BcIBJAACQTCyBcIBMAACQTiiBcIBOAACQTCiBcIBMAACQSSaBcIBJAACQNSaBcIA1AACQQSWBcIBBAACQQyCBcIBDAACQRSCBcIBFAACQSC2BcIBIAACQSjGBcIBKAACQSC+BcIBIAACQRSiBcIBFAACQMCCBcIAwAACQPDCBcIA8AACQPimBcIA+AACQQCeBcIBAAACQQyqBcIBDAACQRS2BcIBFAACQQyeBcIBDAACQQC2BcIBAAACQNyOBcIA3AACQQzCBcIBDAACQRTKBcIBFAACQRymBcIBHAACQSi+BcIBKAACQTC2BcIBMAACQSi6BcIBKAACQRyyBcIBHAACQOSSBcIA5AACQRS+BcIBFAACQRy6BcIBHAACQSSuBcIBJAACQTCCBcIBMAACQTiGBcIBOAACQTCqBcIBMAACQSSSBcIBJAACQNSSBcIA1AACQQSmBcIBBAACQQyOBcIBDAACQRS2BcIBFAACQSCuBcIBIAACQSiyBcIBKAACQSDGBcIBIAACQRS2BcIBFAACQMCKBcIAwAACQPCaBcIA8AACQPieBcIA+AACQQCyBcIBAAACQQyyBcIBDAACQRSOBcIBFAACQQyKBcIBDAACQQCWBcIBAAACQNyiBcIA3AACQQyaBcIBDAACQRSuBcIBFAACQRyCBcIBHAACQSiSBcIBKAACQTCKBcIBMAACQSieBcIBKAACQRzKBcIBHAACQOTGBcIA5AACQRSmBcIBFAACQRyqBcIBHAACQSTGBcIBJAACQTCyBcIBMAACQTjKBcIBOAACQTDGBcIBMAACQSSaBcIBJAACQNSWBcIA1AACQQS+BcIBBAACQQy+BcIBDAACQRS+BcIBFAACQSCSBcIBIAACQSiiBcIBKAACQSC+BcIBIAACQRSGBcIBFAACQMCGBcIAwAACQPDGBcIA8AACQPi2BcIA+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RxwATByORoJDAABFAABHAABMADkAAACSRSYARyYASSYATiaORoJFAABHAABJAABOADkAAACSQSUAQyUARSUASiWORoJBAABDAABFAABKADkAAACSPCwAPiwAQCwARSyORoI8AAA+AABAAABFADkAAACSQyoARSoARyoATCqORoJDAABFAABHAABMADkAAACSRR8ARx8ASR8ATh+ORoJFAABHAABJAABOADkAAACSQSIAQyIARSIASiKORoJBAABDAABFAABKADkAAACSPCoAPioAQCoARSqORoI8AAA+AABAAABFADkAAACSQx4ARR4ARx4ATB6ORoJDAABFAABHAABMADkAAACSRSYARyYASSYATiaORoJFAABHAABJAABOADkAAACSQSIAQyIARSIASiKORoJBAABDAABFAABKADkAAACSPBwAPhwAQBwARRyORoI8AAA+AABAAABFADkAAACSQyIARSIARyIATCKORoJDAABFAABHAABMADkAAACSRSsARysASSsATiuORoJFAABHAABJAABOADkAAACSQSkAQykARSkASimORoJBAABDAABFAABKADkAAACSPCAAPiAAQCAARSCORoI8AAA+AABAAABFADkAAACSQyoARSoARyoATCqORoJDAABFAABHAABMADkAAACSRSsARysASSsATiuORoJFAABHAABJAABOADkAAACSQSgAQygARSgASiiORoJBAABDAABFAABKADkAAACSPCYAPiYAQCYARSaORoI8AAA+AABAAABFADkAAACSQysARSsARysATCuORoJDAABFAABHAABMADkAAACSRSwARywASSwATiyORoJFAABHAABJAABOADkAAACSQScAQycARScASieORoJBAABDAABFAABKADkAAACSPCkAPikAQCkARSmORoI8AAA+AABAAABFADkAAACSQyUARSUARyUATCWORoJDAABFAABHAABMADkAAACSRR0ARx0ASR0ATh2ORoJFAABHAABJAABOADkAAACSQR4AQx4ARR4ASh6ORoJBAABDAABFAABKADkAAACSPCwAPiwAQCwARSyORoI8AAA+AABAAABFADkAAACSQygARSgARygATCiORoJDAABFAABHAABMADkAAACSRR0ARx0ASR0ATh2ORoJFAABHAABJAABOADkAAACSQSQAQyQARSQASiSORoJBAABDAABFAABKADkAAAD/LwBNVHJrAAAAyQD/AwtGbHV0ZSBDYWxscwDDSdoAgwAAjwAAAI8AAACPAAAAjwAAAACTTiWFUINOAIkwAACPAAAAjwAAAI8AAACPAAAAAJNKJoVQg0oAiTAAAI8AAACPAAAAjwAAAI8AAAAAk0UghVCDRQCJMAAAjwAAAI8AAACPAAAAjwAAAACTTB+FUINMAIkwAACPAAAAjwAAAI8AAACPAAAAAJNOIIVQg04AiTAAAI8AAACPAAAAjwAAAI8AAAAAk0ochVCDSgCJMAAAAP8vAA=="></midi-visualizer>
<midi-player sound-font visualizer="#viz-6" src="data:audio/midi;base64,TVRoZAAAAAYAAQAEAeBNVHJrAAAKPAD/AwpIYXJwIFdhdmVzAP9RAwy3NQDALgCQMCiBcIAwAACQPCuBcIA8AACQPi2BcIA+AACQQCKBcIBAAACQQyyBcIBDAACQRSSBcIBFAACQQyKBcIBDAACQQC+BcIBAAACQNyGBcIA3AACQQzGBcIBDAACQRTCBcIBFAACQRyGBcIBHAACQSiGBcIBKAACQTCiBcIBMAACQSjGBcIBKAACQRyWBcIBHAACQOS+BcIA5AACQRSuBcIBFAACQRy2BcIBHAACQSS6BcIBJAACQTCyBcIBMAACQTjCBcIBOAACQTCOBcIBMAACQSSOBcIBJAACQNSqBcIA1AACQQS+BcIBBAACQQzCBcIBDAACQRS6BcIBFAACQSCSBcIBIAACQSiKBcIBKAACQSDGBcIBIAACQRSKBcIBFAACQMC+BcIAwAACQPCWBcIA8AACQPiKBcIA+AACQQCWBcIBAAACQQzGBcIBDAACQRSSBcIBFAACQQySBcIBDAACQQCaBcIBAAACQNyGBcIA3AACQQy+BcIBDAACQRS+BcIBFAACQRyeBcIBHAACQSimBcIBKAACQTCWBcIBMAACQSiKBcIBKAACQRymBcIBHAACQOSCBcIA5AACQRTKBcIBFAACQRyqBcIBHAACQSSmBcIBJAACQTCqBcIBMAACQTjCBcIBOAACQTCGBcIBMAACQSSWBcIBJAACQNS2BcIA1AACQQSaBcIBBAACQQyuBcIBDAACQRS+BcIBFAACQSCiBcIBIAACQSjKBcIBKAACQSC6BcIBIAACQRS2BcIBFAACQMCmBcIAwAACQPCmBcIA8AACQPiGBcIA+AACQQDCBcIBAAACQQyaBcIBDAACQRSCBcIBFAACQQy+BcIBDAACQQDCBcIBAAACQNyuBcIA3AACQQzGBcIBDAACQRTCBcIBFAACQRy2BcIBHAACQSieBcIBKAACQTCWBcIBMAACQSiCBcIBKAACQRyCBcIBHAACQOSaBcIA5AACQRTKBcIBFAACQRzGBcIBHAACQSSeBcIBJAACQTCCBcIBMAACQTimBcIBOAACQTCWBcIBMAACQSSyBcIBJAACQNTCBcIA1AACQQSSBcIBBAACQQymBcIBDAACQRSuBcIBFAACQSCSBcIBIAACQSiaBcIBKAACQSCuBcIBIAACQRSuBcIBFAACQMCqBcIAwAACQPCmBcIA8AACQPiOBcIA+AACQQDGBcIBAAACQQyqBcIBDAACQRSKBcIBFAACQQy6BcIBDAACQQCGBcIBAAACQNy2BcIA3AACQQyqBcIBDAACQRSKBcIBFAACQRyCBcIBHAACQSi2BcIBKAACQTCeBcIBMAACQSiGBcIBKAACQRy+BcIBHAACQOSiBcIA5AACQRTKBcIBFAACQRzGBcIBHAACQSS6BcIBJAACQTCyBcIBMAACQTiiBcIBOAACQTCiBcIBMAACQSSaBcIBJAACQNSaBcIA1AACQQSWBcIBBAACQQyCBcIBDAACQRSCBcIBFAACQSC2BcIBIAACQSjGBcIBKAACQSC+BcIBIAACQRSiBcIBFAACQMCCBcIAwAACQPDCBcIA8AACQPimBcIA+AACQQCeBcIBAAACQQyqBcIBDAACQRS2BcIBFAACQQyeBcIBDAACQQC2BcIBAAACQNyOBcIA3AACQQzCBcIBDAACQRTKBcIBFAACQRymBcIBHAACQSi+BcIBKAACQTC2BcIBMAACQSi6BcIBKAACQRyyBcIBHAACQOSSBcIA5AACQRS+BcIBFAACQRy6BcIBHAACQSSuBcIBJAACQTCCBcIBMAACQTiGBcIBOAACQTCqBcIBMAACQSSSBcIBJAACQNSSBcIA1AACQQSmBcIBBAACQQyOBcIBDAACQRS2BcIBFAACQSCuBcIBIAACQSiyBcIBKAACQSDGBcIBIAACQRS2BcIBFAACQMCKBcIAwAACQPCaBcIA8AACQPieBcIA+AACQQCyBcIBAAACQQyyBcIBDAACQRSOBcIBFAACQQyKBcIBDAACQQCWBcIBAAACQNyiBcIA3AACQQyaBcIBDAACQRSuBcIBFAACQRyCBcIBHAACQSiSBcIBKAACQTCKBcIBMAACQSieBcIBKAACQRzKBcIBHAACQOTGBcIA5AACQRSmBcIBFAACQRyqBcIBHAACQSTGBcIBJAACQTCyBcIBMAACQTjKBcIBOAACQTDGBcIBMAACQSSaBcIBJAACQNSWBcIA1AACQQS+BcIBBAACQQy+BcIBDAACQRS+BcIBFAACQSCSBcIBIAACQSiiBcIBKAACQSC+BcIBIAACQRSGBcIBFAACQMCGBcIAwAACQPDGBcIA8AACQPi2BcIA+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RxwATByORoJDAABFAABHAABMADkAAACSRSYARyYASSYATiaORoJFAABHAABJAABOADkAAACSQSUAQyUARSUASiWORoJBAABDAABFAABKADkAAACSPCwAPiwAQCwARSyORoI8AAA+AABAAABFADkAAACSQyoARSoARyoATCqORoJDAABFAABHAABMADkAAACSRR8ARx8ASR8ATh+ORoJFAABHAABJAABOADkAAACSQSIAQyIARSIASiKORoJBAABDAABFAABKADkAAACSPCoAPioAQCoARSqORoI8AAA+AABAAABFADkAAACSQx4ARR4ARx4ATB6ORoJDAABFAABHAABMADkAAACSRSYARyYASSYATiaORoJFAABHAABJAABOADkAAACSQSIAQyIARSIASiKORoJBAABDAABFAABKADkAAACSPBwAPhwAQBwARRyORoI8AAA+AABAAABFADkAAACSQyIARSIARyIATCKORoJDAABFAABHAABMADkAAACSRSsARysASSsATiuORoJFAABHAABJAABOADkAAACSQSkAQykARSkASimORoJBAABDAABFAABKADkAAACSPCAAPiAAQCAARSCORoI8AAA+AABAAABFADkAAACSQyoARSoARyoATCqORoJDAABFAABHAABMADkAAACSRSsARysASSsATiuORoJFAABHAABJAABOADkAAACSQSgAQygARSgASiiORoJBAABDAABFAABKADkAAACSPCYAPiYAQCYARSaORoI8AAA+AABAAABFADkAAACSQysARSsARysATCuORoJDAABFAABHAABMADkAAACSRSwARywASSwATiyORoJFAABHAABJAABOADkAAACSQScAQycARScASieORoJBAABDAABFAABKADkAAACSPCkAPikAQCkARSmORoI8AAA+AABAAABFADkAAACSQyUARSUARyUATCWORoJDAABFAABHAABMADkAAACSRR0ARx0ASR0ATh2ORoJFAABHAABJAABOADkAAACSQR4AQx4ARR4ASh6ORoJBAABDAABFAABKADkAAACSPCwAPiwAQCwARSyORoI8AAA+AABAAABFADkAAACSQygARSgARygATCiORoJDAABFAABHAABMADkAAACSRR0ARx0ASR0ATh2ORoJFAABHAABJAABOADkAAACSQSQAQyQARSQASiSORoJBAABDAABFAABKADkAAAD/LwBNVHJrAAAAyQD/AwtGbHV0ZSBDYWxscwDDSdoAgwAAjwAAAI8AAACPAAAAjwAAAACTTiWFUINOAIkwAACPAAAAjwAAAI8AAACPAAAAAJNKJoVQg0oAiTAAAI8AAACPAAAAjwAAAI8AAAAAk0UghVCDRQCJMAAAjwAAAI8AAACPAAAAjwAAAACTTB+FUINMAIkwAACPAAAAjwAAAI8AAACPAAAAAJNOIIVQg04AiTAAAI8AAACPAAAAjwAAAI8AAAAAk0ochVCDSgCJMAAAAP8vAA=="></midi-player>
</section>
<script src="script.js"></script>
</body>
</html>Clausic — Pokemon Collection
MIDI compositions across 6 Pokemon generations, each with unique musical identity, instruments, and scales.