index.html

<p>This is a demo for the <strong>html-midi-player</strong> package. For more information, see <a href="https://github.com/cifkao/html-midi-player" target="_blank">its GitHub repository</a>.</p>

<section id="section3">
<h2>Custom player and visualizer style</h2>
<midi-player
  src="https://cdn.jsdelivr.net/gh/cifkao/html-midi-player@2b12128/jazz.mid"
  sound-font visualizer="#section3 midi-visualizer">
</midi-player>
<midi-visualizer
  src="https://cdn.jsdelivr.net/gh/cifkao/html-midi-player@2b12128/jazz.mid">
</midi-visualizer>
</section>

<section id="section1">
<h2>1 player, 2 visualizers</h2>
<midi-visualizer
  type="piano-roll"
  src="https://cdn.jsdelivr.net/gh/cifkao/html-midi-player@2b12128/twinkle_twinkle.mid">
</midi-visualizer>
<midi-visualizer
  type="staff"
  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="#section1 midi-visualizer">
</midi-player>
</section>

<section id="section2">
<h2>2 players, 1 visualizer</h2>
<midi-player
  src="https://cdn.jsdelivr.net/gh/cifkao/html-midi-player@2b12128/twinkle_twinkle.mid"
  sound-font visualizer="#section2 midi-visualizer">
</midi-player>
<midi-player
  src="https://cdn.jsdelivr.net/gh/magenta/magenta-js@571b384/music/demos/melody.mid"
  sound-font visualizer="#section2 midi-visualizer">
</midi-player>
<midi-visualizer
  type="piano-roll">
</midi-visualizer>
</section>

<script src="https://cdn.jsdelivr.net/combine/npm/[email protected],npm/@magenta/[email protected]/es6/core.js,npm/focus-visible@5,npm/[email protected]"></script>