Illustrated walkthrough · 2 min read

Connect a MIDI keyboard and show teacher and student playing

Explore tutorials
Illustrated explanation

Check one participant, then the other

C3 C4 C5

Your MIDIOther player’s MIDISofter → stronger key attack

  1. 01

    Connect

    Instrument → data cable → supported browser.

  2. 02

    Play locally

    Your notes use lime on your screen.

  3. 03

    Ask the peer

    Their notes use orange on your screen.

Colours depend on the viewer’s perspective, not fixed teacher/student roles.

This walkthrough shows MIDI input from both participants. The coloured keyboard represents note data; it is not a measurement of microphone volume.

Written walkthrough

Connect a MIDI-capable keyboard to the computer with a suitable data connection. Open the classroom in a browser that supports Web MIDI and allow the requested access. Check local input first, then ask the other participant to play. Take turns so each signal is easy to identify.

Recording script

Show the connection. “The instrument sends note information through the cable. A charge-only cable will not carry that data.”

Local keyboard display. “My notes appear in lime on my screen. I play a soft note and a firmer note to compare the velocity indication.”

Peer response. “The other participant’s notes appear in orange on my screen. On their screen, their own notes are local.”

Take turns with C–D–E. “We can compare the notes and the attack. We still listen to the musical phrase.”

Capture notes

Use two demo participants and label the local perspective. Do not imply the colours permanently identify teacher and student. Check browser support before filming.

Web MIDI requires browser support and permission; see the MDN Web MIDI documentation.

Follow the signal-path guide.