Turning a hummed melody into MIDI in the browser: a step-by-step walkthrough

Robert — Sun, 25 Oct 2026 09:56:06 +0000

You have a melody in your head, a voice memo on your phone, and a DAW waiting for notes. Typing those notes into a piano roll by hand is slow. This walkthrough shows how to get a first MIDI draft from a short recording using a free audio to MIDI converter that runs entirely in the browser, and how to clean up the result afterwards.

Disclosure: I work on MusicFX, the site that hosts this tool.

What the tool does (and what it does not)

The converter estimates pitched notes from a recording and writes a standard .mid file. Each note carries pitch, start time, duration and velocity. It does not keep the sound of your voice or guitar: MIDI is note data, so you assign an instrument after import.

A few practical facts before you start:

It runs locally. The page loads its model files on first use, and your recording stays on your device; nothing is uploaded to a server.
No account is needed.
Input: a browser-decodable MP3, WAV, FLAC, OGG, AAC or M4A file (MP4 and WEBM are also accepted), up to 80MB and 2 minutes.
It can miss notes or add false ones, so plan on a short editing pass.

Step 1: Record something the model can read

Short and clean beats long and busy. A solo voice, a single guitar line or a few piano chords work far better than a full mix with drums. If you hum, keep a steady volume and avoid room noise. Trim silence at the start so the first note lands near zero.

Step 2: Pick a detection mode

There are two modes:

Clean Melody – for one voice or one lead instrument. Use this for hums, whistles, sung toplines and solo lines.
Chords – for harmony, such as guitar strums or piano chords, where several notes sound at once.

Step 3: Tune the two sliders

Note Sensitivity (default 50) decides how eagerly the model reports notes. Higher values catch quiet notes but may add false ones. Lower values give a sparser, cleaner file.

Minimum Note Length ranges from 40 to 400 ms (default 120 ms). Raise it to drop short fragments and flutter; lower it if fast passages are disappearing.

A sensible first pass: Clean Melody, sensitivity 50, minimum length 120 ms. Convert, listen, then adjust one slider at a time.

Step 4: Decide on the three options

Write Estimated Tempo adds a tempo estimate to the file so notes line up sensibly with your DAW grid.
Snap Notes to Grid (beta) quantizes timing. It makes editing easier but removes expressive timing, so leave it off if you want the feel of the performance.
Include Pitch Bends keeps slides and vibrato. Useful for vocals and bends on guitar; turn it off if you want plain, stepped notes.

Step 5: Convert and download

Click Convert to MIDI, then download the .mid file. It opens in Ableton, FL Studio, Logic and other DAWs or notation apps.

Step 6: Clean up in your DAW

Expect to do three small jobs:

Delete ghost notes. Very short, quiet notes are usually false positives.
Fix octave slips. Hummed notes sometimes land an octave off; select and transpose them.
Assign an instrument. Pick a synth, piano or bass and play it back against the original recording to check timing.

If too many notes are missing, go back and raise sensitivity. If there is too much clutter, raise the minimum note length instead.

Where this fits in a workflow

Producers re-voice a sampled riff or turn a hummed idea into a bassline.
Songwriters turn a voice memo into a melody before it is forgotten.
Students check an ear-training guess by viewing a solo on a piano roll.

Related free tools

If you also need the tempo or key of the same recording, the same site has a key and BPM finder and a BPM detector that also run locally. You can browse them from the MusicFX home page.

MusicFX is an independent music platform and is not affiliated with any DAW or plugin maker mentioned here.

Capturing a browser face swap window in OBS: a step-by-step setup

Robert — Sun, 25 Oct 2026 06:42:24 +0000

Most browser camera effects live inside a tab, and a tab is an awkward thing to put on stream. You get the address bar, the page chrome and whatever else the site draws around the video. This walkthrough shows a cleaner pattern: a separate output window that contains only the processed picture, captured in OBS like any other window.

I'm using LiveFaceSwap.io as the example source, because its studio was built around exactly this pattern.

A quick status note first: at the time of writing (October 2026) the live studio on the site is not connected yet, so you can open the camera preview but not run a live session. Everything below is the setup you can prepare today, so the scene is ready when sessions open.

What the source window gives you

The studio redraws your webcam picture in the cloud with a new face, an outfit or one of six art styles, using one model called Live X2.0. For OBS, the useful part is the pop-out output window:

It is 960×540.
It shows only the AI picture, with no buttons or page layout around it.
It stays a normal desktop window, so OBS can capture it with Window Capture.

Because the redrawing happens on cloud servers, the graphics card in your PC does not do the heavy work. There is no client app and no camera driver to install. Opening the camera is free and needs no login.

Step 1: Open the camera and pick a reference

Open the site in Chrome on a Windows or Mac computer and allow camera access. If you have more than one camera (a built-in one and a USB webcam, say), you can switch between them inside the studio.

Then choose what the picture should become. The library has 46 original images with no real people: 30 characters, 10 outfits and 6 styles. You can also upload your own PNG, JPEG or WebP, which is used once it passes a content check.

Step 2: Pop out the clean output window

Open the clean output window from the studio. Leave it at its 960×540 size for now; you will scale it inside OBS rather than by dragging the window, which keeps the capture predictable.

Step 3: Add a Window Capture source

In OBS Studio:

Select (or create) the scene you want, for example Face cam.
In the Sources dock, click + and choose Window Capture.
Name the source something you will recognize later, such as Swap output.
In the properties dialog, open the Window dropdown and pick the browser window that holds the output. The window title helps you tell it apart from your main browser window.
Click OK.

On a Mac, recent OBS versions provide window capture through the macOS Screen Capture source with the method set to a single window. The idea is identical: one source, one window.

Step 4: Crop and scale to your canvas

The output is 960×540, a 16:9 shape, so it scales cleanly onto a 1920×1080 or 1280×720 canvas.

Full-screen character: right-click the source, choose Transform, then Fit to screen.
Face-cam corner: drag the red handles to size it, then position it in a corner of your gameplay or slides scene.
Trim edges: if the capture picks up a thin border, hold Alt (Option on Mac) while dragging an edge to crop instead of scale, or set exact numbers in Transform > Edit Transform.

Now mix it with the rest of your scene: overlays, alerts, a chat box, a webcam frame graphic. The output is just another layer.

Step 5: Record or stream

With the source in place, OBS treats it like any other camera layer. Stream to Twitch or YouTube with your usual settings, or record locally.

If you only need a clip and not a full OBS scene, the studio has its own recorder. Downloads are WebM or MP4 depending on your browser, and every download carries an AI generated mark in the lower-right corner. Recordings stay on your device; camera frames are not saved.

Step 6 (optional): Send the scene into a call

Turn on Start Virtual Camera in the OBS Controls dock and the whole scene becomes a camera that call apps can pick. In Zoom it is Settings > Video; in Google Meet, Settings > Video; in Discord, User Settings > Voice & Video. Choose OBS Virtual Camera in each. Keep the studio output window open while you are on the call, because it is the start of the chain: browser studio, clean window, OBS, call app.

When the picture does not show up

The studio names the problem instead of showing a blank frame. The messages cover a camera that is busy (close other apps using it), access denied or blocked (check the browser's site permissions), no camera found, and no picture for 60 seconds. A dropped connection reconnects once on its own.

On the OBS side, the usual suspects are:

The source points at the wrong window after a browser restart. Reopen the source properties and pick the window again.
The window is minimized. Restore it; minimized windows usually capture as black.
The canvas shows a stretched picture. Reset with Transform > Reset Transform, then fit again.

A few house rules

Every session starts with four checks: you are 18 or older, you have rights to every face you use, and two misuse rules from the Terms. If you bring the swap into a call, let the other people know. Client demos and paid presentations count as commercial use, which is covered by the Business plan.

More details on the webcam side are on the face swap webcam page.

For adults 18+; use only your own face or one you have consent to use.

DEV Community: Robert