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.