Adobe MAX Japan 2009: 出張JUIカンファレンス - JavaScriptで音合成

1,524 views
1,461 views

Published on

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

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,524
On SlideShare
0
From Embeds
0
Number of Embeds
262
Actions
Shares
0
Downloads
11
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Adobe MAX Japan 2009: 出張JUIカンファレンス - JavaScriptで音合成

  1. 1. JavaScriptで音合成 moriyoshi (http://www.mozo.jp/)
  2. 2. はい
  3. 3. えー
  4. 4. JavaScriptで 音を合成
  5. 5. して、それを その場で 再生しちゃう
  6. 6. できんのそれ?
  7. 7. それ、dataスキーム でできるんじゃない?
  8. 8. data:
  9. 9. dataスキーム •RFC2393 (1998年8月!) •IEを除くブラウザで大体サポート※ •リソースへの参照ではなく、 データそのものを表現するURI •バイナリデータを表現するには •base64エンコードする •URIエンコードする
  10. 10. よくある使い方 background-image: url(data:image/gif, R0lGODlhEAAQAMIFAAAAAGBgYKCgoODBcPggP///////////yH5BAEKAA cALAAAAAAQABAAAANJeHrQvlCBIKhoUYZdhQfRNHXNFQKDAxAEYC7oMLC 0C8LN3K72nesEXaMlQa1aNZYPhWQVaESJbAjFQGLQXcZIjW6B2kxRJS6L EwA7);
  11. 11. 画像がいければ 音もいけるはず
  12. 12. で、まあ、
  13. 13. あとはブラウザの メディア再生能力に 頼る。
  14. 14. background-image: url(data:image/gif, R0lGODlhEAAQAMIFAAAAAGBgYKCgoODBcPggP///////////yH5BAEKAA cALAAAAAAQABAAAANJeHrQvlCBIKhoUYZdhQfRNHXNFQKDAxAEYC7oMLC 0C8LN3K72nesEXaMlQa1aNZYPhWQVaESJbAjFQGLQXcZIjW6B2kxRJS6L EwA7); バイナリデータ つくっちゃう JavaScriptで も これ
  15. 15. (仮) JS Synthsizer
  16. 16. ……(デモ: http://svn.coderepos.org/share/lang/javascript/SoundGenerator/test.html)
  17. 17. (仮) JS Synthsizer •JavaScriptで音を合成 (=synthesize) •今のところは矩形波とノコギリ波の生 成に対応 •目指せJS-303
  18. 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. 19. 今後の課題 •リアルタイムストリーミング ➡音を鳴らしながら処理する •もっとシンセっぽく ➡ローパスフィルタとかの実装
  20. 20. 余談
  21. 21. dataスキームで バイナリを吐くテクを 応用して
  22. 22. JavaScriptで Excelのファイルを作る
  23. 23. ……
  24. 24. とか
  25. 25. JSでなんでもやるお (含むAS)
  26. 26. そんな時代
  27. 27.
  28. 28. ありがとう ございました

×