Need help with html-midi-player?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

cifkao
149 Stars 4 Forks BSD 2-Clause "Simplified" License 67 Commits 7 Opened issues

Description

ğŸŽ¹ Play and display MIDI files on the web

Services available

!
?

Need anything else?

Contributors list

# 42,477
Python
CSS
nmt
Tensorf...
67 commits

html-midi-player

npm package Published on webcomponents.org jsDelivr

and
HTML elements powered by @magenta/music (Magenta.js), fully stylable and scriptable.

Getting started

  1. Add the necessary scripts to your page:
   
  1. Add a player and a visualizer:

<!---

   
     
   
-->
html
   
   
   

That's it!

Installing from NPM

You can also add the package to your project from NPM, e.g.

npm install --save html-midi-player
or
yarn add html-midi-player
. Then you can either: -
import 'html-midi-player'
in your JavaScript code (as an ES Module), or - add the
node_modules/html-midi-player/dist/midi-player.min.js
bundle directly to your page, along with the dependencies (
node_modules/tone/build/Tone.js
,
node_modules/@magenta/music/es6/core.js
).

In both cases, you should also add the

focus-visible
polyfill to enable outlines on keyboard focus.

API basics

See also the API reference for both elements:

midi-player
,
midi-visualizer
.

src
and
noteSequence

Both

midi-player
and
midi-visualizer
support two different ways of specifying the input file: - By setting the
src
attribute to a MIDI file URL, e.g.:
html
  
javascript
  player.src = "twinkle-twinkle.mid";
- By assigning a Magenta
NoteSequence
to the
noteSequence
property, e.g.:
javascript
  player.noteSequence = TWINKLE_TWINKLE;

SoundFonts

By default, the player will use a simple oscillator synth. To use a SoundFont, add the

sound-font
attribute:
html
  

javascript
player.soundFont = null;  // no SoundFont
player.soundFont = '';    // default SoundFont (same as below)
player.soundFont = 'https://storage.googleapis.com/magentadata/js/soundfonts/sgm_plus';
See the Magenta.js docs for a list of available SoundFonts.

Visualizer settings

The visualizer type is specified via the

type
attribute. Three visualizer types are supported:
piano-roll
,
waterfall
and
staff
.

Each visualizer type has a set of settings that can be specified using the

config
attribute, e.g.:
javascript
visualizer.config = {
  noteHeight: 4,
  pixelsPerTimeStep: 60,
  minPitch: 30
};
The settings are documented in the Magenta.js docs.

Binding visualizers

A player supports binding one or more visualizers to it using the

visualizer
attribute (a selector) or the
addVisualizer
method:
html

javascript
player.addVisualizer(document.getElementById('myVisualizer'));
player.addVisualizer(document.getElementById('myOtherVisualizer'));
The visualizer only gets updated while the player is playing, which allows a single visualizer to be bound to multiple players.

Limitations

  • Only one player can play at a time. Starting a player will stop any other player which is currently playing. (#1)
  • Seeking only works while playing. (#2)
  • Playback position only gets updated on note onsets. This may cause the player to appear stuck.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.