Air Music Lesson 02

Lesson Steps

Draw an organ keyboard, then add mouse hover, mouse-down color, mouse-up release, sound, and double-click latched notes.

Open the app Download starter files

Step 1: Download And Unzip

  1. Download the starter zip from the link above.
  2. Find the zip file in your Downloads folder.
  3. Right-click the zip file and choose Extract All....
  4. Open the extracted folder.

Step 2: Open The Folder In VS Code

  1. Open Visual Studio Code.
  2. Choose File > Open Folder....
  3. Select the extracted lesson02-organ-keys-starter folder.
  4. Click Select Folder.

Open the folder, not just one file. VS Code needs the folder so it can find the launch task.

Step 3: Start The App

  1. In VS Code, choose Terminal > Run Task....
  2. Choose Start Lesson 02.
  3. Keep the VS Code terminal open while you work.
http://127.0.0.1:5173/

Step 4: Look At The Starter Screen

The canvas should show an organ keyboard labeled C4 to C6.

The readout should show the current mouse and sound state.

First coding step:
1. Open app.js.
2. Find HandleMouseMove().
3. Uncomment SetMouseOnKey(dctKey).
4. Save, refresh, test.

Step 5: Find The Lesson Code

  1. Go back to VS Code.
  2. Open app.js.
  3. Find function DrawOneFrame().
ClearScreen();
DrawOrganKeyboard();
DrawReadout();

This lesson already draws the keyboard. The coding steps happen inside the mouse handler functions.

Step 6: Highlight The Key Under The Mouse

Find HandleMouseMove(). Change this:

// SetMouseOnKey(dctKey);

to this:

SetMouseOnKey(dctKey);
  1. Save with Ctrl+S.
  2. Refresh the browser.
  3. Move the mouse over the organ keys.

The key under the mouse should get a cyan outline.

Step 7: Color The Key On Mouse Down

Find HandleMouseDown(). Change this:

// SetMouseDownKey(dctKey);

to this:

SetMouseDownKey(dctKey);

Save, refresh, and press a key with the mouse. The pressed key should turn gold.

Step 8: Uncolor And Rehighlight On Mouse Up

Find HandleMouseUp(). Change these two lines:

// SetMouseDownKey(null);
// SetMouseOnKey(dctKey);

to this:

SetMouseDownKey(null);
SetMouseOnKey(dctKey);

Save, refresh, press a key, and release the mouse button while still over the key.

The gold press color should disappear, and the cyan hover outline should remain.

Step 9: Unhighlight When The Mouse Leaves

Find HandleMouseLeave(). Change these two lines:

// SetMouseOnKey(null);
// SetMouseDownKey(null);

to this:

SetMouseOnKey(null);
SetMouseDownKey(null);

Save, refresh, move onto a key, then move off the canvas. The highlight should disappear.

Step 10: Play Sound On Mouse Down

Find HandleMouseDown() again. Change this:

// StartMomentarySound(dctKey);

to this:

StartMomentarySound(dctKey);

Save, refresh, and press a key. You should hear an organ-like note.

Step 11: Stop Sound On Mouse Up And Mouse Off

Find HandleMouseUp(). Change this:

// StopMomentarySound();

to this:

StopMomentarySound();

Then find HandleMouseLeave() and make the same change there.

StopMomentarySound();

Save, refresh, press a key, and release it. The note should stop.

Step 12: Double-Click To Latch A Note

Find HandleDoubleClick(). Change this:

// ToggleLatchedSound(dctKey);

to this:

ToggleLatchedSound(dctKey);

Save, refresh, and double-click a key. It should stay on and turn green.

Double-click other keys to make a chord. Double-click a latched key again to turn it off.

Step 13: Experiment

Step 14: Stop The App

  1. Go back to VS Code.
  2. Click inside the terminal that is running the server.
  3. Press Ctrl+C.
  4. If it asks Terminate batch job?, type Y and press Enter.

If Something Goes Wrong