ブラウザ上で弾ける「あの楽器」を作ってみた

CodeGrid三周年記念パーティー on Zusaar http://www.zusaar.com/event/7847057 で話した、ブラウザ上で弾ける「あの楽器」についての資料です。

Transcript

1. ϒϥ΢β্Ͱ஄͚Δ ʮ͋ͷָثʯΛ ࡞ͬͯΈͨ @kubosho_ / Grani, inc.
2. CodeGrid 3प೥͓ΊͰͱ͏͍͟͝·͢ʂ
3. ͋ͷָثʁ
4. ʲॳԻϛΫʳInnocenceʲ3DPVʳ http://www.nicovideo.jp/watch/sm5480792
5. http://www.tripshots.net/img/wp/wp_ano.jpg
6. ͋ͷָث #ͱ͸ • ʮʲॳԻϛΫʳInnocenceʲ3DPVʳʯ ͱ͍͏ಈըʹొ৔͢ ΔɺॳԻϛΫ͕஄͍͍ͯΔָث • ܗঢ়͸γϣϧμʔΩʔϘʔυʹ͍ۙɻ伴൫ʹ͋ͨΔ෦෼͕Ұ໘ σΟεϓϨΠʹͳ͓ͬͯΓɺλονͯ͠ԋ૗͢Δɻλον͢Δ ͜ͱͰσΟεϓϨΠ্ʹ௚ઢɺࡾ֯ܗɺ࢛֯ܗͳͲͷزԿֶ໛ ༷͕͋ΒΘΕΔ
 (http://dic.nicovideo.jp/a/ %E3%81%82%E3%81%AE%E6%A5%BD%E5%99%A8 ΑΓ)
7. ͳΜ͔ͩ࡞Εͦ͏ʂ (֎૷আ͘)
8. ࡞ͬͯΈͨ
9. http://bit.ly/anogakki ※IE͸ඇରԠͰ͢ ※Android͸ChromeͰ ݟ͍ͯͩ͘͞
10. ʮ͋ͷָثʯ Λࢧ͑Δٕज़
11. Web Audio API
12. Web Audio API • Web Audio API ͷ createOscillatorNode() Λ࢖ͬͯαΠϯ ೾Λੜ੒ • ԻߴͷσʔλΛɺҰ୴ MIDI ϊʔτ൪߸ʹม׵͠ɺMIDI ϊʔτ൪߸͔Βप೾਺ʹม׵ͯ͠ɺoscillatorNode ͷ frequency.value ϓϩύςΟʹ୅ೖ͍ͯ͠Δ • touchstart or mousedown Πϕϯτ͕ى͖ͨΒɺੜ੒ͨ͠ ԻΛ࠶ੜͯ͠ɺ200ms ޙʹࢭΊΔͱ͍͏ॲཧΛ͍ͯ͠Δ
13. ԻߴΛप೾਺ʹ͢ΔྲྀΕ “A4” (Իߴ) ->
 69 (MIDIϊʔτ൪߸) ->
 440 (प೾਺)
14. SVG
15. SVG • Snap.svg ͱ͍͏ϥΠϒϥϦΛ࢖͍ɺ touchstart or mousedown Πϕϯτ͕ى͖ͨ ΒɺزԿֶ໛༷Λඳը͍ͯ͠Δ • ಈըΛݟͭͭɺͲͷΑ͏ʹزԿֶ໛༷Λඳը ͢Δ͔ௐ੔ (໛༷ͱ͔Ξχϝʔγϣϯͱ͔)
16. ·ͱΊ
17. ·ͩα൛ͳͷͰɺ σϞΛ৮ͬͯΈͯ ؾ͍ͮͨͱ͜Ζ͕͋ͬͨΒ issue ࡞͍ͬͯͩ͘͞ http://bit.ly/anogakki-issues
18. ͋Γ͕ͱ͏͍͟͝·ͨ͠ Twitter: https://twitter.com/kubosho_ GitHub: https://github.com/kubosho