画像から音を作って鳴らすだけ

だいぶ昔のエントリだけど、JSでwavファイルを作成して再生するというのを見つけた。

詳しくはこれ読めばわかるけど大雑把にmmlを各周波数に変換してwavファイル作ってaudioタグで再生する感じ。

この周波数変換のとこをうまく画像の各pixel情報から対応する変換ができれば、理論上画像からwavファイルを作って音が出せるはず。

image -> wav

そんでまず作ったのがこれ。

適当に画像をアップして、wavファイル作って再生すると音が鳴る。

ほぼ元ネタのコピーだけどとりあえず動いた。

シオンタウンっぽい不気味音源。

ただ、これだと単音が続くだけなのでちと寂しい。

和音とまではいかなくとももう少し厚みのある音にしたい。

image + Web Audio API

ということで次にWeb Audio APIを使って作ったのがこれ。

こっちはさっきのバージョンとは違い、前の音が少しあとの音にかぶさるようになっている。

なのでさっきより厚みのある不気味音源が作れる。

よりシオンタウンっぽさがでる。

苦労した点

wav変換はほぼパクリだし実装の苦労はなかった。

ただ、そもそも音に対する知識がなすぎて各用語を理解するのが厳しかった。

そのあたりはWeb Sounderという神サイトがあって、これを一通り読めばなんとなくわかった気になるのでおすすめ。

その他、参考になったサイトは以下にまとめておきます。




では、いろんな画像で試してみてくれ(モバイル端末だとうまく動かないのであとでまた修正します)