Play Live Pattern
play-live-patternLive-code music patterns using TidalCycles mini-notation in JavaScript. Layer drums, synths, and bass with stack(). Choose from 71 drum machine banks, 128 GM instruments, built-in synths, and a full effects chain. Patterns play in a REPL the user can edit directly. Add .pianoroll() to a pattern to show a live piano-roll animation in the widget (or .punchcard()/.scope()/.spectrum() — one draw method per pattern). For a custom animated background, start the code with await initHydra() and write Hydra shader code — H(pattern) locks it to the sequence, and () => a.fft[0] makes it react to the audio itself (Strudel's output, not the mic); see get-strudel-guide topic 'hydra'. Rather not hand-write one? visuals picks a ready-made animation for code that has none (pianoroll/punchcard/scope/spectrum, or hydra-kaleid/pulse/wash/feed). theme sets the code-editor colour scheme, which also tints the visuals — match it to the mood (teletext chiptune, sonicPink synthwave, nord ambient, gruvboxDark lofi). Each call creates a NEW player rather than updating the last one — for a tweak, send the whole revised pattern and ask the user to stop the previous one. Use get-strudel-guide for genre templates, sound references, and advanced features like arrangement and sample loading.
The Strudel REPL renders inline with an editable code editor, visualizations, and playback controls.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| bpm | No | Tempo in BPM (40-300). Converts to setcps() automatically. | |
| code | Yes | Strudel pattern code. Uses TidalCycles mini-notation in JavaScript. Use stack() to layer drums, bass, and melody. Set tempo with setcps(bpm/60/4) or use the bpm parameter. The REPL plays the LAST expression: setup lines (await initHydra(), all(), setcps()) go BEFORE the pattern. Double quotes are mini-notation — use single quotes for plain strings and URLs. One draw method per pattern; pass a.fft values as functions (() => a.fft[0]). | |
| theme | No | Editor colour theme; the visuals stage and its readability scrim are derived from it, so it also decides whether a shader sits on a dark or light ground — prefer a dark one when the visual is the point (e.g. 'nord', 'sonicPink', 'tokyoNight'). Not carried into share links or the browser fallback. | |
| title | No | Pattern title displayed in the widget header (e.g. 'Midnight Rain'). | |
| visuals | No | Ready-made visual, for when the code has none of its own. pianoroll/punchcard/scope/spectrum draw onto the 2D canvas behind the code; hydra-kaleid (rotating kaleidoscope), hydra-pulse (shape driven by a rhythm), hydra-wash (slow ambient noise) and hydra-feed (the piano roll mirrored and trailed) are WebGL shader backgrounds. A preset fills the MISSING layer: a hydra preset is skipped only if the code already calls initHydra(), a 2D preset only if the code already has a draw method — so hydra-wash layers happily under your own .pianoroll(). Hydra presets are dropped for viewers who prefer reduced motion. Writing your own visual is still the better result (draw methods: topic 'visuals'; shaders: topic 'hydra'). | |
| autoplay | No | Start playing immediately (default: true). May require user click due to browser autoplay policy. |