WebAudio APIによるWebブラウザ上のDJ Mixer
Webブラウザで動作するDJミキサーをGitHubで公開しました。ライセンスはMITライセンスです。ローカルのmp3ファイルをロードして初歩的なDJプレイが行えます。
経緯
WebAudio APIの勉強で参加した第一回Web Audio APIもくもく会, 第二回WebAudioもくもく会でネタに困って作ったものです。主催者の@thleapさんと場所を提供していただいたアイアンドシー・クルーズさんありがとうございました。
DJミキサーとして機能的に不足はありますが、WebAudio APIを使ったサンプルアプリという位置づけで公開します。
概要
以下の2タイプのアプリとして使うことができます。
HTML + JavaScriptのローカルアプリ
node.js & expressアプリ
- 開発の利便性のためで、コンパイルしてHTML + JavaScriptアプリにしています。
使い方
ローカルのオーディオファイルを読み込む。
DJする。
しくみ
オーディオ読込み
WebAudioの通常のサンプルではたいてい、XMLHttpRequestで同一ドメイン内のオーディオデータを読み込んでいますが、Same Origin Policyに従わないと行けないのでローカルのオーディオファイルを読もうとするとエラーが発生します。これを回避するため、このアプリでは以下の方法でローカルのオーディオファイルを読み込んでいます。
- FILE APIを使ってDataURI形式でオーディオファイルを読み込む。
- DataURIのbase64の部分だけを取り出す。
- Base64のデータをArrayBuffer形式にデコードする。
- WebAudio APIの
decodeAudioData()
で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ライセンスにしましたのでご自由にどうぞ。