The slides used for the talk at Adobe MAX Japan 2009, about on-the-fly sound synthesis in pure JavaScript.

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

2. はい

3. えー

4. JavaScriptで
音を合成

5. して、それを
その場で
再生しちゃう

6. できんのそれ?

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

8. data:

9. dataスキーム
•RFC2393 (1998年8月!)
•IEを除くブラウザで大体サポート※
•リソースへの参照ではなく、
データそのものを表現するURI
•バイナリデータを表現するには
•base64エンコードする
•URIエンコードする

10. よくある使い方
background-image: url(data:image/gif,
R0lGODlhEAAQAMIFAAAAAGBgYKCgoODBcPggP///////////yH5BAEKAA
cALAAAAAAQABAAAANJeHrQvlCBIKhoUYZdhQfRNHXNFQKDAxAEYC7oMLC
0C8LN3K72nesEXaMlQa1aNZYPhWQVaESJbAjFQGLQXcZIjW6B2kxRJS6L
EwA7);

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

12. で、まあ、

13. あとはブラウザの
メディア再生能力に
頼る。

14. background-image: url(data:image/gif,
R0lGODlhEAAQAMIFAAAAAGBgYKCgoODBcPggP///////////yH5BAEKAA
cALAAAAAAQABAAAANJeHrQvlCBIKhoUYZdhQfRNHXNFQKDAxAEYC7oMLC
0C8LN3K72nesEXaMlQa1aNZYPhWQVaESJbAjFQGLQXcZIjW6B2kxRJS6L
EwA7);
バイナリデータ
つくっちゃう
JavaScriptで
も
これ

15. (仮)
JS Synthsizer

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

17. (仮) JS Synthsizer
•JavaScriptで音を合成 (=synthesize)
•今のところは矩形波とノコギリ波の生
成に対応
•目指せJS-303

18. しくみ
+
-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…

19. 今後の課題
•リアルタイムストリーミング
➡音を鳴らしながら処理する
•もっとシンセっぽく
➡ローパスフィルタとかの実装

20. 余談

21. dataスキームで
バイナリを吐くテクを
応用して

22. JavaScriptで
Excelのファイルを作る

23. ……

24. とか

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

26. そんな時代

27. ？

28. ありがとう
ございました