hitode909の日記

以前はプログラミング日記でしたが、今は子育て日記です

無限にAmen Breakを再生するウェブサービス

無限にAmen Breakを切り刻んで再生し続けるウェブサービスを作った.Firefoxで動く.
WindowsのFirefoxだとちょっと音が途切れたりするらしい.Macだとちゃんと動く.
追記 Google Chromeで見ると意図せず音割れしてめちゃくちゃかっこいい音が出る.原因は不明.

Amen




Amen BreakのwavファイルをXHRで取ってきて,JSでバイナリを解析して,ビートごとに分割して,それをランダムに並べることで,新しいパターンを作ってる.
音はaudioタグで,波形はcanvasで出してる.
ビートごとに分割してるので,ランダムに並べても,ちゃんとそれっぽく聞こえる.

参考

Amen Breakについて.

XHRでバイナリを取得するのに,すごい参考になった.req.overrideMimeType('text/plain; charset=x-user-defined');とか,base64 encodeするときに & 0xffするとか.

wavファイルのフォーマット.今回は,headerのパースはちゃんとやってなくて,headerとbodyに分割して,headerは触らないようにする,というくらい.

ビート検出のアルゴリズムが載ってる.ビート検出,というのは,ドラムを叩く瞬間を検出するとか,そういう感じのやつ.簡単な実装でうまくいっておもしろい.

前に作った,JSで音を出すやつ.audioタグの周りはだいたい同じ.これは,JSで作った波形を出してるけど,今回は,既存のwavのバイナリをJSで加工して出してるので,ちょっとやってることが違う.