Web Midi & Web Audio徹底入門 @ Web Music Hackathon #2


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で使えるオシレーターや、フィルタなどの使い方を解説した記事。

http://www.g200kg.com/jp/docs/webaudio/

あとは、主催者のryoyakawaiさんが作ってくれた、上の記事のチュートリアル的なコード。ここをローカルでひととおり試して、Web MIDIの世界に触れることができました!

https://github.com/ryoyakawai/WebMusicDevelopersJP/tree/master/codeLabs

Web Audio APIの基礎

HTML5 Rocksが作っている「Web Audio APIの基礎」です。かなり丁寧!

http://www.html5rocks.com/ja/tutorials/webaudio/intro/

Web AudioのJavaScriptライブラリ: hoch/WAAX

Web AudioのJavaScriptライブラリ。簡単に呼び出せそう!

https://github.com/hoch/WAAX

Web UI Component: g200kg/Webaudio-controls

ブラウザの表示上でリッチに楽器などを再現してくれるWeb Components集。すばらしい!

https://github.com/g200kg/webaudio-controls

音素材

4.6GBものサウンド素材があるそうです!

http://gigazine.net/news/20070203_sampleswap/

おまけ1: Polymer

Web Componentsを使うためのしくみとしてGoogleの発表したOSS Polymerを恥ずかしながらはじめて知りました。これはほんとうにすばらしい!

http://www.polymer-project.org/

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のサーバの代わりをしてくれるサービスです。

http://nttcom.github.io/skyway/

あとは、WebRTCをJavaScriptから使いやすくするためのpeers/peerjsもはじめて知りました。こちらもすばらしい!

😎 あとがき

Web Audio APIやWeb Midi API系を勉強するのにお勧めな記事などあればぜひコメントください! 

🚌 参考リンク

Menu | Web Music ハッカソン

Web Music ハッカソン #2 - Google+

20140118_Web_Music_Hackathon_Manual - Google ドライブ

📚 おすすめの書籍