MIDIはかつて耳コピーが流行っていた時代に一世を風靡した音楽フォーマットです。今もミュージシャンの人たちは使っていることでしょう。Web上で再生もできますが、ただアップロードするだけでは味気ないものです。 そこで使ってみたいのがhtml-midi-playerです。MIDIファイルの可視化と再生ができるWebコンポーネントライブラリです。

html-midi-playerの使い方

html-midi-playerの実装例です。ファイルを指定するくらいで簡単に使えます。

<midi -player
  src="https://cdn.jsdelivr.net/gh/cifkao/html-midi-player@2b12128/twinkle_twinkle.mid"
  sound-font visualizer="#myPianoRollVisualizer">
</midi>

<midi -visualizer type="piano-roll" id="myPianoRollVisualizer" 
  src="https://cdn.jsdelivr.net/gh/cifkao/html-midi-player@2b12128/twinkle_twinkle.mid">
</midi>

<midi -visualizer type="staff" id="myStaffVisualizer" 
  src="https://cdn.jsdelivr.net/gh/cifkao/html-midi-player@2b12128/twinkle_twinkle.mid">
</midi>

そうするとこんな格好良い表示になります。

もっと派手なパターンも。

html-midi-playerは再生すると、それに合わせてどの部分が再生されているのかも可視化されます。音調も分かるので、より音楽を楽しめるようになるでしょう。MIDIファイルを公開する際にぜひ使ってみましょう。

html-midi-playerはTypeScript製のオープンソース・ソフトウェア(2-clause BSD lisence)です。

cifkao/html-midi-player: ? Play and display MIDI files on the web