2024 in Review: Obsessions with All Things MIDI and WebAudio

Another year has flown by, and I found myself going down a rabbit hole of WebAudio, MIDI, and all sorts of fun side projects. I started by “just wanting to test a few things,” and—like it always does—one small idea quickly snowballed into a sprawling collection of tools and experiments. Some are purely for my own amusement, some are actually useful, and all of them taught me something new.

Below is a quick rundown of everything I launched or tinkered with in 2024, spanning from music tech to AI-infused utilities:

SignalMapper - https://signalmapper.app (GitHub)

A specialized browser-based flowchart/diagram tool for mapping out hardware synths and MIDI connections. It keeps me from losing my mind when cables start piling up behind racks.

Supersaw - https://supersaw.app (GitHub)

An experimental web-based DAW that supports a MIDI editor and WebAudio processing. Definitely a work in progress, but a fun playground to test new music-making ideas directly in the browser.

MIDI Sequencer - https://midi-sequencer-six.vercel.app (GitHub)

A 16-step polyphonic sequencer you can run in your browser. I wanted something FL Studio-like, minus the hassle of opening a full DAW.

MIDI Router - https://midi-router.vercel.app (GitHub)

Lets you intercept and re-route MIDI messages in real time. Neat for controlling multiple synths from one keyboard or vice versa.

MiniBrute Editor - https://github.com/HelgeSverre/minibrute-editor

I tried my hand at building a web-based synthesizer “config utility/editor” for the Arturia MiniBrute, and I almost bricked my synth a few times by sending malformed SysEx messages. That caused it to lock itself in “bootloader” mode. Fortunately, I managed to fix it by connecting it to Arturia’s MIDI Control Center, which sorted things out. I also built a neat visualizer for the step sequencer patterns recorded on the device and mapped out most of the SysEx messages used for changing its configuration. However, I haven’t gotten around to finishing it. NOTE: do not use this unless you know what you’re doing. It’s very easy to put the MiniBrute in a state where it’s unusable until you hook it up to Arturia’s MIDI Control Center, and if that doesn’t work, you’re basically out of luck (the factory-reset trick does not work if it’s stuck in bootloader mode).

SysEx Utility - https://sysex-util.vercel.app (GitHub)

Send, receive, and log MIDI SysEx data right in the browser—handy for firmware updates or weird MIDI messages regular apps don’t handle well.

Misc Algorithmic Music Generation Experiments

• Trance
• Dansband

A collection of Python scripts that generate MIDI files using various algorithms, rules, a bit of AI, and some randomization. None of it is particularly good, but it was interesting. I need to revisit the “Markov chain” idea with a better-quality dataset at some point. None of this is documented or organized, so if you take a look, be aware that you’ll likely need to change a bunch of stuff (hardcoded file/folder paths to MIDI files that I didn’t commit, etc.).

Basslines - https://basslines.vercel.app (GitHub)

A pattern visualizer that shows common bassline sequences in electronic music. Perfect for the “How do I go unz-unz-unz?” question.

Patchbay JS - https://github.com/HelgeSverre/patchbay-js

A lightweight JavaScript library that draws and animates patch cables between DOM elements, inspired by Reason Studios. Fun to watch them wiggle.

MIDI to CSV - https://midi-to-csv.vercel.app

Converts a MIDI file’s note data to CSV, JSON, or Markdown. Because sometimes you need raw note data for random hacking or analysis.

AKAI Fire Looper - https://github.com/HelgeSverre/akai-fire-looper

A (still WIP) Python experiment attempting to turn the AKAI Fire (built for FL Studio) into a standalone MIDI loop-recording device. Think Ableton Session View but just using the Fire’s pad grid as the “GUI.” The proof of concept works, but I need to clean up and fix some timing issues. I’m not the best at Python, but that’s part of the fun.

JustPlayTheRightNotes.com - https://justplaytherightnotes.com

A chord finder and chord progression builder built with Svelte. It’s been an interesting project and quite useful for learning “music theory.” Chords are basically just a collection of note offsets from the root, so you can define any chord and scale with an array of integers and some cleverness. I also added the ability to hook up a MIDI keyboard to input notes, which it will attempt to match to a named chord. That was more difficult than I expected because identifying which chord a given set of notes represents can be ambiguous, but I think it works well enough for now.

It’s harder than it looks to build a “piano”-like interface (with the keys and all) that’s responsive and works on large and small screens. You have to deal with scrolling if there isn’t enough room, etc. I recommend trying it—it’ll give your CSS brain cells something to think about.

BeatSheet - https://beatsheet-two.vercel.app

“What if I could generate a waveform via an Excel formula... =WAVEFORM("sine", 440)?” That was the idea behind this project. I’ve always been fascinated by “spreadsheets” (ever since I saw this video by Tomas Petricek). Building one involves CSS trickery to allow panning the sheet vertically and horizontally, using sticky headers on the sides and top, and a grid that sizes itself in a somewhat dynamic way.

Each cell can be edited, and once edited, you have to re-evaluate the cell’s value and any cells that reference it. Then you have to parse the formula and figure out a system of defining and adding new formulas, deciding which value types are returned, and which can be combined. (For example, in BeatSheet, you can have a “trigger” cell that simply emits a pulse, or a “sinewave” cell that continuously emits a float value as its cycle progresses. Then you can have an “Audio Output” cell referencing a sinewave and a trigger cell to play the waveform at a specific frequency, which could be static or modulated by another cell.)

I added a “sequencer formula” (=SEQ(A1:C3)) that takes a range of cells as a list of notes to play in a loop. It supports “vertical,” “horizontal,” and “matrix” sequencing modes, which determine how it reads the note range. The idea behind matrix mode is to use a 2D grid of cells like an old-school tracker. We’ll see how that pans out.

I also have ideas for integrating MIDI hardware via MIDI input/output cells, so you could listen for incoming MIDI notes, then (with a hypothetical formula) affect other cells or propagate values. If we add a “Script cell” that lets you write JavaScript against a “BeatSheet API,” the possibilities are endless.

I went way down a rabbit hole implementing a “SeriousBusiness™” tokenizer, parser, and evaluator for the project’s core, allowing dynamic registration of formula definitions and documentation (all in TypeScript, strongly typed), a direct and reverse graph dependency list, and cyclic-dependency detection. Then it got way too complicated to do anything, and I realized I’d OverEngineered™ the whole thing and gotten stuck in DESIGN-PATTERN-HELL™, so I committed that version to a private repo for future reference and reverted to a quick-and-dirty switch-case approach for now. Maybe I’ll do a more “dynamic” system later, or I might just use SheetJS—but where’s the fun in that?

APK Decompiler - https://github.com/HelgeSverre/jadx-webgui

I’ve always been fascinated by tools like Laravel Forge and Ploi.io that stream real-time command output. I decided to figure out how that might be done in a naive, simplified way. So I tried Flask (Python), some WebSockets, and a bit of Docker-foo to make a basic JADX web client that lets you upload an APK and see the decompilation/unpacking process in real time. It’s not very useful, and there are a few similar solutions that are better, but the goal wasn’t to be “better”—just to see how it could be done.

It’s a pretty cool little project. You could expand it to run more operations on the decompiled APK output (like searching for API keys, emails, domain/IPs, or other interesting data). Maybe I’ll revisit that another day.

ArrayAlchemy - https://arrayalchemy.com

A quick JSON-to-PHP-array converter. A time-saver whenever I need to shuffle data between different formats.

Future Fun-Plans

• Do more experimentation with neural networks, Markov chains, and MIDI data for generating melodies/compositions.
• See if I can get anything “usable” out of a custom TensorFlow model trained on a bunch of MIDI files in a specific genre (likely trance).
• Build a MIDI/Sequencer/Audio library based on the MIDI tools I’ve built, so I can have a “toy-box” of ready-made modules for quickly building new tools without re-implementing the same boilerplate (MIDI access, time-keeping within a loop, scheduling and buffering MIDI/audio events, etc.).
• Buy a Raspberry Pi, a MIDI shield/dongle, and an LCD screen (plus a nice enclosure) to try building my own little standalone MIDI sequencer.
• Continue improving the Supersaw DAW to be more fluid, add expandable side panels (kind of like JetBrains Fleet), and improve audio scheduling performance and timing accuracy.

I’ve got plenty of ideas—we’ll see where I end up!