Getting started

  1. Add the necessary scripts to your page:

    <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.4.0"></script>

  2. Add a player and (optionally) a visualizer:

    <midi-player
  src="https://magenta.github.io/magenta-js/music/demos/melody.mid"
  sound-font visualizer="#myVisualizer">
</midi-player>
<midi-visualizer type="piano-roll" id="myVisualizer"></midi-visualizer>

That’s it!

html-midi-player is available for free under the BSD-2-Clause license. If you use html-midi-player on your website, please consider linking back to the repository.

For more information, see the readme.

Simple demo

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

Advanced demo

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