JavaScriptで音合成 moriyoshi (http://www.mozo.jp /)
Jun 14, 2015
はい
えー
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)
そんな時代
?
ありがとうございました