This is a little web app that turns a computer keyboard (⌨️) into a musical keyboard (🎹) with a layout similar to the fretboard on a stringed instrument like a guitar (🎸), bass, or ukulele. More specifically, it turns it into a MIDI controller, a “MIDI keyboard” or “MIDI guitar” if you will.

If you press the keys on your keyboard (⌨️), the web app should respond by highlighting the keys you pressed, and displaying the chord (see the next section). Although the layout on-screen is QWERTY, the way I've coded it should make it work with any keyboard layout; the "Q" key on-screen will always correspond to the top-left letter key on your keyboard, even if you're using AZERTY for instance.

For the moment, there is no synthesiser built into this web app (I'll fix that eventually!), so to actually use it to get sounds, you'll need to hook it up to some kind of MIDI synthesiser. Here are a few ways you can do that.

• If you happen to have a MIDI synthesiser that supports USB MIDI, or some kind of USB MIDI interface and a (non-USB) MIDI synthesiser, you should be able to just plug it in and your browser will let you connect to it. For example, a Yamaha PSS-A50 (a keyboard which is an absolutely killer value and tons of fun, please just buy one, #notsponsored) works great.
• Otherwise, in software land, you have two problems to solve:
  • For historical reasons, your browser will generally only see MIDI output devices that are physical hardware. To talk to a MIDI device that is another app running on your computer, you first need a virtual MIDI cable:
    • On Linux, it seems like there's one by default, so there's nothing to set up. For me, it's called “Midi Through”.
    • On Windows, you can use loopMIDI.
    • On macOS, you can use the IAC Driver.
    Once you have it set up, it will show up as a MIDI output device in this web app, and as a MIDI input device (like a MIDI controller) in whatever DAW you're using.
  • Then you need some kind of DAW (Digital Audio Workstation) with some kind of synth in it, or some other kind of MIDI synthesis app. There are endless options here. In my particular case, I've been using the Yamaha S-YXG50 Portable VSTi synth in the 32-bit version of VSTHost (you can see it in action here). I guess most people will use FL Studio, or Ableton, or REAPER or something, with one of their built-in synths. You could even use Synthesia's Free Play mode if you wanted to. The important part is that you set it up to use the virtual MIDI cable as input.

The “Send Program Change”, “Send General MIDI Reset” and “Set up Yamaha XG amp simulator effect” buttons are things I added for my convenience when using General MIDI devices. Most MIDI synths these days don't support General MIDI, let alone Yamaha XG, so those buttons won't be useful for those. If you don't know what these are, don't worry about it.

(I'm not an expert, take the following explanation with a grain of salt:) Computer keyboards (⌨️) typically wire up the keys in a matrix (think rows and columns) that allow them to scan for held keys without needing every single key to be individually connected to the controller. Depending on exactly how this matrix is wired, it can be impossible to distinguish certain key combinations from eachother, unless isolation diodes are added. Unfortunately, most computer keyboards omit these diodes as a cost-saving measure. As a result, when the keyboard isn't sure which new key has been pressed, it will usually ignore it. There's nothing this web app can do about this, it's a fundamental hardware limitation of the keyboard you are using. Not all keyboards have this problem, some have “n-key rollover”.

This is a shorthand for writing guitar chords that I'm fond of. It's essentially a condensed, horizontal form of the familiar guitar tablature notation. I don't know if there's a well-known name for this notation; I have found one website that calls it “short notated guitar chords”.

In this notation, the fretted notes on each string are listed from left to right, with the lowest string first, and muted strings are notated with an x. For example, the open A chord on a guitar in E standard looks like x-0-2-2-2-0: the low E is muted (x), the A and high E are open (0), and the D, G and B strings are fretted at the 2nd fret (2).

This is one of hikari_no_yume's many projects, and not the first or last that is music-related. I wrote the initial version of this thing on 2026-03-24 when I was visiting friends in another country, to cope with the fact I didn't have my guitar with me (it's like a part of your body, you know). I wrote this FAQ and finally put this thing on my website on 2026-05-02.