html-midi-player - MIDIファイルの再生と可視化を行うWebコンポーネント
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