kiritterのブログ

IT業種。好きなもの 音楽(Rock,House,Trance,etc) 読書(実用書) 歩くこと 日本史 スノボー など。現代社会がこの先どう進んでいくのか興味津々の今日この頃。(Twitter : kiritter)

リズム譜を書くことで、音楽とざっくり同期を取って何かするためのJavaScriptライブラリ(の暫定版のExample)

久しぶりにポストします。
時間が過ぎるのはあっという間で、朝夕はもうすっかり秋の気配。

前回に引き続き、JavaScriptの話題で、個人的欲求から作った遊び道具に関する話です。


作ったのは今年の2~3月で、もろもろ落ち着いたら全般的に見直そうと思っていたものの、諸事情によりできないので、一旦、Exampleのカタチで上げて一区切りという感じです。


作ったもの (※Google Chromeでのみ動作確認済み)
KiRhythmbox v0.8 - Simple Example - JavaScript Library


音楽が好きで、かつ、FlashやProcessingといったプログラミングによるアニメーションに興味があったりすると、一度は、音楽と同期を取って動かしたい(音楽に合わせて動かしたい)と思うんじゃないかなとか思ったりしますが、とりあえず私がそうだったのですが、ともかく、Chromeという爆速ブラウザが作られたり、HTML5でaudio/video要素が新設されたりで、ブラウザ上でJavaScriptだけでそういうのができる感じになってきてワクワクしつつも、とりあえず過去やってみたのは、setIntervalによる、ざっくり4つ打ち同期程度。


もっと複雑なリズムに、簡単に合わせることはできないだろうか?
音ゲーとかは厳密に微調整できる仕組みを作っているのだろうけど、
ざっくりで良いので、(ブラウザとJavaScriptで)簡単に音楽に合わせて遊びたい。

どうすればそれができるかよくわからないまま(考えないまま)月日が過ぎ、
で、今年の2月のある金曜夜、ふとYouTubeで、上述のExampleで使っているPVを見たのがきっかけで、改めて音楽同期描画の件を思い出し、挑戦してみたくなり、そのまま徹夜で書いたのが原型です。


当日たどり着いたアイデアは、

  • やりたいこと(描画処理)をfunctionとして書く
  • 耳コピしたリズムを元に、小節に見立てた配列に、それらを配置する
  • BPMから求めた間隔で、配列内のfunctionを、setIntervalで順番に呼んでいく

これにより、BPMを調べて、描画処理とリズム譜さえ書けば、あとはうまいこと描画してくれる感じになると。


具体的には、以下のような感じです。

  • やりたいこと(描画処理)をfunctionとして書く
  var k1 = function() {
    var el = document.getElementById("k");
    el.style.opacity = 1;
    var timerId = setInterval(function() {
      el.style.opacity -= 0.03;

      if (el.style.opacity <= 0.1) {
        clearInterval(timerId);
        timerId = null;
        el.style.opacity = 0;
      }
    }, 10);
  };
  • 耳コピしたリズムを元に、小節に見立てた配列に、それらを配置する

以下は、キック4つ打ち、2拍4拍でスネア、というイメージ。
シンセサイザーやDTMで「打ち込み」の経験のある人には見覚えのある見た目かなと。。

  var bar1 = {
    tr1  : [k1, __, __, __,  k1, __, __, __,  k1, __, __, __,  k1, __, __, __]
    , tr2: [__, __, __, __,  s1, __, __, __,  __, __, __, __,  s1, __, __, __]
  };

ポイントは、

  var __ = function(){};

という空っぽのfunctionを用意して、上記のように埋めることで、
setInterval側では、ひたすら16分音符の間隔で呼ぶようにしている点。

  • 最後に小節を並べてリズム譜は完成
  var score = [
    bar1, bar2, bar1, bar3
    , bar4, bar5, bar4, bar6
    , bar7, bar8, bar7, bar9
    , bar7, bar8, bar7, bar9
  ];


音楽側は、audio/video要素なり、YouTubePlayerAPIなりで、音楽を再生し、
それと同時に、本ライブラリのplay()を呼ぶ、というカタチです。
残念ながら、音楽と描画の開始タイミングを、プログラミングで厳密には合わせられそうにないので手動のもろもろが入りますが・・・。(audio要素だったらそこそこ大丈夫だったかも?失念)


Chromeのタイマーは精度が高いらしく、今回のExample程度の短時間ではほとんど問題なく動いてくれます。
(※Google Chromeでのみ動作確認済み)

経過時間の概念を組み込みたいとか、今見直したら妙な箇所もいろいろありそうとか、いろいろ思うところありますが、諸事情につき、しばらくはできないので、その他もろもろ含めて全般見直しは、いつかの楽しみに取っておこうと。(^_^)

そんな感じで、久しぶりのポストまで。

JavaScriptでバイナリデータ(MP3のID3タグ)を読んでみる

大変ごぶさたしています。
気づけば、最後にブログを書いてから、1年近く経ちました。
この間、たくさんの出来事があり、
ともかく、十数年暮らした東京を離れ、Uターン直前の時期だったりします。

その話はまた別の機会として、本題です。


超久しぶりにブログを書こうという気持ちが生まれたところで、
今まで本や音楽の記事しか書いていませんでしたが、初めてJavaScriptの内容にしてみました。

さて、今さらなのですが・・・
数ヶ月前、JavaScriptで、Javaのbyte[]とほぼ同じカタチで、
バイナリデータを操作できることを知りました。(^^;)

とうとうJavaScriptでそこまでできるようになったか~と感慨に耽りつつ、
ぜひ何か読み取ってみたいと思い、そこで思い当たったのが、MP3。
MP3に埋め込んだID3タグのデータ(楽曲名やジャケット写真)が抜き出せるなあ、と。
(ただ単純に自分の楽しみとして書いてみたいと)

その後もいろいろそれどころじゃない状態が続いていましたが、
先日ようやくちょっと時間ができ、気分転換にJavaScript書きたい!と、
ID3仕様を拾い読みしながら、もろもろ決め打ちしながら書いた次第です。


動かせる状態で公開してみました。
(装飾していないので、見栄え良くないですが・・・>< )

http://kiritter.github.io/jsID3/


四角の枠内に、MP3ファイルをドラッグ&ドロップすると、
画面下部に、楽曲名やジャケット写真が表示される、というものです。
(そのMP3に、ID3v2.3で、それらのデータが埋め込まれていたら)

JavaScriptで処理しているだけなので、
つまりサーバーに送信したりはなく、ブラウザ上での処理なので、
また、MP3を更新したりもないので、
手元にMP3があったら気軽にドロップしてみて下さい。

制約がもろもろあったり、Chromeでしか動作確認していなかったり、なので、
うまくいかない場合も多々あると思いますが・・・m(__)m
(特に、邦楽曲はShift_JISで書かれていたりして、文字化けします)
(あと、少なくとも IE9以下では動かないです。。(^^;) )


以下のような流れで、ドロップしたMP3ファイルのバイナリデータを、bytesから読みました。

    (略)
  var reader = new FileReader();
    (略)
  reader.readAsArrayBuffer(file);
    (略)
  var bytes = new Uint8Array(arrayBuffer);


とりあえず、決め打ちながらも読めたぞ、というところで書くのをやめました。。


<今回の話に関係する本>

オブジェクト指向JavaScript

オブジェクト指向JavaScript

読みたいなあと横目で見つつ、読めずにいたこの本、数ヶ月前にようやく読みました。
とても読み易い内容で、楽しみながら読みました。
JavaScriptパターンの著者だと後から気づきました。
最近、JavaScriptの本が多く出ているので、それらも全部読みたいのですが・・・。


プログラマのための文字コード技術入門 (WEB+DB PRESS plus) (WEB+DB PRESS plusシリーズ)

プログラマのための文字コード技術入門 (WEB+DB PRESS plus) (WEB+DB PRESS plusシリーズ)

こちらも、各種の情報が1冊に凝集されていて、とても楽しく拝見し、大変ためになりました。


<最近のお気に入り楽曲>

Dinka - Constant Sorrow (original mix) - YouTube

ただただ沁みます。


というわけで、ブログを日常的に再開できるのはまだ先になりそうですが、
ひとまずは約1年ぶりの投稿まで。

「ボタンを押して下さい」という表現の曖昧さの話

 

「合図があったら、このボタンを押して下さい。」

 

この指示内容に何か曖昧なところがあるだろうか。

無さそうに見えて、あった。

 

とある開通式的なイベントで、偉い方が現場の装置のボタンを押すという演出があり、その際に冒頭の指示の曖昧さが顕在化した。 

何が起きたか。

そのボタンは、ぐうぅぅぅぅぅと長押しされたのだった!!

 

その操作はあまり望ましくはないものだったようで、現場ではちょっとした騒ぎになったとのことだったけど、実害は何もなく、まあ、ある種の笑い話としてお聞きしたお話。

 

なるほど、ちょっとした緊張感や、確実に押そうという意識から、そのような長押しになったのかもしれませんねとそのときは言ったけど、先日、身近なところで同じような状況に出くわした。

 

それは、両親と携帯電話にまつわる話。 

「○○ボタンを押しても、(説明書の内容とは)違う画面が出てくる」

 

いやーそんなことは無いだろうと思ったけど、
原因は、そう、「長押し」していたのだった。

 

そんな出来事から、冒頭の話を思い出し、
なぜ長押しするという行動になるんだろう??と思った。

 

 

最初は、安直に、世代(年齢)によるものかな、と思った。

しかし、よくよく考えてみると、両親だって、テレビのリモコンは使うし、電子レンジも使うわけで、「ボタンをプチッと押す」という感覚は知っているはず。

 

で、思い至ったのが、
「押す」という表現にはそもそも、「ぐうぅぅぅと長押しする」イメージが含まれているんじゃないかということ。

 

雪道でクルマを押す。

朱肉をつけてハンコを押す。

日常生活で何かを押すときは、大抵「押し続ける」ような気がする、と。

 

というわけで、
日常生活で「ボタンをプチッと押す」という感覚は知っているはずだけど、
いざ、「普段は見ることもない仰々しい装置のボタンを押す」とか、
「携帯電話という比較的最近の、自分には馴染みのない機械のボタンを押す」ということになったときには無意識に、
「いつもの『押す』」=「ぐうぅぅぅと長押しする」の行動になるんじゃないだろうか、
それは確実に押そうという意図も込みで、と思った。

 

 

というわけで、

「長押し」というUIは、あまり良いアイデアじゃないぞ、
「通常の押す」操作を上書きするという面で、とか思った。

ポンッと押しても、長押ししても、同一の挙動をするのが望ましいなと。

さらに、これ以上押し続ける必要は無いですよと分からせるためにも、
押されたら何かしらすぐに反応を示すのが良いと。

 

そんなことを思いながら、今夜は久しぶりに、すき家でカレーを食べました。。

 

あのよく分からないモノたち - 書籍紹介 - 現代アート、超入門!

先日の哲学入門と状況が少し似ているけど、

関心はあるのだけど、どこから入って良いやらよく分からない、

そんな世界へ道筋をつけてくれる本というのはとても有難い。

 

そういう本って、

その世界に通じた人じゃないとなかなか書けないものだし、

分かっている人により詳しく解説するのではなく、

よく分からないと思っている人を導くのだから、

その辺りの機微にも通じていないといけないし。

 

そんなわけで、とてもおもしろく読めたのがこの本。

 

『現代アート、超入門!』 (藤田令伊、集英社、2009)

現代アート、超入門! (集英社新書 484F)

現代アート、超入門! (集英社新書 484F)

 

現代アートの源をどこに置くかについては、必ずしも統一見解はないが、

このフォーヴィスムあたりを一つの源とする意見が比較的多い。

という「フォーヴィスム(野獣派)」のマティスを起点に、

1章につき1つの作品紹介という形で、

作者の考えや作品の位置づけ、その時代の背景等を、

現代に向かって時代を下りながら、現代アートの大枠の流れが解説される。

 

解説している現代アートの流れはきわめて大ざっぱなもので、

かつ、私の独断的視点によるので必ずしもバランスがよいとはいえないかもしれない。

と前置きされているが、

「わかったつもり」にはぜひなっていただきたいと願っている。

とのことで、確かにそんなつもりになれた気がする。

 

個人的に、一番おもしろかったのが、デュシャンの『泉』の章。

なるほど、そういうことだったのか。

目の前の物理的なモノの外観をいくらつぶさに観察したところで何も見えてはこない。

 

というわけで、具体的な内容紹介は省略するけど、

アートというものに向き合うスベを何も持っていなかった私には、

シンプルで骨太のガイドになってくれた気がする有意義な本だった。

(この本のテンションで、もう少し深く広くだったらもっと良かった!)

 

というわけで、自分の視野を広げる類の読書。

 

仏教的なものに対するモヤモヤ感への丁寧な説明 - 書籍紹介 - 史上最強の哲学入門 東洋の哲人たち

今まで熱心に追い求めたことがないから当然のことではあるけど、それはともかくとして、
「仏教的な話って、字面上分かったようになるけどその実、全然よく分からん」
と、長年モヤモヤのまま放置していた内容に対して、
この本以上に親切に丁寧に説明してくれた本に今まで出合ったことが無かった。

 

もちろん、この本の表現を借りるなら、
だけどそれは「ホントウはわかってないだろ」の状態であるのは間違いない。
それは確実。
何故なら、何ら「体験」できていないため。

 

そして、そうやって字面上わかった気になることこそ「ホントウにわかる」から遠ざかる道、
というのも字面上分かるのだけど、
それでも、現代に生きる市井の人間のひとりとして、字面上分かるだけでも随分助かる。
入り口のモヤモヤが晴れたというだけでも。
いや、まあ、字面上も、分かったかどうか怪しいものだが・・・。

 

というわけで、この本の存在をここに紹介だけでもしておきたい。

 

『史上最強の哲学入門 東洋の哲人たち』 (飲茶、マガジン・マガジン、2012)

史上最強の哲学入門 東洋の哲人たち (SUN MAGAZINE MOOK)

史上最強の哲学入門 東洋の哲人たち (SUN MAGAZINE MOOK)

 

いや、表紙がちょっとすごいですよね・・・。
最初、店頭でこの本を見たときは、「うわー、また新手の本が出てきた」と思った。
完全にネガティブな意味で。
だからその日は完全にスルーだった。
で、後日、各種の縁で、後述の西洋哲学の本を手に取るに至り、
そこから、本書も手に取った次第。 

 

最初からもう率直に伝えてくれる。
この本を読んでもきっと「理解」できないよ、と。
西洋哲学は「理解することが難しい」けど、「不可能」という意味ではない。
しかし、東洋哲学は少なくとも読書することで理解に達するのはまず「不可能」なんだ、と。
そこから長い長い話が始まる。

 

が、この厚い本、ぶっちゃけ最初に出たひとつのことを繰り返し手を変え品を変え説明し続けているようなものだ。
それは他でもない東洋哲学がそういうものだからだ。
何しろ東洋哲学では最初にもう「答え」が出ているようなものなのだ!
後は如何にしてその境地に皆を連れて行けるか、同じ体験をしてもらうか、それに尽きるという話になる。
いやはや、後述の西洋哲学の本を読んだ後では、これはもう確かに「何とも不遜な」という表現が分かる気がする。。
じゃあ、全然適当なことを言っているのかというと、それがまた驚くべきことに、そうじゃない。
西洋哲学が論理に論理を重ねてたどり着いたような場所にいきなり立っていたりする。 

 

個人的な趣味で、ピンポイントでひとつだけ内容に触れると、
臨済宗の栄西の章の「公案」での「隻手の音」のやり取り。
現代人にとってこれほど分かり易い説明もないんじゃないかと思った。
「弟子は真っ青になる。」
何だかその気持ちが分かった気がした。そりゃ真っ青になるよね・・・。
まさに、方法論の体系なのだということが簡潔に分かるやり取りだった。

 

 

この本を読む前に、以下の本を読んでおくと、
一見つかみどころのない東洋哲学を、
つかみどころのある西洋哲学に照らし合わせることができるような感じになるので、
というか、以下の本で説明された話も出てくるので、
併せておすすめしたい。

 

『史上最強の哲学入門』(飲茶、マガジン・マガジン、2010)

史上最強の哲学入門 (SUN MAGAZINE MOOK)

史上最強の哲学入門 (SUN MAGAZINE MOOK)

 

 

さて、西洋哲学にしろ東洋哲学にしろ、
そういうことを考えて一体何になるのよ、という問いかけに対しては、
とりあえず、ストレートにいえば、人類にとって不要なことだとはまったく思えない、
という感じでしょうか。 
何しろ、人類がより良い状態になるために、
(それがその人個人の問題から出発していたとしても、)
考えている、考えてきた、その結果、蓄積だと思うため。
直接的にしろ、間接的にしろ、その恩恵は巡り巡って受けていると思うため。

まあ、何事も適材適所の役割分担だという気持ち。
とりあえず、○○原理主義、というのが一番厄介。 

 

というところで、おわり。

 

しかし、こうして、各時代のいろんな人の話を聞くと(説明されると)、
ある種のスッキリ感が出てきた。 
いや、すべて解決してスッキリ、というスッキリ感ではなくて、
(何しろ、何も解決はしていない、) 
こういうところにたどり着いているんだなあということを知ったスッキリ感というか。 
このスッキリ感を礎にして、先に進みたい。 

キリがないので、おわり。

 

もろもろの話題 - アブダクション

ひょんなことから、アブダクションという思考法の話を思い出したので、書き留めておく。

システム開発・運用保守に携わる人には、馴染み深い思考法ではないかと思う。
その名前は知らなくても。 

 

自分の好きな古代史の、ひとつのキーワードである「たたり」を例に記してみる。
(例としてあまり気持ちの良い話ではないけど・・・ひとつの話題でつながったので・・・)

 

悪事を働いたA氏は大切な息子を失った。
悪事を働いたB氏は重い病気を患った。
悪事を働いたC氏は急死した。
ゆえに、悪事を働いた者には災いが降りかかる(だろう)。

 

  • 演繹

悪事を働いた者には災いが降りかかる。
D氏は悪事を働いた。
ゆえに、D氏には災いが降りかかる。

 

ライバルをだまして殺害したというE氏が急死するという事態が起こった。
もし、非業の死を遂げた者はその恨みを晴らすべく仕返しにやってくるのだと考えると、今回の出来事は当然の帰結だ。
ゆえに、そういうことがあるのだ、と考える理由がある。
(信じられるので、それを「祟り」と呼ぼう) 

 

 

アブダクションの有名な例としては、大陸移動説の話。

大西洋を挟んだ両大陸の海岸線が似ているという事実が浮かび上がった。
もし、元々ひとつの大陸だったものが分離したのだと考えると、今回の事実は当然の帰結だ。
ゆえに、大陸が分離するという考えが真であると考える理由がある。

 

 

さて、なぜ、システム開発・運用保守に携わる方に馴染み深いかといえば、
バグ修正・トラブル解決で、無意識にこの思考法を使っていると思うため。

 

あるデータが更新されていないという障害が発生した。
もし、○○をしたときに△△していないならば、これは当然の帰結だ。
(ゆえに、○○のときに△△していないのが原因だと考える理由がある)
よし、○○のときに△△しているかどうか調べよう。
あっ、していない! これが原因だ。 修正!

 

一応、そのつづきの話として、

○○のときにしていないなら、●●のときでもしていないんじゃないか、
このようなことが起きるなら、□□ということも起きるんじゃないか、
今回のようなことを防ぐには、こういうことをすればいいんじゃないか、
そんな風に連鎖していったりなど。

 

おわり。

 

3つの方法 - 書籍紹介 - 「はかなさ」と日本人

ひょんなことから以前読んだこの本を思い出した。

 

『「はかなさ」と日本人 - 「無常」の日本精神史』 (竹内整一、平凡社、2007)

「はかなさ」と日本人―「無常」の日本精神史 (平凡社新書)

「はかなさ」と日本人―「無常」の日本精神史 (平凡社新書)

 

 

示唆されることの多い本ほど、紹介するのが大変だ、とか、
すぐに実生活に役立つ、そんな本だけを紹介しないといけないなら、それでも書く理由なんてあるだろうか、とか、そんなことをいろいろ思いつつ、ちょっとブログから離れていたけど、
気が向いたときに気ままに書くことにした。

 

 

この本、日本の歴史が好きな人ならきっとおもしろいと思う。
歴史小説好きな人には、その時代の人々の背景を知ることでよりおもしろく読めるとか。
また、まさにアイデンティティ確立のさなかにいる年代の人には、
現実問題として示唆されるものも少なくないんじゃなかろうか、そんなことを思ったりする。
とても丁寧な筆遣いで話が進んでいくという面からもおすすめしたい気持ち。

 

「はじめに」で、本書のテーマが示される。

(前略)

それはまぎれもなく、ひとつの無常・ニヒリズム状況を示しています。

本書では、こうした状況をそれとして主題化して検討し、

その状況を何らかのかたちで肯定に転ずることができるとすれば、

それは、どのようなかたちでありうるか、

ということについて考えてみたいと思います。

問い方の表現をかえれば、

「はかなさ」の向こう側があるとすれば、

それは、どこにどのようにありうるか、という問題として立てて考えてみたいと思います。

そして、

「はかなさ」「むなしさ」というような事柄は、現代に初めて生まれたものじゃなく、人間が生まれて死んでいくという状況下で常にあったもので、その時代その時代に、格闘の歴史があったのだということで、これまで問われ続けてきたのと同様の問いの蓄積のうえで問われなければならない、ということで、

1章の最後で、分析の進め方が示される。

そこで、以下、「はかなさ」の向こう側のあり方を、

図式的に次の三つのタイプに分けて考えてみたいと思います。

①「夢の外へ」

  この世は夢、だが夢ならぬ外の世界があり、そこへと目覚めていく。

②「夢の内へ」

  この世は夢、ならば、さらにその内へと、いわば夢中にのめり込んでいく。

③「夢と現のあわいへ」

  この世は夢か現か、その「ありてなき」がごとき生をそれとして生きようとする。

 

①と③については、現代でもそれなりに一般的で想像可能な考え方だと思う。

①は、浄土へ、極楽へ、という考え方だし、

③は、「今を生きる」とか「大河の一滴に過ぎないけど、その一滴が大河を作る」とかの考え方かと。(※ちょっとニュアンス違うかも・・・)

 

それはともかくとして、何より驚きだったのは、②の考え方。
こういう考え方を、この本で初めて知った。
びっくりして、そして、戦国時代の話と照らし合わせて、何だかわかったような感じがした。
(能の幽玄というのもこの志向なのだろうか?? 知らないまま適当に書いてますが・・・) 

この世が「浅き夢」(※)であるならば、その中途半端な「浅さ」がまずいのであって、

むしろそれをさらに、いわば「深き夢」、「濃き夢」へと仕立て上げ、のめり込んでいこうとするような志向

(※「いろは歌」=「色は匂へど散りぬるを 我が世誰そ常ならむ 有為の奥山今日越えて 浅き夢見じ酔ひもせず」の「浅き夢」を受けての表現)

ということで、

露とおき露と消えゆくわが身かな 浪速のことは夢のまた夢

豊臣秀吉の辞世の歌)

 

(前略)

いずれにしても、武士たちは、自分たちの生をふりかえったときに、

判で押したように「ああ夢のようだった」という感慨をもらしています。

(中略)

しかしだからといって、彼らは、『一言芳談』のように、

「此世の事はとてもかくても候」(※)などとは決して言いません。

むしろ懸命に、この夢幻のごとき世界を生き抜いています。

その能動的な行動力やエネルギーには驚くべきものがあります。

この世は夢幻と言いながら、というより、むしろそう言うがゆえに、

彼らは自分の命に執着することなく、戦闘者として生き切ることができた、

あるいは、死に切ることができたということでもあります。

そこにかえって、通常にはない能動性を可能にしている面もあるかと思います。

(※この世のことはどうでもいいので、後世をどうか救って下さい、という感じの気持ち)

 

夢に突入して夢ならざるものへと突き抜けていく

なんともすごい方法があったものだと驚いた。

そして、実は現代でも、ある層の人たちはある意味この方法を採っているとも言えるのかな、
そんな理解にも及んだ。

  

というところで、以上です。