adobe max japan 2009: 出張juiカンファレンス - javascriptで音合成

JavaScriptで音合成 moriyoshi (http://www.mozo.jp/)

はい

えー

JavaScriptで音を合成

して、それをその場で

再生しちゃう

できんのそれ?

それ、dataスキームでできるんじゃない?

data:

dataスキーム• RFC2393 (1998年8月!)

• IEを除くブラウザで大体サポート※

•リソースへの参照ではなく、データそのものを表現するURI

• バイナリデータを表現するには

• base64エンコードする

• URIエンコードする

よくある使い方background-image: url(data:image/gif,R0lGODlhEAAQAMIFAAAAAGBgYKCgoODBcPggP///////////yH5BAEKAAcALAAAAAAQABAAAANJeHrQvlCBIKhoUYZdhQfRNHXNFQKDAxAEYC7oMLC0C8LN3K72nesEXaMlQa1aNZYPhWQVaESJbAjFQGLQXcZIjW6B2kxRJS6L

EwA7);

画像がいければ音もいけるはず

で、まあ、

あとはブラウザのメディア再生能力に

頼る。

background-image: url(data:image/gif,R0lGODlhEAAQAMIFAAAAAGBgYKCgoODBcPggP///////////yH5BAEKAAcALAAAAAAQABAAAANJeHrQvlCBIKhoUYZdhQfRNHXNFQKDAxAEYC7oMLC0C8LN3K72nesEXaMlQa1aNZYPhWQVaESJbAjFQGLQXcZIjW6B2kxRJS6L

EwA7);

バイナリデータつくっちゃうJavaScriptで

もこれ

(仮) JS Synthsizer

……(デモ: http://svn.coderepos.org/share/lang/javascript/SoundGenerator/test.html)

(仮) JS Synthsizer

• JavaScriptで音を合成 (=synthesize)

• 今のところは矩形波とノコギリ波の生成に対応

•目指せJS-303

しくみ

+-127 54 67 90 102 125 76 51 9 3 -23…

-127 54 67 90 102 125 76 51 9 3 -23…

-127 54 67 90 102 125 76 51 9 3 -23…

data:audio/wav,R&DIFF%04%7B%00%00WAVEfmt%20%10%00%00%00…

1.2.

3.

4.

<iframe src=”data:audio/wav,RIFF%04%7B%00%00WAVEfmt%20%10%00%00%00…

今後の課題

•リアルタイムストリーミング

➡音を鳴らしながら処理する

•もっとシンセっぽく

➡ローパスフィルタとかの実装

余談

dataスキームでバイナリを吐くテクを

応用して

JavaScriptでExcelのファイルを作る

……

とか

JSでなんでもやるお(含むAS)

そんな時代

？

ありがとうございました