Wednesday, July 09, 2025

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.comMusical Nexus and demo websites for music generation models: piano infillingstochastic 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.

No comments: