ブラウザ上で使うSoundFont対応MIDIプレイヤー

「ブラウザ上でソフトシンセを鳴らして遊ぼうよ！」や「ブラウザDTMでFM音源のDXサウンドをタダで満喫しよう！」といった記事で、以前、ブラウザであるGoogle ChromeやSafari上でソフトシンセなどが扱えるユニークな方法があるのを紹介したのをご覧いただいたでしょうか？そう、ChromeにはWeb Audio APIという仕組みが搭載されているため、ブラウザ上で動作するプログラムを組むことでオーディオを扱うことができ、日本人のエンジニア、g200kg(@g200kg)さんが考案したWeb MIDI Linkという仕組みを使うことで、ブラウザ間でMIDIのやりとりが可能になったというものです。

この世界、数か月チェックしていなかったら、またどんどん発展をしているようで、ついにSoundFontを扱えるMIDIプレイヤーまで登場していたり、KAOSSPAD風なパッドでコントロール可能な演奏システムが登場していました。誰でもすぐに、簡単に、そしてタダで遊べるシステムなので紹介してみましょう。

ブラウザ上でSoundFontを使ったMIDIファイルの再生ができるMIDI Player

まずは、5月中旬に登場したばかりで、つい昨日も大きなバージョンアップが行われたばかりのMIDI Player。まずは、以下のURLにChromeかSafariでアクセスしてみてください。
　　　MIDI Player (http://imaya.github.io/demo/sf2.js/index.html)

これは今屋雄太(@y_imaya)さんが開発したSoundFontを利用したMIDIファイルのプレイヤー(SoundFontについては「改めて見直そうよ、SoundFont」を参照してください）。アクセスするとSoundFontの読み込みにしばらく時間がかかりますが（A320Uという9.7MBの容量があるフリーのGM音源SoundFontを使っている）、しばらくすると画面下にはマス目が並んだような画面が現れます。

画面下のほうに、こんな画面が現れる。マス目をクリックしてみると音が鳴る

このマス目、鍵盤を意味しているのでマウスでクリックすると、音が鳴りますよ。また左側には、音色名が並んでいますが、これをクリックすると音色選択ができるようになっています。そう16chのマルチティンバー音源になっているわけです。

画面一番上のPlayerの項目でMIDIファイルを指定し、読み込む

で、画面の一番上に行くとPlayerというところの選択画面で、いろいろなMIDIファイルが選択できるようになっているので、何か選択してみましょう。どうですか？すぐに演奏がスタートし、先ほどの画面上には現在出ている音が赤で表示されることが確認できます。

もちろん、読み込めるのはこの一覧に表示されているものだけではありません。画面一番下の「Load standard MIDI file」を利用すれば、自由に手持ちのMIDIファイルを再生することができますよ。
テンポや音量のほかいくつかのパラメータの設定も可能
そして、Load SoundFont2 fileのところを選択すれば、手持ちのSoundFontやネットからダウンロードしたSoundFontを読み込んで利用することもできます。試しに私の手元にあったE-mu SystemsのProteusを読み込んだところ、バッチリ鳴らすことができました(これを読み込んでも音色リストが切り替わらなかったので、その辺がまだしっかりできていないのかもしれません…)。

実は、昨日このMIDI Playerの存在を知ったのですが、その時点ではSoundFontを切り替える機能がありませんでした。そこで作者である今屋さんにTwitterで初めてコンタクトして、質問したら、即対応してくれたのです。この機動力の速さ、すごいですよね。

ブラウザさえあれば、アクセスするだけで、すぐに使うことができるので、使わない手はないですよね。

そして、もうひとつ紹介したいのが、テキスケ(@tekisuke)さんが作られたChrossPadというもの。実はこれ、昨年7月にリリースされていたのに、全然気づいていませんでした。スミマセン。画面上のパッドをマウスで操作することで、自動で音楽演奏ができるというもので、KORGのKAOSSPAD風で、楽器が弾けない人でもすぐに楽しむことができます。

昨年7月に発表されていたWeb MIDI Linkのホストアプリ、ChrossPad for Chrome

使い方はいたって簡単。まずはChromeで以下のURLにアクセスします。
　　　ChrossPad (http://sketch.txt-nifty.com/blog/chrosspad/chrosspad.html)

画面が現れたら、上から2番目のカラムをクリックして現れるメニューからシンセサイザを1つ選択し、Loadボタンを押すと、そのシンセが別ブラウザで起動します。

Mini Moog風なソフトシンセWebAudioSynthなどを音源として利用することができる

ここでパッドをクリックすればすぐに演奏ができますよ。SCALEを変えることで、Major、Minor、Blue Note……といろいろなパターンに切り替えることができるので、ぜひ試してみてください。

SoundFontの音源部分だけを切り出したsf2synthを使うことも可能

ちなみに、先ほどのMIDI Player単独で使っている場合はWeb MIDI Linkの仕組みを使っていませんでしたが、このChross Padからsf2synthを呼び出すことで、その音源部分だけを起動して利用できるようになっていますよ。

ちなみに、このブラウザ上でオーディオが扱えるWeb Audio APIですが、スマートフォンで使えるChrome for Android上にも搭載されることが発表されています。すでにβ版がリリースされているようですが、まだ試していないのですがこれによってスマートフォン上でDTMができる世界が広がってくるかもしれませんね。