Beat How to Make a Rhythm Game (Browser AI Loop)

By Arron R.11 min read
How to make a rhythm game on Sorceress in a browser tab: lock BPM, score a loopable track in Music Gen (10 credits, Suno V5.5), cut hit and miss cues in SFX Gen

Rhythm games are the honest jam-scope target: one loop, one input reader, one bar of playable feedback. If the beat lands with the hit, the game reads as fun; if it drifts, no amount of polish saves it. This post walks the browser-only path for how to make a rhythm game on Sorceress — one prompt for the track in Music Gen, four one-second cues in SFX Gen, one WizardGenie session for the input loop. Every credit and model version verified against source on August 1, 2026.

How to make a rhythm game pipeline: BPM lock, Music Gen track, SFX cues, WizardGenie input loop
The how to make a rhythm game pipeline on Sorceress: lock BPM, score a loopable track, cut hit and miss cues, wire the input reader in a browser tab.

What how to make a rhythm game actually needs

DataForSEO lists how to make a rhythm game at 110 monthly searches with KD 0 (verified 2026-07-11 and cross-checked against sibling how to make a music game at 40/mo, KD 7 in research-supplement.md on August 1, 2026). The two queries look adjacent but split on intent. A music game (Rhythm Doctor, PaRappa the Rapper, Crypt of the NecroDancer) foregrounds the audio and asks the player to make music; a rhythm game (osu!, Beat Saber, Guitar Hero) foregrounds a note chart and asks the player to read a scrolling pattern in time with the audio. This post targets the second intent — the note-chart pattern reader — because that is the mechanic new devs stall on.

Three ingredients decide whether the loop lands: a locked BPM, one bar of playable input, one visible cue. Skip any of the three and the game is a screensaver with buttons.

Locked BPM means a single tempo (120 is a safe default) held across the whole session. Playable input means a single verb the player types — one lane, one key, one time window in which a press counts. Visible cue means the falling tile or hit ring the player reads before they press. If those three read cleanly, you have a rhythm game. You do not have a menu, you do not have a scoreboard, you do not have a leaderboard — you have the smallest interactive object in the genre, and everything else scales from there.

Lock the beat first: BPM, bar, note grammar

Every rhythm game brief starts in the wrong place. Devs open the code editor and start typing input handlers. The right start is a text file with four lines:

  • BPM: 120 (or 90 for a mellow lo-fi loop, 140 for chiptune).
  • Time signature: 4/4 unless you are ready to defend an odd meter.
  • Loop length: 8 or 16 bars. 8 is playable in a jam; 16 is enough content for a first release.
  • Lane count: 3 or 4 for a keyboard game. 5 is Guitar Hero territory and adds a week of chart-authoring per song.

Those four numbers govern every downstream decision. A 120 BPM 4/4 loop plays exactly two beats per second, so a note falling from the top of a 720-pixel play area at 720 divided by 2 equals 360 pixels-per-second lands on the hit line right on the beat. Change BPM to 100 and every falling note has to move slower, but the audio driver has not changed — the audio still runs on the AudioContext clock in the browser, and your visual code just reads that clock and interpolates. Get the numbers locked first and the code writes itself.

The Web Audio API is what you are building on. Its AudioContext exposes a currentTime value that ticks in seconds with sample-accurate precision, unlike performance.now() or the frame delta from requestAnimationFrame. Every browser rhythm engine — every serious one, from osu!web to Beatmania IIDX clones — reads AudioContext.currentTime once per frame and calculates note positions from that single clock. If you use the frame clock, your notes drift 30 milliseconds or more per minute at 60 fps, and the player feels the game skipping in a way they cannot name but will not stop mentioning.

Rhythm game scope: locked BPM at 120, four lanes D F J K, 8-bar loop, four SFX cues
Lock four numbers before you code: BPM, time signature, loop length, lane count. Everything else is downstream.

The Sorceress how to make a rhythm game pipeline in four steps

The full workflow for a browser rhythm game on Sorceress fits in one session:

  1. Score the track in Music Gen. One prompt, 10 credits, Suno V5.5. Export WAV for 2 more credits.
  2. Cut cues in SFX Gen. Four one-second stems for hit, miss, combo, fail — 1 credit per second on the byteplus-seed-audio model.
  3. Author the note chart. A JSON file with note events. Open the WAV in a browser waveform viewer, mark the downbeats, save to disk.
  4. Wire the input loop in WizardGenie. One prompt for the falling-note reader, the input window, the score counter, and the audio-clock sync.

Total budget for a four-lane jam scope: 16 credits (10 track + 2 WAV + 4 SFX) plus your WizardGenie BYO-key model cost. WizardGenie itself is a browser-based coding agent that lets you plug your own API key in for the code side, so there is no Sorceress markup on the coding step — you pay for tokens directly to the model provider. On the free tier every Sorceress account starts with enough credits to cover the audio side of one jam-scope game; the Sorceress $49 Lifetime Access tier adds a durable credit stipend if the plan is to ship multiple songs.

Step 1 — score a loopable track in Music Gen

Open Music Gen. The tool wraps Suno V5.5 in a browser UI that accepts a plain-English prompt and returns a music stem. Verified against src/app/music-gen/page.tsx on August 1, 2026: MUSIC_CREDIT_COST is 10 credits per track, the model key is kie-suno-music, and the V5_5 model surface supports a target-length slider from 10 to 360 seconds. WAV export via the sibling WAV_CREDIT_COST constant is 2 credits.

Prompt shape for a rhythm-game loop: three tokens the model reads, one hard rule at the end. Example:

120 BPM chiptune loop, 4/4 time, punchy kick on the downbeat, no vocals. 60 seconds.

The three tokens: tempo, meter, timbre. The one hard rule: no vocals. Vocals fight the SFX cues at hit time, and a jam-scope game does not need lyrics. If Music Gen returns a loop with an unclear downbeat, the note chart will feel loose; re-run once with a more emphatic kick line in the prompt. A model with a clear downbeat costs a second 10-credit run — cheaper than the two hours a soft downbeat will cost you when the beat map does not land.

Advanced mode inside Music Gen exposes a target-length field (10 to 360 seconds) and a lyric hook — leave both off for pure instrumental loops. Once the stem generates, hit Export WAV (2 credits) so you have a lossless file to run the waveform inspection against. MP3 works for playback but not for surgical beat mapping — the compression artifacts blur the amplitude spikes you rely on for note-event timestamps.

Suno is a hosted music generation service and the same one Sorceress Music Gen bed post covers for background loops. Suno V5.5 is the model that ships inside Sorceress Music Gen today; if the model version rotates upstream, the Sorceress source picks up the new model_key value and the credit cost stays 10 unless the Sorceress team explicitly updates it.

Step 2 — cut hit and miss cues in SFX Gen

The audio side of a rhythm game is not just the track. Four short cues carry the moment-to-moment feedback: a hit chirp when the player presses on the beat, a miss thud when they press off-beat, a combo chime when a streak passes a threshold, and a fail stinger when the streak breaks. Each cue lives inside a single second.

Open SFX Gen. Verified in src/app/sfx-gen/page.tsx on August 1, 2026: the default model is byteplus-seed-audio, and SEED_AUDIO_CREDITS_PER_SECOND is 1 with a SEED_AUDIO_MIN_CREDITS floor of 1. Four one-second cues cost 4 credits total. Prompts for each cue read like an SFX library entry:

  • Hit: a short chiptune coin-pickup blip, one syllable, 400 milliseconds, punchy, high register.
  • Miss: a low thud, one syllable, 400 milliseconds, dry, no reverb, muted low frequency.
  • Combo: an ascending chime, 800 milliseconds, bell-like, celebratory, resolves upward.
  • Fail: a descending stinger, 800 milliseconds, damp, deflating, resolves downward.

Ship the cues at their generated durations rather than trimming to zero-crossing manually — the model outputs a clean attack that starts inside the first 30 milliseconds of the file. If a cue reads too long, drop the duration prompt from 800 milliseconds to 500 milliseconds and re-run for another credit. Layer no cue on top of another — one press produces one cue, sample-triggered on the input event.

Naming conventions matter more than most jam devs treat them. Save the four cues as hit.wav, miss.wav, combo.wav, fail.wav. When WizardGenie writes the audio loader in the next step, it reads the filenames and wires them straight into the input handler without you having to rename anything in the code. That five-minute discipline saves an hour of copy-paste when the game gains a second track and you need a second cue set.

Step 3 — wire the input reader in WizardGenie

Open WizardGenie. WizardGenie ships on desktop with an auto-updater for supporters and Early Access, and in the browser at /wizard-genie/app with no install. Both surfaces run the same dual-agent loop — a planner picks the plan, an executor types the code — so a jam-scope rhythm game runs equally well from either. WizardGenie is BYO-key, meaning you plug your own model API key in and pay the model provider directly for tokens. The CODING_MODELS lineup on August 1, 2026 (verified in src/app/_home-v2/_data/tools.ts): Claude Opus 4.7, Claude Sonnet 4.6, GPT-5.5, Gemini 3.1 Pro, DeepSeek V4 Pro, Kimi K2.5, Grok 4.2, and MiniMax M2.7.

The right pairing for a rhythm-game jam is a frontier planner and a cheap executor. Claude Opus 4.7 or GPT-5.5 for the plan; DeepSeek V4 Pro or Kimi K2.5 for the executor. That split keeps the reasoning on a top-tier model and the code writing on a cheap-token model. A single-agent frontier run costs roughly five times what the split costs on typical rhythm-game code volumes — the executor writes far more tokens than the planner does.

One prompt to WizardGenie kicks off the whole file structure:

Build a browser rhythm game in Phaser 4.2.1.
Assets: track.wav (60s, 120 BPM), hit.wav, miss.wav, combo.wav, fail.wav, chart.json.
Four lanes bound to D F J K keys.
Falling neon notes, hit line at y=560 on a 720-tall canvas.
Audio clock: AudioContext.currentTime, not requestAnimationFrame delta.
Hit window: 100 ms early to 100 ms late = full credit, 100 ms to 200 ms = half.
Score, combo counter, fail state at 5 consecutive misses.

The plan the planner returns will list Phaser 4.2.1 (verified against the July 9, 2026 Phaser v4.2.1 “Giedi” release) scene structure, an AudioLoader that maps the four cue files, a ChartLoader for the JSON, and a NoteSpawner that reads AudioContext.currentTime once per frame in update() and positions the falling notes accordingly. The executor writes each file in sequence. Playtest in the WizardGenie browser preview.

Authoring the note chart (chart.json) is the manual step. Open the WAV in a browser waveform viewer, scrub to each downbeat, note the timestamp, pick a lane. A 60-second 120 BPM 4/4 loop has 240 beats; even placing a note on every fourth beat gives you 60 note events, which is a full-song beat map for a jam. Store the chart as an array of objects with a time in seconds and a lane index (0 through 3). A single prompt to WizardGenie scaffolds a JSON reader that treats the file as the source of truth. Google Beatmap conventions (see the beatmap Wikipedia entry) if you want a more structured schema with sliders and holds; for a jam-scope release, an array of tap events is enough.

Music Gen UI: 120 BPM chiptune loop prompt, Suno V5.5 model, 60 second target, 10 credits per track, 2 credits WAV
Music Gen with Suno V5.5: one prompt, 10 credits per track, 2 for WAV. Verified in source on August 1, 2026.

Playtest at native tempo before you polish

Before touching menu screens, background art, or a title logo, sit with the loop running for five minutes. Play the same 60-second track ten times. Ask three honest questions:

  • Does the hit cue land on the audio downbeat, or a frame after? A frame late reads as sluggish and points at a frame-clock bug.
  • Is the fail state fair? Five consecutive misses is the default here; if you fail on legitimate hits, your hit window is too tight.
  • Does the combo counter reset feel earned? A combo that breaks on a mistimed press should feel like the player’s fault, not the game’s.

If any answer is no, fix the audio-clock sync first. In Phaser, that means grounding your update loop off the AudioContext.currentTime the Web Audio API exposes, not the scene delta. Every rhythm game on the browser lives or dies on that one decision. Follow the rhythm game genre history lineage — the games that stuck (Dance Dance Revolution, PaRappa the Rapper, osu!, Beat Saber) treat the audio clock as ground truth and let the visuals catch up.

Scope trap: chart authoring balloons faster than any other rhythm-game task. A 60-second track with 60 notes takes about 20 minutes to chart by hand. A three-minute song with 400 notes takes over two hours. Ship one 60-second loop before you commit to a longer song, and test the whole pipeline end-to-end before you commit to a second track. Rhythm games fail on chart volume, not on code quality.

What how to make a rhythm game costs on Sorceress in 2026

Full jam-scope budget, verified against source on August 1, 2026:

  • Music Gen track (Suno V5.5): 10 credits — MUSIC_CREDIT_COST in src/app/music-gen/page.tsx.
  • WAV export: 2 credits — WAV_CREDIT_COST in the same file.
  • SFX Gen cues (byteplus-seed-audio, 4 x 1 second): 4 credits — SEED_AUDIO_CREDITS_PER_SECOND in src/app/sfx-gen/page.tsx.
  • WizardGenie: BYO-key, pay your model provider directly. A Planner and Executor pair (Claude Opus 4.7 planner, DeepSeek V4 Pro executor) runs a rhythm-game jam scope on well under one US dollar of tokens.

Total Sorceress credit cost for a four-lane 60-second rhythm game: 16 credits. On the $49 Lifetime Access tier (LIFETIME_PRICE in src/app/plans/page.tsx), that fits in a single day’s stipend with headroom left over for a second track. On the free tier, the starter credit balance covers one full jam-scope game with credits to spare for a re-roll of the music track if the first pass has a soft downbeat.

The scaffold does not build the game for you. It builds the parts of the game that never change — the audio loader, the input reader, the falling-note visualizer, the score counter, the fail state. What the scaffold cannot do is decide whether the beat map feels right. That is a taste call, and taste comes from playing the loop back until you can hum the note chart without looking. Ship one loop, playtest for five minutes, tweak the hit window by 10 milliseconds, and repeat. That is how to make a rhythm game — the actual answer, not the marketing one.

Frequently Asked Questions

What does how to make a rhythm game actually need on day one?

A locked BPM, one bar of playable input, one visible cue. Everything else is polish. Pick a tempo (120 BPM is a safe default), decide how many lanes (three or four for a jam), and write down the single note grammar the player will read. Skip any of the three and you burn hours on menu screens before you know if the core loop is fun.

How do I keep note timing in sync with music in a browser rhythm game?

Use the Web Audio API clock, not the browser frame clock. The AudioContext.currentTime timestamp is sample-accurate and drives every serious browser rhythm engine. Read AudioContext.currentTime once per frame in your update loop, subtract the audio start time, and compare against your note chart offsets in seconds. Frame-based timing (requestAnimationFrame delta) drifts by 30 ms or more per minute at 60 fps and destroys any rhythm game feel.

How many credits does a full how to make a rhythm game session cost on Sorceress in 2026?

Verified Aug 1, 2026 against src/app/music-gen/page.tsx and src/app/sfx-gen/page.tsx: one Music Gen track is 10 credits (Suno V5.5), one WAV export is 2 more, and SFX Gen bills 1 credit per second per model (byteplus-seed-audio). A four-lane game with one music loop, WAV export, and four one-second SFX cues (hit, miss, combo, fail) lands at 10 plus 2 plus 4 equals 16 credits. WizardGenie itself is BYO-key so the code side costs nothing beyond your model provider bill.

Do I need to know music theory to build a browser rhythm game?

No. Music Gen (backed by Suno V5.5) accepts a plain prompt like a 120 BPM chiptune loop in 4/4 time with a punchy kick on the downbeat and no vocals, and returns a shippable stem. The only rules to lock before you generate are BPM, time signature, and whether the loop is 8 bars or 16 bars. The player brain does the pattern recognition; your job is picking a track with a clear downbeat and matching your note chart to the audio waveform.

How do I turn a Music Gen track into a beat map?

Export the WAV (2 credits), open it in a browser waveform viewer, and mark every kick or snare hit as a note event. For a jam scope, transcribe by ear against the WAV waveform — look for the visible amplitude spikes on the downbeats. Store the note chart as an array of note event objects with time in seconds and lane index in JSON. WizardGenie can scaffold the note chart reader and the visual falling-note lane in one prompt; the beat map itself is data you author against your locked track.

Sources

  1. Web Audio API — MDN Web Docs
  2. AudioContext.currentTime — MDN Web Docs
  3. Rhythm game — Wikipedia
  4. Beatmap — Wikipedia
  5. Suno — Wikipedia
Written by Arron R.·2,540 words·11 min read

Related posts