酒と泪とRubyとRailsと

Ruby on Rails と Objective-C は酒の肴です!

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ブラウザの表示上でリッチに楽器などを再現してくれる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系を勉強するのにおすすめな記事などあればぜひコメントください!

Special Thanks

Menu | Web Music ハッカソン

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

20140118_Web_Music_Hackathon_Manual - Google ドライブ

おすすめの書籍