読者です 読者をやめる 読者になる 読者になる

WebAudio APIによるWebブラウザ上のDJ Mixer

f:id:slowquery:20130412215000p:plain

GitHub - browserdj

Webブラウザで動作するDJミキサーをGitHubで公開しました。ライセンスはMITライセンスです。ローカルのmp3ファイルをロードして初歩的なDJプレイが行えます。

経緯

WebAudio APIの勉強で参加した第一回Web Audio APIもくもく会, 第二回WebAudioもくもく会でネタに困って作ったものです。主催者の@thleapさんと場所を提供していただいたアイアンドシー・クルーズさんありがとうございました。

DJミキサーとして機能的に不足はありますが、WebAudio APIを使ったサンプルアプリという位置づけで公開します。

概要

以下の2タイプのアプリとして使うことができます。

  • HTML + JavaScriptのローカルアプリ

  • node.js & expressアプリ

    • 開発の利便性のためで、コンパイルしてHTML + JavaScriptアプリにしています。

使い方

  1. ローカルのオーディオファイルを読み込む。

  2. DJする。

しくみ

オーディオ読込み

WebAudioの通常のサンプルではたいてい、XMLHttpRequestで同一ドメイン内のオーディオデータを読み込んでいますが、Same Origin Policyに従わないと行けないのでローカルのオーディオファイルを読もうとするとエラーが発生します。これを回避するため、このアプリでは以下の方法でローカルのオーディオファイルを読み込んでいます。

  1. FILE APIを使ってDataURI形式でオーディオファイルを読み込む。
  2. DataURIのbase64の部分だけを取り出す。
  3. Base64のデータをArrayBuffer形式にデコードする。
  4. WebAudio APIdecodeAudioData()でPCMのオーディオデータとして読み込む。

stackoverflowのUsing local file for Web Audio API in Javascript / stackoverflowでこの方針が示されています。

DJミキサー

普通にWebAudio APIを使用しています。

LCDディスプレイ

canvasLCD.js という素晴らしいライブラリを使っています。"Miscellaneous Feeling(雑感) Canvasで作ったLCDディスプレイのデモ"に解説があります。

ヴィジュアライザ

WebAudio APIのAnalyzerNodeで取得したtime-domain波形をD3.jsで可視化しています。

UI

レイアウトはTwitter Bootstrap, DJミキサーのスライダーはjQuery UI, ボタンはCrafting Minimal Circular 3D Buttons with CSS。スライダーのノブの画像はChunky Sliderを作者の許可通り"abuse"させてもらいました。

ライセンス

使いやすいMITライセンスにしましたのでご自由にどうぞ。

広告を非表示にする