風柳メモ

ソフトウェア・プログラミング関連の覚書が中心。

視覚にも訴える新タイプ楽器「Patatap」の演奏を記録&再生できるブックマークレットを試作

Patatapを試してみたら、これがなかなか楽しい。

Patatap

Patatap」はキーボードを適当にタイプするだけで、かっこいいアニメーションエフェクトとサウンドを生成することができるクールなサイトです。

キーボードで視覚と聴覚を刺激できるクールなサイト「Patatap」

演奏した内容を記録できないのはもったいないな…と思ったので、やっつけで記録&再生するブックマークレットを作ってみた。

ブックマークレット(Hatena::Let)

記録用:PatatapRecorder PatatapRecorder - Hatena::Let
再生用:PatatapPlayer PatatapPlayer - Hatena::Let
登録方法

上記のリンク先をWebブラウザで開き、bookmarkletのリンク部分を、Webブラウザのお気に入り/ブックマークツールバー等に登録する。

使い方

記録(PatatapRecorder)
  1. Patatapのページを開き、(ページのロードが終わった状態で)ブックマークレットPatatapRecorderを実行(お気に入り/ブックマークツールバー等から選択)。
  2. 注意書きを読んで、[OK]を押す。
  3. Patatap を演奏。
  4. 演奏が終わったら、[Enter]キーを押す(もしくは、再度PatatapRecorderを実行)。
  5. プロンプトで表示されるテキストをコピーし、メモ帳等で保存しておく。

表示されるテキストは、

A&10B&10C&10D&10E&10F&10G&10H&10I&10J&10K&10L&10M&10N&10O&10P&10Q&10R&10S&10T&10U&10V&10W&10X&10Y&10Z&10 A&10B&10C&10D&10E&10F&10G&10H&10I&10J&10K&10L&10M&10N&10O&10P&10Q&10R&10S&10T&10U&10V&10W&10X&10Y&10Z&10 A&10B&10C&10D&10E&10F&10G&10H&10I&10J&10K&10L&10M&10N&10O&10P&10Q&10R&10S&10T&10U&10V&10W&10X&10Y&10Z&10 A&10B&10C&10D&10E&10F&10G&10H&10I&10J&10K&10L&10M&10N&10O&10P&10Q&10R&10S&10T&10U&10V&10W&10X&10Y&10Z&10 A&10B&10C&10D&10E&10F&10G&10H&10I&10J&10K&10L&10M&10N&10O&10P&10Q&10R&10S&10T&10U&10V&10W&10X&10Y&10Z&10 A&10B&10C&10D&10E&10F&10G&10H&10I&10J&10K&10L&10M&10N&10O&10P&10Q&10R&10S&10T&10U&10V&10W&10X&10Y&10Z&10 

のような「A〜Zの文字」(Patatapでの[A]〜[Z]キーに相当)、「半角スペース」(Patatapでのスペースキーに相当)、「&数値」(間隔・50ms×数値分開ける)の組み合わせになる。
サンプルは、単に[A]〜[Z]+[Space]を、6回繰り返しているだけ。

再生(PatatapPlayer)
  1. Patatapのページを開き、(ページのロードが終わった状態で)ブックマークレットPatatapPlayerを実行(お気に入り/ブックマークツールバー等から選択)。
  2. プロンプトに、PatatapRecorderで取得したテキストを張り付け、[OK]を押すと、再生される。

上のサンプルを再生した様子。

制限など

再現性は多少の難あり。

  • PCやブラウザのパフォーマンス等の問題により、テンポがずれる。
  • 再生開始時のPatatapの状態(特に[Space]キーを何回押しているか)で、画像と音の鳴り方が異なる。

など。
また、Patatapが対応していないブラウザ(IE11等)や、ブックマークレットが動作しない環境では当然ながら動かない。

手持ちのスマートフォン(WX04K)+Firefoxでも、PatatapRecorderの方がうまく動かなかった…最後のプロンプトでテキストが空欄。原因はよくわからない…。(PatatapPlayerの方は動いた。遅いけれども…)