WebMIDI Recorder

Stec Records

The WebMIDI Recorder is a panel that allows you to quickly record music you play on a device that generates MIDI notes such as a keyboard as MIDI data into MIDI files (.mid) that are effectively musical scores that can easily be edited when opened in a full blown audio recording application such as Cakewalk.  The objective was to be able to capture a keyboard performance as painlessly as possible so as to not interrupt the artistic flow.

The panel includes a log showing the incoming MIDI data in a data grid along with a set of piano keys that turn red when a MIDI note arrives, a piano-roll viewer that shows the incoming data as red bars that move from right to left and a metronome.  


WebMIDI Interface

WebMIDI is software that is built into some browsers and can be added to [some] others that allows a web page to interact with a physical MIDI device such as a musical keyboard or electronic drums.

Browser support

While some browsers natively support WebMIDI, others require an ad-on but some don’t support it at all. Chrome, Edge and Opera support it natively while Firefox requires an ad-on and Safari doesn’t support it at all.  For iOS devices, you need to use the dedicated “Web MIDI Browser” app.

If WebMIDI is available on any particular browser, the “Enable MIDI” button appears.  

If WebMIDI is not available, “No webMIDI support” appears in the toolbar and extra information appears in a box below it.

Enabling WebMIDI

By default, the WebMIDI interface is disabled and a button labeled “Enable MIDI” appears in the toolbar.  When the button is clicked, the WebMIDI interface is set up and a small yellow LED replaces it with the words “Ready. Play” below it.  The data from all available MIDI inputs is routed to the recorder so no device selection is required.


Log box

The log box shows the incoming MIDI data as rows in a grid.

Buttons

Fields


Metronome

Like all metronomes, this one generates click sounds at a tempo that can be altered by the user.  In addition to a box to type a tempo in, buttons are provided to increment and decrement the tempo.  A large red LED (circle) blinks on each beat but can also be clicked to capture the live tempo by tapping.

Controls

Start

The Start button starts and stops the metronome.

the volume icon

Reveals a control that lets you adjust the volume level of the click.

red LED

Blinks for each beat but can also be clicked to tap the tempo in in real time.  The tempo is determined by measuring two bars/measures so you click once on the one and then on the first beat of the 3rd measure.

Tempo display

Shows the current tempo in large numbers that can be edited if you click in the field. New values are processed when you click your “enter” key.

Increment and decrement buttons

These allow you to adjust the tempo by single BPM (beats per second) increments

Sounds button

Opens a list of available sound samples that can be used for the click.


Piano Keys

The piano keys show standard black and white keys like a convention piano with the note number for each key and the note letter and octave on the keys.

As MIDI notes come in, the associated key on the piano-keys turns red.


Piano Roll

The piano-roll section of the panel shows the incoming MIDI notes as red bars that move from the right of the screen off the left with each note getting a separate row like an old-time player piano. Low notes are on the bottom and high notes at the top.


Saving a performance

As soon as the MIDI interface is enabled, incoming MIDI notes are saved in memory.  When you want to save the stored note data you click the “Save” button which opens a “Midi File” pop up that allows you to edit the name of the new MIDI file or use the automatic numbering system if you don’t want to worry about the exact name yet.    You click on the floppy disk icon to save the file.

MidiFile Panel

Controls

Auto-Numbering

When checked, file names are automatically appended with a number that increments every time you save a file.

File Name

A field is provided for you to enter a name you’d like to use for the new file.

Track Name

You can also specify the name you’d like to use for the saved track in the MIDI file. The default is “Piano”.


Menu


Connecting to your computer

In order to use the WebMIDI recorder you need to connect your keyboard (or other MIDI device) to your computer via MIDI. In most cases, that connection is in the form of a USB cable but if you have an external audio interface connected to the computer, it may include its own MIDI input and MIDI output connectors that can be used.  If your MIDI keyboard also has the standard 5 pin MIDI connectors, you can connect a MIDI cable from the MIDI output of your keyboard to the MIDI input of your audio interface and you’ll be good to go for recording.

One downside of using 5 pin MIDI cables is that they typically only send data in one direction so you need two if you want to record and playback; one for each direction.  The upside is that you save a USB connector on your computer but also avoid dealing with the drivers which can be a pain to get set up.

Note

The app (page) must be reloaded whenever a new MIDI device is connected via USB.  All web browsers provide a button for this but the entire browser app can be closed then reopened, worst case.  It’s worth noting that this is not a problem when you connect the device using MIDI cables through a MIDI port on an existing audio interface that is already configured.  Since the audio interface (with MIDI) is usually on constantly, you don’t have to muck around with drivers even if you turn the keyboard on and off frequently.