Google ChromeでDJきどり

Web Audio APIをつかってDJごっこのテスト。

Chrome DJ - jsdo.it - share JavaScript, HTML5 and CSS

これはなに？

2つの音楽を適宜つないでいきます。URLに音楽ファイルのURLを入れてEnter。Startボタンをクリックすると、ファイルを読み込んだ後に再生されます。再生までは時間がかかりぎみなので、しばし待つべし。Crossはクロスフェーダー。左右に動かすと音が重なります。これらは全部Javascriptで。Google Chromeに実装されている、Web Audio APIをつかっています。

Web Audio APIって？

Google Chromeに実装されている、Javascriptで音声ファイルを扱うためのAPI。XMLHttpRequestでファイルを取得し、エフェクタなどのAPIを通した後出力するのがおおまかな流れ。再生中でもパラメータをいじるとリアルタイムに反映されます。

UIを考えるのがめんどうだったとはいえ、使いにくさが半端ないですね。djayとかを購入したほうがいいと思います。

June 6th: UIを書き直しました

さすがに殺伐かつ簡素なUIがすぎたので、書き直しました。読み込みに少し時間を要しますが、つまみとスライダーが表示されます。縦スライダーはBPMの調整、2つのつまみは上：ハイパスフィルタ、下：ローパスフィルタです。横スライダーはクロスフェーダーです。つまみはjqskinを利用して実装しています。

注意

Web Audio APIは基本的にGoogle Chromeのみに実装されているので、それ以外のブラウザでは特に何も表示されません。 It's exclusive to Google Chrome.

再生したい音楽ファイルのURLを入力したあと、Enterキーを押してください。キーがトリガーになります。残念な実装なのはわかってますってば！

Startボタンを押すまでは、各種つまみは動きません。

あなたのお気に入りのチューンでロックしたいときは、127.0.0.1以下にファイルを配置し、そのURLを入力してください。このとき"XHR Error"が出る場合は設定が必要です。音楽ファイルはXMLHttpRequestで取得してくるのですが、この取得先は表示しているページと同じドメインである必要がありました。過去形なのは、各ブラウザでこの制限をゆるめつつあるからです。XMLHttpRequestで投げたリクエストに対するレスポンスのヘッダ中に"Access-Control-Allow-Origin: *"が設定されていれば、ブラウザはレスポンスを有効にするのです。*はワイルドカードなので、特定のサイトも指定できます。今回の場合はjsrun.itを指定ですね。これを設定しても同様のエラーが出るときは、URLがまちがってたりとか。ブラウザに直接入力して、404などでないことを確かめてみてください。