Building Melody Creator: a Browser-Based Music Sketchpad
Melody Creator is a small browser-based music sketchpad, but the interesting part is not the UI alone. You can try the live tool at melodycreator.app . Under the surface, the app treats melody writing as a set of ordinary engineering problems: model the musical idea, keep generation deterministic, preview sound in the browser, export useful files, and make the result shareable without requiring…
Melody Creator is a browser-based music sketchpad that allows users to create and edit short musical ideas. The app focuses on the engineering aspects of melody writing, such as modeling the musical idea, keeping generation deterministic, previewing sound in the browser, exporting useful files, and making the result shareable without requiring an account.
Built with Next.js App Router, React, TypeScript, Tailwind CSS, and music-focused libraries like tonal and midi-writer-js, Melody Creator aims to help users create musical ideas quickly and easily.
A key aspect of Melody Creator is its composition model, which separates the musical state from the UI. This allows the app to use a shared representation for browser playback, MIDI export, WAV rendering, previews, tests, and URL state. The model consists of notes, each with a pitch, start step, duration, and velocity, as well as chords, each with a name, list of pitches, start step, and duration.
This enables the app to handle different sources and renderers, making it flexible and adaptable to various input methods such as manual grid editing, presets, seeded generators, or decoded share links.
The app's editor starts with a familiar grid model, with rows representing pitches and columns representing time. In the simple workspace, the app uses a 16-step grid, while the Pro workspace adjusts the number of steps based on bars and note duration. The grid is intentionally plain, and the app uses tonal to map rows to pitch names, allowing for different musical phrases when the user changes key or scale.
A single cell can map to different pitches depending on the context, keeping the UI simple while handling the translation in the music layer.
The generator in Melody Creator uses a seeded pseudo-random function, scale degrees, chord degrees, rests, arpeggio patterns, and octave spread to create musical phrases deterministically. This makes the generator easier to test, explain, and run in the browser compared to AI-based models. The current generator follows a repeating degree pattern, but users can customize various musical controls, such as rest styles, arpeggio patterns, octave ranges, and chord styles, to shape the musical behavior and make the generator feel less like a black box.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
