Marathon Pro Engine

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Trance Marathon Pro</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tone/14.8.49/Tone.js"></script>
  <style>
    body { background: #0a0a0a; color: #ff00ff; font-family: monospace; display: flex; flex-direction: column; align-items: center; padding: 20px; margin: 0; }
    h1 { text-shadow: 0 0 10px #ff00ff; margin-bottom: 30px; text-transform: uppercase; letter-spacing: 2px; }
    .rack { background: #111; border: 2px solid #ff00ff; border-radius: 10px; padding: 25px; box-shadow: 0 0 20px rgba(255, 0, 255, 0.2); width: 100%; max-width: 800px; }
    .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-bottom: 20px; }
    .module { background: #1a1a1a; padding: 15px; border: 1px solid #333; border-radius: 5px; }
    .module h3 { margin-top: 0; color: #00ffff; border-bottom: 1px solid #333; padding-bottom: 5px; font-size: 1rem; }
    .control-group { display: flex; flex-direction: column; margin-bottom: 12px; }
    label { font-size: 0.8rem; margin-bottom: 5px; color: #ccc; }
    input[type="range"] { width: 100%; cursor: pointer; accent-color: #ff00ff; }
    .transport { display: flex; gap: 15px; margin-top: 20px; }
    button { flex: 1; padding: 15px; cursor: pointer; background: #000; color: #00ffff; border: 2px solid #00ffff; font-weight: bold; text-transform: uppercase; transition: 0.2s; }
    button:hover { background: #00ffff; color: #000; box-shadow: 0 0 15px #00ffff; }
    #randomBtn { border-color: #ff00ff; color: #ff00ff; }
    #randomBtn:hover { background: #ff00ff; color: #000; box-shadow: 0 0 15px #ff00ff; }
  </style>
</head>
<body>

<h1>Marathon Pro Engine</h1>

<div class="rack">
  <div class="grid">
    <div class="module">
      <h3>Master Clock</h3>
      <div class="control-group">
        <label id="bpmLabel">BPM: 140</label>
        <input type="range" id="bpm" min="120" max="180" value="140">
      </div>
      <div class="control-group">
        <label>Master Reverb Wet</label>
        <input type="range" id="reverb" min="0" max="100" value="30">
      </div>
    </div>

    <div class="module">
      <h3>Trance Lead Shape</h3>
      <div class="control-group">
        <label>Filter Sweep (Hz)</label>
        <input type="range" id="filter" min="100" max="8000" value="2500">
      </div>
      <div class="control-group">
        <label>Lead Attack Swell</label>
        <input type="range" id="leadAttack" min="1" max="1000" value="10">
      </div>
      <div class="control-group">
        <label>Delay Feedback</label>
        <input type="range" id="delayFb" min="0" max="80" value="40">
      </div>
    </div>

    <div class="module">
      <h3>Low End</h3>
      <div class="control-group">
        <label>Kick Depth (Pitch Octaves)</label>
        <input type="range" id="kickPitch" min="1" max="8" value="4">
      </div>
      <div class="control-group">
        <label>Kick Decay</label>
        <input type="range" id="kickDecay" min="10" max="100" value="40">
      </div>
    </div>
  </div>

  <div class="transport">
    <button id="startBtn">System Offline [Start]</button>
    <button id="randomBtn">Generate New Rhythms</button>
  </div>
</div>

<script>
  // 1. Audio Architecture & Effects Chain
  const masterReverb = new Tone.Reverb({ decay: 4, wet: 0.3 }).toDestination();
  const leadDelay = new Tone.PingPongDelay("8n.", 0.4).connect(masterReverb);
  const leadFilter = new Tone.Filter(2500, "lowpass").connect(leadDelay);

  // 2. Synthesizers
  // "fatsawtooth" creates the classic detuned trance thickness
  const leadSynth = new Tone.PolySynth(Tone.Synth, {
    oscillator: { type: "fatsawtooth", count: 3, spread: 20 },
    envelope: { attack: 0.01, decay: 0.2, sustain: 0.4, release: 1 }
  }).connect(leadFilter);

  // Deep, tunable 808-style kick
  const kick = new Tone.MembraneSynth({
    pitchDecay: 0.05,
    octaves: 4,
    envelope: { attack: 0.001, decay: 0.4, sustain: 0.01, release: 0.4 }
  }).connect(masterReverb);

  // Sharp, bright hi-hat
  const hat = new Tone.MetalSynth({
    frequency: 300, envelope: { attack: 0.001, decay: 0.05, release: 0.01 },
    harmonicity: 5.1, modulationIndex: 32, resonance: 4000, octaves: 1.5
  }).connect(masterReverb);

  // White noise snare/clap hybrid
  const snare = new Tone.NoiseSynth({
    noise: { type: 'white' },
    envelope: { attack: 0.005, decay: 0.2, sustain: 0 }
  }).connect(masterReverb);

  // Bouncy mid-percussion
  const perc = new Tone.MembraneSynth({ pitchDecay: 0.1, octaves: 2 }).connect(masterReverb);

  // 3. Sequencer State (16 steps for complexity)
  let sequences = {
    kick:  [1,0,0,0, 1,0,0,0, 1,0,0,0, 1,0,0,0], // 4-on-the-floor
    hat:   [0,0,1,0, 0,0,1,0, 0,0,1,0, 0,0,1,1], // Off-beat + variation
    snare: [0,0,0,0, 1,0,0,0, 0,0,0,0, 1,0,0,0], // Claps on 2 and 4
    perc:  [0,1,0,0, 0,1,0,1, 0,0,0,1, 0,1,0,0]  // Syncopated groove
  };

  // The 5-tone trance scale pool (A Minor Pentatonic)
  const tranceScale = ["A3", "C4", "D4", "E4", "G4", "A4"];
  let leadMelody = Array.from({length: 16}, () => Math.random() > 0.5 ? tranceScale[Math.floor(Math.random() * tranceScale.length)] : null);

  // 4. Transport Loop
  new Tone.Sequence((time, step) => {
    // Percussion
    if (sequences.kick[step]) kick.triggerAttackRelease("A0", "16n", time);
    if (sequences.hat[step]) hat.triggerAttackRelease("16n", time, 0.2);
    if (sequences.snare[step]) snare.triggerAttackRelease("16n", time, 0.5);
    if (sequences.perc[step]) perc.triggerAttackRelease("E2", "16n", time, 0.4);

    // Melody
    let currentNote = leadMelody[step];
    if (currentNote) {
      leadSynth.triggerAttackRelease(currentNote, "16n", time, 0.6);
    }
  }, [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15], "16n").start(0);

  // 5. Interface Bindings
  document.getElementById('bpm').addEventListener('input', (e) => {
    Tone.Transport.bpm.value = e.target.value;
    document.getElementById('bpmLabel').innerText = `BPM: ${e.target.value}`;
  });

  document.getElementById('reverb').addEventListener('input', (e) => masterReverb.wet.value = e.target.value / 100);
  document.getElementById('filter').addEventListener('input', (e) => leadFilter.frequency.value = e.target.value);
  document.getElementById('delayFb').addEventListener('input', (e) => leadDelay.feedback.value = e.target.value / 100);

  document.getElementById('leadAttack').addEventListener('input', (e) => {
    // Morphs the lead from a sharp pluck to a slow swelling pad
    leadSynth.set({ envelope: { attack: e.target.value / 1000 } });
  });

  document.getElementById('kickPitch').addEventListener('input', (e) => kick.octaves = e.target.value);
  document.getElementById('kickDecay').addEventListener('input', (e) => kick.set({ envelope: { decay: e.target.value / 100 } }));

  // Randomizer Logic
  document.getElementById('randomBtn').addEventListener('click', () => {
    // Randomize hats and perc, leave kick and snare steady for workout rhythm
    sequences.hat = Array.from({length: 16}, () => Math.random() > 0.4 ? 1 : 0);
    sequences.perc = Array.from({length: 16}, () => Math.random() > 0.7 ? 1 : 0);

    // Generate new melody from the 5-tone scale
    leadMelody = Array.from({length: 16}, () => Math.random() > 0.5 ? tranceScale[Math.floor(Math.random() * tranceScale.length)] : null);
  });

  // Transport Control
  document.getElementById('startBtn').addEventListener('click', async (e) => {
    await Tone.start();
    if (Tone.Transport.state !== 'started') {
      Tone.Transport.start();
      e.target.innerText = "System Online [Stop]";
      e.target.style.background = "#00ffff";
      e.target.style.color = "#000";
    } else {
      Tone.Transport.stop();
      e.target.innerText = "System Offline [Start]";
      e.target.style.background = "#000";
      e.target.style.color = "#00ffff";
    }
  });
</script>
</body>
</html>