1/18(土)に開催されれた『Web Music Hackathon #2』に参加してきました。Web MidiやWeb Audioは完全に初心者だったので今回はチュートリアルやサンプルのソースを眺めながら、どんなことができるのかを勉強してきました。
今回は完全に初心者だったので備忘録メモと、今後勉強していきたい資料のまとめ記事です!
🏀 Web Midi & Web Audioできること
Menu | Web Music ハッカソンの「[Application] Web Audio API / Web MIDI API」にWeb Midi & Web Audioのサンプルアプリケーションがいくつかありますが、その中でも特に感動したのが下のアプリケーション。
今後Webアプリケーションがどんどんリッチになっていく過程で効果音や音声という要素がより使われるようになりそうと、未来を感じさせてくれるアプリケーションです!
🐞 チュートリアルなど入門資料系
Web Audio APIの解説記事
Web Audio APIで使えるオシレーターや、フィルタなどの使い方を解説した記事。
あとは、主催者のryoyakawaiさんが作ってくれた、上の記事のチュートリアル的なコード。ここをローカルでひととおり試して、Web MIDIの世界に触れることができました!
Web Audio APIの基礎
HTML5 Rocksが作っている「Web Audio APIの基礎」です。かなり丁寧!
Web AudioのJavaScriptライブラリ: hoch/WAAX
Web AudioのJavaScriptライブラリ。簡単に呼び出せそう!
Web UI Component: g200kg/Webaudio-controls
ブラウザの表示上でリッチに楽器などを再現してくれるWeb Components集。すばらしい!
音素材
4.6GBものサウンド素材があるそうです!
おまけ1: Polymer
Web Componentsを使うためのしくみとしてGoogleの発表したOSS Polymerを恥ずかしながらはじめて知りました。これはほんとうにすばらしい!
PolymerをRailsに導入する方法
まだトライできてはいませんが、PolymerをRailsで導入する方法です。@asip2k25さんに教えていただきました。ありがたうございます!
Managing Rails assets with Bower
ahuth/emcee
Integrating Polymer/Web Components with Rails and the asset pipeline - Google グループ
おまけ2: skyway & Peer.js
Skywayも合わせてこの場ではじめて知りました。
こちらはWebRTCのサーバの代わりをしてくれるサービスです。
あとは、WebRTCをJavaScriptから使いやすくするためのpeers/peerjsもはじめて知りました。こちらもすばらしい!
🐰 あとがき
Web Audio APIやWeb Midi API系を勉強するのにお勧めな記事などあればぜひコメントください!
😎 参考リンク
20140118_Web_Music_Hackathon_Manual - Google ドライブ