I'm kubosho_

思想の固まり

Web Audio API + Fabric.jsを使って「あの楽器」を作ってみた

JavaScript Advent Calendar 2014 16日目の記事です。今回は初音ミクのInnocence(Long version)3DPVに出てくる楽器、通称「あの楽器」をWeb Audio APIFabric.jsを使って、実装してみました。

「あの楽器」とは?

下記のPVで22秒あたりから登場する、謎の楽器です。


Miku Hatsune 3DPV - Innocence / 【初音ミク】Innocence【3DPV】(直接22秒のところに飛びます)

「あの楽器」の仕様を、あの楽器とは (アノガッキとは) [単語記事] - ニコニコ大百科より引用すると、以下のようになっています。

形状はショルダーキーボードに近い。鍵盤にあたる部分が一面ディスプレイになっており、タッチして演奏する。タッチすることでディスプレイ上に直線、三角形、四角形などの幾何学模様があらわれる。 PV中では楽器全体が宙に浮き、演奏者の手元へ飛んでくる。音色はPVからうかがい知ることはできない。

作ってみたの歴史

「あの楽器」は、ニコニコ技術部向けに「作ってみて!」という動画が投稿され、それに応じたニコニコ技術部の人たちが、今までいろいろな分野で「あの楽器」を作っています。

下記は、ちょっと変化球で、スクリーンに触れることにより、eVocaloidがInnocenceを歌いつつ、LEDパネルが光るものになっています。

作ってみた

というわけで、今回私はブラウザー上で動く「あの楽器」をWeb Audio APIとFabric.jsを使って、実装してみました。

デモ

Ano Gakki - O2 Project

  • 画面のどこでもいいのでクリックすると、音が鳴り、同時に線が描画されます。
  • 三角形、四角形などの模様はまだ表示されないです(実装していない)。

動作を確認したブラウザー

  • Chrome 41.0.2243.2 dev
  • Firefox Developer Edition 36.0a2

以下は、一応動くものの、タップした時の反応がまだ悪いです…(イベントの通知をclickイベントにしているため)

  • XPERIA A feat. HATSUNE MIKU (Android 4.2.2) Chrome 39.0.2171.93
  • iPhone 5 (iOS 8.1.1) Safari

どのような処理の流れになっているか

文章だと分かりにくいので、画像にしてみました。

f:id:kubosh0:20141216222437p:plain

まとめ

まだまだ実装が足りていなかったり、今までおこなった実装も処理の流れなど見直せそうなので、これからも開発して、とりあえず年内には「タッチすることでディスプレイ上に直線、三角形、四角形などの幾何学模様があらわれる」という機能だったり、スマートフォンでの動作改善をおこなって、+αも実装したいところです。

もし良かったら、GitHubのリポジトリにstarを付けていただけると、開発の励みになります。

kubosho/ano-gakki