Piano Overlay Streaming — Browser-Based, No Download

Who is this piano overlay for?

This overlay is for pianists who already stream or record and want the audience to follow what their hands are doing — Twitch and YouTube performers, teachers filming lessons, and anyone cutting tutorial footage where a camera pointed at the keys is not enough to read along with.

It is a picture of its own, and that is the point. The on-screen keyboard sits beside your camera shot or under it — a clean, readable graphic in your colours — rather than lining up key for key on the real keys in the frame. Camera shows the hands, overlay shows the notes. That is how nearly every piano stream worth watching is built.

Everything is drawn live in the browser while you play, which is what makes it a performance tool rather than an editing one. If your workflow is to shoot first and add the visuals afterwards, this is the wrong end of it.

How do you get the keyboard into your scene?

The keyboard goes in as a piece of your screen, not as a plugin you install. Once, from scratch, it is about ten minutes; after that it is a source like any other. Here it is step by step in OBS Studio — Streamlabs, XSplit, vMix and the rest work the same way, they just use slightly different words for the same buttons.

1. Open the app and get your keyboard talking. Chrome, Edge or Opera. Turn MIDI on in the settings, tick your keyboard in the list, and play a few notes until they light up on screen. Do this first — there is no point cropping a keyboard that is not responding yet.
2. Decide how it should look before you crop. Colours, how many octaves wide, note names on or off, chord names on or off, staff in or out. Changing the width afterwards means redoing the crop, so get it settled now.
3. Press F11. The browser goes fullscreen: tabs and address bar disappear and the app has the whole monitor to itself. That is the picture your viewers will be looking at.
4. Add the source. In OBS, the + button under Sources, then Display Capture (on a Mac it is called macOS Screen Capture; Streamlabs says Screen Capture). Choose the monitor the app is sitting on. If you want a clean picture, take the display and not the window, because a window capture drags the browser’s tab strip and address bar into the shot and goes blank the moment you click away from it.
5. Crop it down to the keys. Hold Alt (Option on a Mac) and drag the handles of the source in the preview until only the keyboard is left. Everything above the keys, the app’s own header included, falls outside the crop and is simply never in the picture.
6. Put it where it belongs. Drag and scale the cropped source into place — a slim strip under your face cam, or the full width along the bottom. Layer order decides what sits on top of what.
7. Optional: let the keys float over your camera. Set the app background to a solid colour you never use anywhere else, then add a Color Key filter to the source in OBS and point it at that colour. The background drops out and the keys appear to sit straight on top of your camera picture.

Two things worth knowing before your first live run. One monitor or two: with a single screen, the fullscreen app covers OBS while you play — that is fine, OBS keeps capturing in the background, you just cannot watch the preview at the same time. With two, park OBS on the second monitor and capture the first, and you see exactly what is going out. Scenes: a source belongs to the scene you added it to. If the keyboard should also show up in your Starting Soon or Chatting scene, copy it and paste it there as a reference rather than building it again — one source, one crop, every scene.

And do not let the picture fool you into skipping the sound. All of the above sets up what your viewers see. What they hear — your piano, your microphone, the audio coming out of the browser — is a separate set of sources in your streaming software. Record thirty seconds and play it back before you go live for real.

What do your viewers see?

Your viewers see the keys you press in real time, with as much musical detail as you leave switched on. Note names can sit on every key. The chord name appears the moment you hold one, so someone who cannot read music still sees that you have just played Fmaj7 — and it keeps up with the dense ones, the added notes and the shapes that leave the fifth out. The staff writes the music down as it happens.

The pedals belong in that picture too. Sustain, soft and sostenuto are read over MIDI and shown live — the detail most piano streams lose, where the audience hears the difference but never sees where it comes from.

Can the keyboard match your stream’s look?

Your hands are on screen for the whole session, so the keyboard has to hold up to being looked at. This one does. The keys have weight and depth, the highlights glow on them instead of smothering them, and a viewer can read a note name without leaning towards the screen. It looks like an instrument, not like a diagram of one.

And it can look like your instrument. Choose the colour behind the keys, the colour that lights up under your hands, a second one for the notes you want to stand out, and the shades the falling notes come down in. Whatever your channel’s palette is, the keyboard can wear it — and if you would rather it wore all of them, rainbow mode tints the white keys straight across the spectrum, every C red, every D yellow, every E green, the whole way up.

Make it as wide or as narrow as your layout wants — one octave for a slim strip under your face cam, the full eight across the bottom of the scene. Same keyboard, one setting.

What do you need for it?

You need a computer or tablet with a current browser, a MIDI keyboard, and software that can capture a region of your screen. MIDI input runs through the browser’s Web MIDI support, so Chrome, Edge or Opera; Safari does not offer it, and on iPad and Mac the free MIDIWeb browser provides it instead.

Phones are out — on a screen that small the keys are no longer playable, so the app asks you to move to a tablet or a computer. No loss for a streaming setup. What you do not need is a licence tied to one machine: the overlay is just a web address, so it opens on your streaming PC, your laptop and a computer you borrowed for one evening, and your settings come with you when you sign in.

One step is easy to miss: MIDI is off until you switch it on. Open the settings, go to the MIDI tab, flip the toggle, and your keyboard appears in a list with a status dot next to it — green means the app is hearing it. Tick it, play a note, watch the key light up. If you plugged the keyboard in after the app was already running, the Refresh button picks it up without reloading the page, and there is an Audio & MIDI check if something still stays quiet. On a new computer the browser asks once for permission to use MIDI — allow it, and the keyboard is back.

Everything the audience sees is yours to set. Note names on or off, chord names on or off, the staff in or out of frame, your own highlight colours, and your own logo in place of ours — so the overlay carries your visual identity rather than someone else’s.