1. Load icon font. You can also style the parts by editing the midi-player-* classes.

@font-face {
  font-family: "MIDIPlayerIcons";
  src: url("midi-player.woff2") format("woff2");
}
.midi-player-btn {
  font-family: MIDIPlayerIcons;
  font-size: 24px;
  line-height: 1;
}

2. Import the appropriate level of Midy.

import { MidyGMLite as Midy } from "midy/dist/midy-GMLite.min.js";
// import { MidyGM1 as Midy } from "midy/dist/midy-GM1.min.js";
// import { MidyGM2 as Midy } from "midy/dist/midy-GM2.min.js";
// import { Midy } from "midy/dist/midy.min.js";

const midy = new Midy(new AudioContext());

3. Add Player.

const midy = new Midy(new AudioContext());
const midiPlayer = new MIDIPlayer(midy);
midiPlayer.defaultLayout();
document.getElementById("simpleTest").appendChild(midiPlayer.root);
await midiPlayer.loadMIDI("midi/travel.mid");

You can style parts by editing the midi-player-* classes, and also via JavaScript.

function applyTheme(midiPlayer) {
  const root = midiPlayer.root;
  for (const btn of root.getElementsByClassName("midi-player-btn")) {
    btn.classList.add("btn", "btn-light", "p-1");
  }
  for (const btn of root.getElementsByClassName("midi-player-text")) {
    btn.classList.add("p-1");
  }
  for (const btn of root.getElementsByClassName("midi-player-range")) {
    btn.classList.add("form-range");
  }
}

const midy = new Midy(new AudioContext());
const midiPlayer = new MIDIPlayer(midy);
midiPlayer.defaultLayout();
applyTheme(midiPlayer);
document.getElementById("stylingTest").appendChild(midiPlayer.root);
await midiPlayer.loadMIDI("midi/hitogo2.mid");

function arrangeLayout(midiPlayer) {
  const div = midiPlayer.row();
  div.appendChild(midiPlayer.playPauseResume());
  div.appendChild(midiPlayer.seekBar());
}

const midy = new Midy(new AudioContext());
const midiPlayer = new MIDIPlayer(midy);
arrangeLayout(midiPlayer);
applyTheme(midiPlayer);
document.getElementById("stylingTest").appendChild(midiPlayer.root);
await midiPlayer.loadMIDI("midi/explorer.mid");