ポケミクに棒読みさせる - ブラウザで動くシーケンサー作った Web MIDI API

 ポケット・ミクに棒読みさせるシーケンサーをWeb MIDI APIで作りました。音楽の演奏よりしゃべらせるほうがおもしろいんじゃないかと思ったり。
 シーケンサーというのは、機械とかで自動演奏させるやつ(雑な説明)。Web MIDI APIのおかげで、JavaScriptで1つプログラムを作れば、Windows/Macはもちろん、iPadとかAndroidのブラウザで電子楽器を制御できます。こんな感じ。


ポケミク 棒読みシーケンサー / POCKET MIKU speaks in a monotone by Web MIDI API Sequencer
 ということで、試せるページはこれ。
 棒読み+ シーケンサー for ポケット・ミク(仮)

使い方

 自動演奏用のデータ、というかシーケンスは16個のスイッチのON/OFFで発音タイミングを。棒読み用なので、音程は考えない方向で。
 とはいえ、それだけだとつまらないので、音程を上下させるツマミ(ノブ)も配置。MIDI信号のピッチベンドを使用しています。一応、画像も。
Pokemikubo
 ページを開いた際にはMIDIデバイスを指定する必要あり。シーケンサーの再生ボタンを押した時にMIDIデバイスが設定されていなければ、設定用ダイアログが出ます。
 SENDと書かれたボタンが右にある入力欄は、歌詞入力用。棒読み用だから、歌詞じゃないか。
 シーケンスには2種のプリセットの読み込みと、全部消すボタンも。手抜きなので、iOSやAndroidだと反応がにぶい(タッチ対応してない)。

デバイスなどの準備

 ポケミクをブラウザで動かすには、Windows、Mac、AndroidではChromeを使用。iOSデバイスではWeb MIDI Browserを使用します(App Storeのリンクは最後)。いずれも無料です。すばらしい。
 Chromeでは最初に以下のURLをブラウザで開いて設定が必要。
 chrome://flags/#enable-web-midi
 「Web MIDI APIを有効にする」の欄にある「有効にする」 をクリックして、Chromeを再起動します。

 (追記:上記操作は現在は不要になりました)
 とか、そのへんはこのプログラムの元になったヤマハのGitHubのページ「Yamaha-WebMusic GitHubPage」に詳しい。
 Web MIDI Browserは面倒な設定は不要。すばらしい。ただ、CHromeももうすぐ上記設定が不要になる模様。


 ポケミクとPCの接続は普通にUSBケーブルで。AndroidはOTGケーブルとかUSBホストケーブルとかが必要。
 iOSデバイスの場合は、Lightning-USBカメラアダプタとかCamera Connection Kit(30ピンドックコネクタの古いモデル用)とかが必要。さらにiOSデバイスではおそらく電源が足りないとか言われるので、USBハブも必要(電源供給はしなくてもいいっぽい)。

 以上、遊ぶ際に必要なあれこれでした。おつかれさまでした。

使用ライブラリ、参考にしたものなど

 Web MIDI APIの初期化とかUIのベースとしたのは、NSX-1/eVY1シールド用のWebアプリ。
 Yamaha-WebMusic GitHubPage
 上記アプリを作成したRyoya KAWAIさんによるWeb MIDI API関連のコードなども参考に。webmusicplatformのNSX-39用のライブラリも使わせていただいています。
 ryoyakawai (Ryoya KAWAI) GitHub
 yamaha-webmusic/webmusicplatform
 スイッチ、ノブはWebAudio-Switch/Knobを使用。以下より。
 WebAudio-Knob
 WebAudio-Switch
 WebAudio-Controls
 一部、WindowsのChromeで見られないようですが。
 スイッチ、ノブの画像はKnob Galleryから。
 Prophet5 Button.knob
 kjLEDknob.knob by Keith Johnson © 2015
 このへん、あとで追加書きます。

その他

 大喜利みたいになってきた気がしないでもないです。
 最初はWeb MIDI APIでリズムマシンを作っていたはずなんですが。
 あと、Webアプリの名前はまだ仮。
 いろいろ調べてたら、「棒読みちゃん」っていうアプリを見つけたんですが、いいネーミングだな、と思いました(しかも、ジャンルがけっこうかぶる)。これよりいい名前が思いつかない。とりあえず「棒読み」に音程いじる機能つけたので「プラス」を加えて「棒読み+」としています。
 あと、プログラミングの話。初めてタイマー使いました。いまのままだと精度がいまいちなので、別の方法試したいです。
 なにかありましたら、コメントください。

コメント