Steady Bounce Loop Player

by QuantumBolt10

80 lines3.6 KB

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Steady Bounce Loop Player</title>
     <style>
         body { font-family: sans-serif; text-align: center; padding-top: 4rem; background:#f0f4f8; }
         button { 
             font-size: 1.2rem; padding: 1rem 2rem; border:none; border-radius:12px;
             background:#2563eb; color:white; cursor:pointer; box-shadow:0 4px 12px #0003;
         }
         button:hover { background:#1d4ed8; }
         button:active { transform:scale(0.98); }
         p { margin-top:2rem; color:#444; }
     </style>
 </head>
 <body>
     <h1>🎵 Steady Bounce Loop — Fixed Pitch Only</h1>
     <p>✅ RULE: Only Middle C — NO pitch shifts anywhere</p>
     <button onclick="playSong()">🔊 CREATE & PLAY SONG</button>
     <script>
     function playSong() {
         const AudioContext = window.AudioContext || window.webkitAudioContext;
         const ctx = new AudioContext();
         const baseFreq = 261.63; // 🎯 FIXED PITCH: MIDDLE C ONLY
         const bpm = 110;
         const beat = 60 / bpm;
         // Helper: make ONLY fixed‑pitch tones
         function makeTone(dur, type='sine', vol=0.2) {
             const osc = ctx.createOscillator();
             const gain = ctx.createGain();
             osc.type = type;
             osc.frequency.value = baseFreq; // NEVER CHANGES
             gain.gain.setValueAtTime(vol, ctx.currentTime);
             gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + dur);
             osc.connect(gain); gain.connect(ctx.destination);
             osc.start(); osc.stop(ctx.currentTime + dur);
         }
         function clickSound(t=0) {
             const o=ctx.createOscillator(), g=ctx.createGain();
             o.type='square'; o.frequency.value=baseFreq;
             g.gain.setValueAtTime(0.15, ctx.currentTime+t);
             g.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime+t+0.05);
             o.connect(g); g.connect(ctx.destination); o.start(t); o.stop(t+0.05);
         }
         function maracaHit(t=0) {
             const buffer = ctx.createBuffer(1, ctx.sampleRate*0.15, ctx.sampleRate);
             const data = buffer.getChannelData(0);
             for(let i=0;i<buffer.length;i++) data[i]=(Math.random()*2-1)*0.4;
             const noise=ctx.createBufferSource(); noise.buffer=buffer;
             const f=ctx.createBiquadFilter(); f.type='highpass'; f.frequency.value=baseFreq;
             const g=ctx.createGain(); g.gain.setValueAtTime(0.12, ctx.currentTime+t);
             noise.connect(f); f.connect(g); g.connect(ctx.destination); noise.start(t);
         }
         // 🎼 EXACT PATTERN FROM YOUR SONG
         let now = ctx.currentTime;
         clickSound(now); // intro tap
         // Sequence: Long | Short‑Short | Long | Short×3 | Long | Long | Short‑Short | Long
         const seq = [
             {d:2*beat},{d:beat},{d:beat},
             {d:2*beat},{d:beat},{d:beat},{d:beat},
             {d:2*beat},{d:2*beat},
             {d:beat},{d:beat},{d:2*beat}
         ];
         let pos = now + 0.5;
         seq.forEach((n,i)=>{
             makeTone(n.d, 'triangle', 0.22);
             // synced effects
             if(i===2) { makeTone(0.15,'sine',0.1); } // chime after 2 shorts
             if(i===5) { maracaHit(pos); maracaHit(pos+0.08); } // double shake
             pos += n.d;
         });
         makeTone(0.25, 'sine', 0.18); // final ping
         // light background maraca pulse
         let bg = now + 0.7;
         for(let k=0;k<18;k++){ maracaHit(bg); bg += beat; }
     }
     </script>
 </body>
 </html>

Game Source: Steady Bounce Loop Player

Creator: QuantumBolt10

Libraries: none

Complexity: moderate (80 lines, 3.6 KB)

The full source code is displayed above on this page.

Remix Instructions

To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: steady-bounce-loop-player-quantumbolt10" to link back to the original. Then publish at arcadelab.ai/publish.