ROLLPLAY

A dependency-free, browser-native FL Studio and Ableton Live project visualizer, MIDI exporter, and MP4 renderer. Drop an .flp or gzip-compressed .als, optionally add your finished audio, customize the piano-roll visualization, and export a video without uploading your music to a server.

Live site: rollplay.cc

Features

• Reads FL Studio project binaries directly, including FL Studio 26 pattern notes and playlist arrangements.
• Reads Ableton Live .als sets directly in the browser, decompressing their XML and extracting tempo, MIDI tracks, arrangement clips, loops, note velocity, and timing.
• Extracts tempo, channels, named patterns, arranged clips, note velocity, and timing.
• Displays a responsive, animated piano roll with per-pattern colors, a vertical playhead, hit effects, hearts, and percussion diamonds.
• Offers portrait and landscape frame presets; landscape mode drops notes toward a horizontal playhead whose default position is centered and configurable from bottom to top.
• Supports solid or gradient playhead colors with independent start and end colors.
• Supports solid-color, angled-gradient, and imported-image backgrounds with cover, contain, or stretch fitting.
• Switches any track independently between melodic piano-roll bars and step-percussion diamond rendering.
• Reorders track layers with drag-and-drop or up/down controls, keeping previews, hit effects, and exported video in sync.
• Selects one or many layers for shared solid or gradient colors, transparency, octave offsets, note motion, and particle animation styles.
• Separately controls melody and percussion note-axis zoom and offsets, so pitch layouts and step lanes can be positioned independently.
• Organizes visual, layer, and export controls into keyboard-accessible collapsible sections for a shorter, easier-to-scan settings rail.
• Adjusts horizontal zoom from one-quarter to eight visible bars, including half-bar and quarter-bar views, changing piano-roll scale and perceived scroll speed in previews and exports.
• Splits grouped patterns into independent instrument-channel layers while preserving their shared clip timing.
• Turns imported arrangement audio clips into one percussion layer per unique sound.
• Attaches audio files to those audio layers (by filename match or by picking a layer) to render them as waveform ribbons instead of percussion diamonds.
• Loads MP3, WAV, OGG, FLAC, and other browser-supported audio formats.
• Exports standards-compliant multi-track MIDI with project tempo.
• Renders H.264/AAC MP4 directly in supported browsers using WebCodecs and a built-in ISO BMFF multiplexer.
• Supports portrait, landscape, and square exports at 24, 30, or 60 FPS.
• Offers multiple 9:16, 16:9, and 1:1 export resolutions, expanded file-size targets, and an Auto bitrate mode tuned to the selected resolution and frame rate.
• Runs without runtime dependencies, external CDNs, API keys, or a backend.

Run locally

git clone https://github.com/cyroz1/rollplay.git
cd rollplay
npm run dev

Open http://localhost:4173. Node.js 18 or newer is sufficient; no installation step is required.

Publish

The production site is hosted at rollplay.cc. The application is static and can also be deployed by publishing index.html, styles.css, and the src/ directory, or by running the included Node server. The development server sets cross-origin isolation headers suitable for modern browser media APIs.

Browser support

Project parsing, preview, playback, and MIDI export work in current browsers. MP4 rendering requires a Chromium-based browser with WebCodecs VideoEncoder, H.264 encoding, and AAC AudioEncoder support. Hardware and browser support can vary by export resolution and frame rate.

Test

npm test

The optional FL Studio 26 regression fixture is intentionally not committed. When available adjacent to the repository as ../upload/key.flp, tests additionally validate 148 BPM, 15 patterns, 172 clips, and 6,550 arranged notes. Ableton parser tests use small in-memory Live Set fixtures so no user music is committed.

Privacy

Uploaded project and audio files stay in the browser. Project files, audio, generated videos, local dependencies, and screenshots are ignored by Git and never need to be committed.