Loopbgm

手持ちのゲーム音楽ファイルをひたすらループさせるWebアプリを作った。 loop-bgm GitHubのloop-bgm 以下はなんで作りたかったのか、 どんな技術を用いたり勉強したかったのか、 今後どういう風に作り込んでいくか等をつらつらと書き並べていく。 そもそも何故作りたかったのか BGMのループ再生 - 高見知英のかいはつにっし(β) しかし、それでも集中を阻むもの。 それは「普通のサウンドトラックの曲データは、ゲーム内BGMのように、ループ再生ができない」ということ。 いくら戦闘曲とはいえ1ループはそれほど長くなく、だいたい1分ちょっとで終わってしまいます。 サウンドトラックのデータは、大体2～3ループぶん収録されてますが、それでも2，3分で終わり。 この曲の切れ目の無音期間と、再度イントロから始まってしまう感覚が、どうしても集中力を削いでしまいます。 まさにこれ。 一回フェードアウトして音楽が途切れ、イントロが大音量で流れ始めるあれで集中力の8割は持って行かれるのだ。 職場のメンバーにいくら力説しても全く理解が得られなかったが、探せば同じ事考えてる人間は結構居るものだ。 一度HTML5のAudioのcurrentTimeをいじるという手法で作っていたのだが、 退職と同時にクリーンインストールしたことでそのHTMLファイルやスクリプトが全部削除。 まぁいいや、もう一回作り直そうとなった次第。 どんな技術を採用したり、習得したかったのか 既に一度作っているというのもあり、 LiveScript様のパワーを借りれば1日程度でこしらえる事は可能なのだが、折角なので勉強になる事がしたかった。 従って、要件は以下の3つ AltJS、静的サイトジェネレータのベストプラクティスの模索 波形データを可視化してループ時間を設定したかった React でページ構築をしたかった AltJS、静的サイトジェネレータのベストプラクティスの模索 今時素のHTML、CSS、JSを駆使してWebサイトを作るなんてありえない。 前職はLiveScriptを用いて開発していたのだが、 Gulpにどっぷり浸かる生活、あの毎回gulp watchのコンパイルに成功したのを見届けないとブラウザーのF5を叩けないとかありえんだろ。 というで、職場全体では新プロジェクトは色々改良を重ねていたが、自分が先陣でプロジェクトを立ち上げるという訳でもなかった為、他人の作ったシステムを文句を言いながら利用する立場であった為、使い勝手や設計にいまいちしっくり来ていなかった。 HTML: Pug (いつもの) JavaScript: LiveScript (いつもの) CSS: Stylus (いつもの) どうしたかに関してはloop-bgm/bin/serve.lsを参照。 要するにExpressでローカル用のWebサーバーを構築して、 localhost:3000/index.htmlにアクセスが飛んできたら、 assets/templates/index.pugを探しに行って、ファイルが存在したら都度コンパイルして返すような仕組みを作った。 ちょっとでもファイルがなかったりするとエラーが出まくるが気にしない。 ローカル開発環境でしか使わないからね。 前の職場では本番環境用のスクリプトにこのような構造があり、環境変数やif文でゴリ押しする仕組みだったのが気に入らなかった。 波形データを可視化してループ時間を設定したかった AnalyserNode - WEB SOUNDER Web Audio APIにおいて, サウンドの視覚化のために定義されているのが, AnalyserNodeクラスです.