adobe max japan 2009: 出張juiカンファレンス - javascriptで音合成
DESCRIPTION
The slides used for the talk at Adobe MAX Japan 2009, about on-the-fly sound synthesis in pure JavaScript.TRANSCRIPT
![Page 2: Adobe MAX Japan 2009: 出張JUIカンファレンス - JavaScriptで音合成](https://reader036.vdocuments.net/reader036/viewer/2022062313/557da4c9d8b42a3a7c8b53c8/html5/thumbnails/2.jpg)
はい
![Page 3: Adobe MAX Japan 2009: 出張JUIカンファレンス - JavaScriptで音合成](https://reader036.vdocuments.net/reader036/viewer/2022062313/557da4c9d8b42a3a7c8b53c8/html5/thumbnails/3.jpg)
えー
![Page 4: Adobe MAX Japan 2009: 出張JUIカンファレンス - JavaScriptで音合成](https://reader036.vdocuments.net/reader036/viewer/2022062313/557da4c9d8b42a3a7c8b53c8/html5/thumbnails/4.jpg)
JavaScriptで音を合成
![Page 5: Adobe MAX Japan 2009: 出張JUIカンファレンス - JavaScriptで音合成](https://reader036.vdocuments.net/reader036/viewer/2022062313/557da4c9d8b42a3a7c8b53c8/html5/thumbnails/5.jpg)
して、それをその場で
再生しちゃう
![Page 6: Adobe MAX Japan 2009: 出張JUIカンファレンス - JavaScriptで音合成](https://reader036.vdocuments.net/reader036/viewer/2022062313/557da4c9d8b42a3a7c8b53c8/html5/thumbnails/6.jpg)
できんのそれ?
![Page 7: Adobe MAX Japan 2009: 出張JUIカンファレンス - JavaScriptで音合成](https://reader036.vdocuments.net/reader036/viewer/2022062313/557da4c9d8b42a3a7c8b53c8/html5/thumbnails/7.jpg)
それ、dataスキームでできるんじゃない?
![Page 8: Adobe MAX Japan 2009: 出張JUIカンファレンス - JavaScriptで音合成](https://reader036.vdocuments.net/reader036/viewer/2022062313/557da4c9d8b42a3a7c8b53c8/html5/thumbnails/8.jpg)
data:
![Page 9: Adobe MAX Japan 2009: 出張JUIカンファレンス - JavaScriptで音合成](https://reader036.vdocuments.net/reader036/viewer/2022062313/557da4c9d8b42a3a7c8b53c8/html5/thumbnails/9.jpg)
dataスキーム• RFC2393 (1998年8月!)
• IEを除くブラウザで大体サポート※
•リソースへの参照ではなく、データそのものを表現するURI
• バイナリデータを表現するには
• base64エンコードする
• URIエンコードする
![Page 10: Adobe MAX Japan 2009: 出張JUIカンファレンス - JavaScriptで音合成](https://reader036.vdocuments.net/reader036/viewer/2022062313/557da4c9d8b42a3a7c8b53c8/html5/thumbnails/10.jpg)
よくある使い方background-image: url(data:image/gif,R0lGODlhEAAQAMIFAAAAAGBgYKCgoODBcPggP///////////yH5BAEKAAcALAAAAAAQABAAAANJeHrQvlCBIKhoUYZdhQfRNHXNFQKDAxAEYC7oMLC0C8LN3K72nesEXaMlQa1aNZYPhWQVaESJbAjFQGLQXcZIjW6B2kxRJS6L
EwA7);
![Page 11: Adobe MAX Japan 2009: 出張JUIカンファレンス - JavaScriptで音合成](https://reader036.vdocuments.net/reader036/viewer/2022062313/557da4c9d8b42a3a7c8b53c8/html5/thumbnails/11.jpg)
画像がいければ音もいけるはず
![Page 12: Adobe MAX Japan 2009: 出張JUIカンファレンス - JavaScriptで音合成](https://reader036.vdocuments.net/reader036/viewer/2022062313/557da4c9d8b42a3a7c8b53c8/html5/thumbnails/12.jpg)
で、まあ、
![Page 13: Adobe MAX Japan 2009: 出張JUIカンファレンス - JavaScriptで音合成](https://reader036.vdocuments.net/reader036/viewer/2022062313/557da4c9d8b42a3a7c8b53c8/html5/thumbnails/13.jpg)
あとはブラウザのメディア再生能力に
頼る。
![Page 14: Adobe MAX Japan 2009: 出張JUIカンファレンス - JavaScriptで音合成](https://reader036.vdocuments.net/reader036/viewer/2022062313/557da4c9d8b42a3a7c8b53c8/html5/thumbnails/14.jpg)
background-image: url(data:image/gif,R0lGODlhEAAQAMIFAAAAAGBgYKCgoODBcPggP///////////yH5BAEKAAcALAAAAAAQABAAAANJeHrQvlCBIKhoUYZdhQfRNHXNFQKDAxAEYC7oMLC0C8LN3K72nesEXaMlQa1aNZYPhWQVaESJbAjFQGLQXcZIjW6B2kxRJS6L
EwA7);
バイナリデータつくっちゃうJavaScriptで
もこれ
![Page 15: Adobe MAX Japan 2009: 出張JUIカンファレンス - JavaScriptで音合成](https://reader036.vdocuments.net/reader036/viewer/2022062313/557da4c9d8b42a3a7c8b53c8/html5/thumbnails/15.jpg)
(仮) JS Synthsizer
![Page 16: Adobe MAX Japan 2009: 出張JUIカンファレンス - JavaScriptで音合成](https://reader036.vdocuments.net/reader036/viewer/2022062313/557da4c9d8b42a3a7c8b53c8/html5/thumbnails/16.jpg)
……(デモ: http://svn.coderepos.org/share/lang/javascript/SoundGenerator/test.html)
![Page 17: Adobe MAX Japan 2009: 出張JUIカンファレンス - JavaScriptで音合成](https://reader036.vdocuments.net/reader036/viewer/2022062313/557da4c9d8b42a3a7c8b53c8/html5/thumbnails/17.jpg)
(仮) JS Synthsizer
• JavaScriptで音を合成 (=synthesize)
• 今のところは矩形波とノコギリ波の生成に対応
•目指せJS-303
![Page 18: Adobe MAX Japan 2009: 出張JUIカンファレンス - JavaScriptで音合成](https://reader036.vdocuments.net/reader036/viewer/2022062313/557da4c9d8b42a3a7c8b53c8/html5/thumbnails/18.jpg)
しくみ
+-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…
![Page 19: Adobe MAX Japan 2009: 出張JUIカンファレンス - JavaScriptで音合成](https://reader036.vdocuments.net/reader036/viewer/2022062313/557da4c9d8b42a3a7c8b53c8/html5/thumbnails/19.jpg)
今後の課題
•リアルタイムストリーミング
➡音を鳴らしながら処理する
•もっとシンセっぽく
➡ローパスフィルタとかの実装
![Page 20: Adobe MAX Japan 2009: 出張JUIカンファレンス - JavaScriptで音合成](https://reader036.vdocuments.net/reader036/viewer/2022062313/557da4c9d8b42a3a7c8b53c8/html5/thumbnails/20.jpg)
余談
![Page 21: Adobe MAX Japan 2009: 出張JUIカンファレンス - JavaScriptで音合成](https://reader036.vdocuments.net/reader036/viewer/2022062313/557da4c9d8b42a3a7c8b53c8/html5/thumbnails/21.jpg)
dataスキームでバイナリを吐くテクを
応用して
![Page 22: Adobe MAX Japan 2009: 出張JUIカンファレンス - JavaScriptで音合成](https://reader036.vdocuments.net/reader036/viewer/2022062313/557da4c9d8b42a3a7c8b53c8/html5/thumbnails/22.jpg)
JavaScriptでExcelのファイルを作る
![Page 23: Adobe MAX Japan 2009: 出張JUIカンファレンス - JavaScriptで音合成](https://reader036.vdocuments.net/reader036/viewer/2022062313/557da4c9d8b42a3a7c8b53c8/html5/thumbnails/23.jpg)
……
![Page 24: Adobe MAX Japan 2009: 出張JUIカンファレンス - JavaScriptで音合成](https://reader036.vdocuments.net/reader036/viewer/2022062313/557da4c9d8b42a3a7c8b53c8/html5/thumbnails/24.jpg)
とか
![Page 25: Adobe MAX Japan 2009: 出張JUIカンファレンス - JavaScriptで音合成](https://reader036.vdocuments.net/reader036/viewer/2022062313/557da4c9d8b42a3a7c8b53c8/html5/thumbnails/25.jpg)
JSでなんでもやるお(含むAS)
![Page 26: Adobe MAX Japan 2009: 出張JUIカンファレンス - JavaScriptで音合成](https://reader036.vdocuments.net/reader036/viewer/2022062313/557da4c9d8b42a3a7c8b53c8/html5/thumbnails/26.jpg)
そんな時代
![Page 27: Adobe MAX Japan 2009: 出張JUIカンファレンス - JavaScriptで音合成](https://reader036.vdocuments.net/reader036/viewer/2022062313/557da4c9d8b42a3a7c8b53c8/html5/thumbnails/27.jpg)
?
![Page 28: Adobe MAX Japan 2009: 出張JUIカンファレンス - JavaScriptで音合成](https://reader036.vdocuments.net/reader036/viewer/2022062313/557da4c9d8b42a3a7c8b53c8/html5/thumbnails/28.jpg)
ありがとうございました