html-midi-player, with tone.js

 html-midi-player | Play and display MIDI files online

GitHub - cifkao/html-midi-player: 🎹 Play and display MIDI files on the web

<midi-player> and <midi-visualizer> HTML elements powered by @magenta/music (Magenta.js), fully stylable and scriptable.

Notable websites that use html-midi-player include abcnotation.com, Musical Nexus and demo websites for music generation models: piano infilling, stochastic positional encoding.

@magenta/music - v1.23.1

HTML MIDI Player Basic Example

This is a perfect example of modern Web Components - they work like native HTML elements but provide complex MIDI functionality powered by Magenta.js and Tone.js under the hood!

<midi-player

  src="https://cdn.jsdelivr.net/gh/cifkao/html-midi-player@2b12128/twinkle_twinkle.mid"

  sound-font visualizer="#myPianoRollVisualizer">

</midi-player>

<midi-visualizer type="piano-roll" id="myPianoRollVisualizer"

  src="https://cdn.jsdelivr.net/gh/cifkao/html-midi-player@2b12128/twinkle_twinkle.mid">

</midi-visualizer>

<midi-player

  src="https://cdn.jsdelivr.net/gh/cifkao/html-midi-player@2b12128/twinkle_twinkle.mid"

  sound-font visualizer="#myStaffVisualizer">

</midi-player>

<midi-visualizer type="staff" id="myStaffVisualizer"

  src="https://cdn.jsdelivr.net/gh/cifkao/html-midi-player@2b12128/twinkle_twinkle.mid">

</midi-visualizer>

<script src="https://cdn.jsdelivr.net/combine/npm/tone@14.7.58,npm/@magenta/music@1.23.1/es6/core.js,npm/focus-visible@5,npm/html-midi-player@1.5.0"></script>

<!-- Alternative: Separate script tags for each library -->
<script src="https://cdn.jsdelivr.net/npm/tone@14.7.58/build/Tone.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@magenta/music@1.23.1/es6/core.js"></script>
<script src="https://cdn.jsdelivr.net/npm/focus-visible@5/dist/focus-visible.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/html-midi-player@1.5.0/dist/midi-player.min.js"></script>

export class VisualizerElement extends HTMLElement {

  static get observedAttributes() {

    return ['src', 'type'];

  }

  connectedCallback() {

    this.attachShadow({mode: 'open'});

    this.shadowRoot.appendChild(visualizerTemplate.content.cloneNode(true));

    // ... initialize visualizer

  }

}

See the Pen HTML MIDI Player Basic Example by Ondřej Cífka (@cifkao) on CodePen.