Send and receive note and pedal events to/from connected devices via WebMIDI

src/Pianolatron.svelte

@@ -86,6 +86,7 @@
 
   import catalog from "./config/catalog.json";
 
+  let firstLoad = true;
   let appReady = false;
   let appWaiting = true;
   let mididataReady;
@@ -167,7 +168,7 @@
   const resetApp = () => {
     rollViewer?.$destroy();
     mididataReady = false;
-    clearNotification();
+    if (!firstLoad) clearNotification();
     appReady = false;
     pausePlayback();
     resetPlayback();
@@ -214,6 +215,7 @@
         $rollPedalingOnOff = $isReproducingRoll;
         appReady = true;
         appWaiting = false;
+        firstLoad = false;
         previousRoll = currentRoll;
         const params = new URLSearchParams(window.location.search);
         if (params.has("druid") && params.get("druid") !== currentRoll.druid) {
@@ -285,25 +287,25 @@
         {/if}
       {/if}
     </FlexCollapsible>
-    {#if appReady}
-      <div id="roll">
+    <div id="roll">
+      {#if appReady}
         <RollViewer
           bind:this={rollViewer}
           imageUrl={currentRoll.image_url}
           {holeData}
           {holesByTickInterval}
           {skipToTick}
         />
-        {#if $userSettings.showKeyboard && $userSettings.overlayKeyboard}
-          <div id="keyboard-overlay" transition:fade>
-            <Keyboard keyCount="88" {startNote} {stopNote} />
-          </div>
-        {/if}
-      </div>
-      <FlexCollapsible id="right-sidebar" width="20vw" position="left">
-        <TabbedPanel {playPauseApp} {stopApp} {skipToPercentage} />
-      </FlexCollapsible>
-    {/if}
+      {/if}
+      {#if $userSettings.showKeyboard && $userSettings.overlayKeyboard}
+        <div id="keyboard-overlay" transition:fade>
+          <Keyboard keyCount="88" {startNote} {stopNote} />
+        </div>
+      {/if}
+    </div>
+    <FlexCollapsible id="right-sidebar" width="20vw" position="left">
+      <TabbedPanel {playPauseApp} {stopApp} {skipToPercentage} />
+    </FlexCollapsible>
   </div>
   {#if $userSettings.showKeyboard && !$userSettings.overlayKeyboard}
     <div id="keyboard-container" transition:slide>

src/components/Keyboard.svelte

@@ -191,7 +191,7 @@
   let mouseDown = false;
   let playing = new Set();
   const stopPlaying = () => {
-    playing.forEach(stopNote);
+    playing.forEach((midiNumber) => stopNote(midiNumber));
     playing = new Set();
   };
 </script>

src/components/MidiSettings.svelte

@@ -0,0 +1,103 @@
+<style lang="scss">
+  .setting {
+    margin: 1em 0;
+  }
+
+  .list-header {
+    font-family: $primary-typeface;
+    font-size: 0.9em;
+    margin-top: 1em;
+    text-transform: uppercase;
+    color: rgba(black, 0.6);
+    display: inline-block;
+    width: 100%;
+
+    &::first-letter {
+      font-size: 1.3em;
+    }
+  }
+
+  ul {
+    margin: 0.5em 0 0 1em;
+    padding: 0;
+
+    list-style-type: none;
+  }
+
+  li {
+    padding: 0.25em 0;
+  }
+</style>
+
+<script>
+  import { fade } from "svelte/transition";
+  import {
+    midiInputs,
+    midiOutputs,
+    userSettings,
+    sustainOnOff,
+    softOnOff,
+    sustainFromExternalMidi,
+    softFromExternalMidi,
+  } from "../stores";
+
+  const resetPedals = () => {
+    $sustainOnOff = false;
+    $softOnOff = false;
+  };
+
+  /* eslint-disable no-unused-expressions, no-sequences */
+  $: $sustainFromExternalMidi, resetPedals();
+  $: $softFromExternalMidi, resetPedals();
+</script>
+
+<section>
+  {#if navigator.requestMIDIAccess}
+    <fieldset>
+      <legend>MIDI in/out available</legend>
+
+      <p>
+        Connect a digital piano or other MIDI device to send/receive keyboard
+        and pedal events.
+      </p>
+
+      <div class="setting">
+        Enable WebMIDI:
+        <input type="checkbox" bind:checked={$userSettings.useWebMidi} />
+      </div>
+
+      {#if $userSettings.useWebMidi}
+        <div class="setting" transition:fade>
+          Sustain from External MIDI:
+          <input type="checkbox" bind:checked={$sustainFromExternalMidi} />
+        </div>
+        <div class="setting" transition:fade>
+          Soft from External MIDI:
+          <input type="checkbox" bind:checked={$softFromExternalMidi} />
+        </div>
+
+        <p class="list-header" transition:fade>Connected Inputs:</p>
+        <ul>
+          {#each $midiInputs as input}
+            <li transition:fade>{input.name} {input.manufacturer}</li>
+          {/each}
+        </ul>
+
+        <p class="list-header" transition:fade>Connected Outputs:</p>
+        <ul>
+          {#each $midiOutputs as output}
+            <li transition:fade>{output.name} {output.manufacturer}</li>
+          {/each}
+        </ul>
+      {/if}
+    </fieldset>
+  {:else}
+    <fieldset>
+      <legend>MIDI in/out not available</legend>
+      <p>
+        This browser does not support connecting to a digital piano or other
+        MIDI device.
+      </p>
+    </fieldset>
+  {/if}
+</section>

src/components/SamplePlayer.svelte

@@ -15,6 +15,8 @@
     tempoCoefficient,
     playExpressionsOnOff,
     rollPedalingOnOff,
+    sustainFromExternalMidi,
+    softFromExternalMidi,
     useMidiTempoEventsOnOff,
     activeNotes,
     currentTick,
@@ -24,7 +26,11 @@
     velocityCurveLow,
     velocityCurveMid,
     velocityCurveHigh,
+    userSettings,
   } from "../stores";
+  import WebMidi from "./WebMidi.svelte";
+
+  let webMidi;
 
   let tempoMap;
   let pedalingMap;
@@ -72,6 +78,27 @@
     return tempo;
   };
 
+  const toggleSustain = (onOff, fromMidi) => {
+    if (onOff) {
+      piano.pedalDown();
+    } else {
+      piano.pedalUp();
+    }
+    if (fromMidi && $sustainFromExternalMidi) {
+      $sustainOnOff = onOff;
+    } else if (!fromMidi && !$sustainFromExternalMidi) {
+      webMidi?.sendMidiMsg("CONTROLLER", "SUSTAIN", onOff);
+    }
+  };
+
+  const toggleSoft = (onOff, fromMidi) => {
+    if (fromMidi && $softFromExternalMidi) {
+      $softOnOff = onOff;
+    } else if (!fromMidi && !$softFromExternalMidi) {
+      webMidi?.sendMidiMsg("CONTROLLER", "SOFT", onOff);
+    }
+  };
+
   const setPlayerStateAtTick = (tick = $currentTick) => {
     if (midiSamplePlayer.tracks[0])
       midiSamplePlayer.tracks[0].enabled = $useMidiTempoEventsOnOff;
@@ -147,7 +174,8 @@
     loadSampleVelocities();
   };
 
-  const startNote = (noteNumber, velocity) => {
+  const startNote = (noteNumber, velocity, fromMidi) => {
+    activeNotes.add(noteNumber);
     let baseVelocity =
       (($playExpressionsOnOff && velocity) || DEFAULT_NOTE_VELOCITY) / 100;
     [$velocityCurveLow, $velocityCurveMid, $velocityCurveHigh].forEach(
@@ -164,28 +192,42 @@
         }
       },
     );
-    const modifiedVelocity =
+    // Note: SOFT_PEDAL_RATIO is only applied when calling piano.keyDown() as
+    //       @tonejs/piano has so built-in soft pedaling and so we emulate in
+    //       software.  For WebMIDI outputs we send soft pedal controller
+    //       events and note velocities that are not modified for softness.
+    const modifiedVelocity = Math.min(
       baseVelocity *
-      (($softOnOff && SOFT_PEDAL_RATIO) || 1) *
-      (($accentOnOff && ACCENT_BUMP) || 1) *
-      $volumeCoefficient *
-      (noteNumber < HALF_BOUNDARY
-        ? $bassVolumeCoefficient
-        : $trebleVolumeCoefficient);
+        (($accentOnOff && ACCENT_BUMP) || 1) *
+        $volumeCoefficient *
+        (noteNumber < HALF_BOUNDARY
+          ? $bassVolumeCoefficient
+          : $trebleVolumeCoefficient),
+      1,
+    );
     if (modifiedVelocity) {
       piano.keyDown({
         midi: noteNumber,
-        velocity: Math.min(modifiedVelocity, 1),
+        velocity: modifiedVelocity * (($softOnOff && SOFT_PEDAL_RATIO) || 1),
       });
     }
+    if (!fromMidi) {
+      webMidi?.sendMidiMsg("NOTE_ON", noteNumber, modifiedVelocity);
+    }
   };
 
-  const stopNote = (noteNumber) => piano.keyUp({ midi: noteNumber });
+  const stopNote = (noteNumber, fromMidi) => {
+    activeNotes.delete(noteNumber);
+    piano.keyUp({ midi: noteNumber });
+    if (!fromMidi) {
+      webMidi?.sendMidiMsg("NOTE_OFF", noteNumber, 0);
+    }
+  };
 
   const stopAllNotes = () => {
     piano.pedalUp();
+    $activeNotes.forEach((midiNumber) => stopNote(midiNumber));
     if ($sustainOnOff) piano.pedalDown();
-    $activeNotes.forEach(stopNote);
   };
 
   const resetPlayback = () => {
@@ -303,10 +345,8 @@
       if (name === "Note on") {
         if (velocity === 0) {
           stopNote(noteNumber);
-          activeNotes.delete(noteNumber);
         } else {
           startNote(noteNumber, velocity);
-          activeNotes.add(noteNumber);
         }
       } else if (name === "Controller Change" && $rollPedalingOnOff) {
         if (number === SUSTAIN_PEDAL) {
@@ -323,7 +363,8 @@
   midiSamplePlayer.on("endOfFile", pausePlayback);
 
   /* eslint-disable no-unused-expressions, no-sequences */
-  $: $sustainOnOff ? piano.pedalDown() : piano.pedalUp();
+  $: toggleSustain($sustainOnOff);
+  $: toggleSoft($softOnOff);
   $: $tempoCoefficient, updatePlayer();
   $: $useMidiTempoEventsOnOff, updatePlayer();
   $: $rollPedalingOnOff, updatePlayer();
@@ -342,3 +383,13 @@
     resetPlayback,
   };
 </script>
+
+{#if $userSettings.useWebMidi}
+  <WebMidi
+    bind:this={webMidi}
+    {startNote}
+    {stopNote}
+    {toggleSustain}
+    {toggleSoft}
+  />
+{/if}

src/components/TabbedPanel.svelte

@@ -46,6 +46,7 @@
   import BasicSettings from "./BasicSettings.svelte";
   import AdvancedSettings from "./AdvancedSettings.svelte";
   import AudioSettings from "./AudioSettings.svelte";
+  import MidiSettings from "./MidiSettings.svelte";
 
   export let playPauseApp;
   export let skipToPercentage;
@@ -59,6 +60,7 @@
     },
     settings: { component: AdvancedSettings, icon: "cog" },
     audio: { component: AudioSettings, icon: "piano" },
+    midi: { component: MidiSettings, icon: "midi" },
   };
 
   let selectedPanel = "controls";