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

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

Transcript

1. ϒϥ΢β্Ͱ஄͚Δ
   ʮ͋ͷָثʯΛ
   ࡞ͬͯΈͨ
   @kubosho_ / Grani, inc.
   

   View Slide

2. CodeGrid
   3प೥͓ΊͰͱ͏͍͟͝·͢ʂ
   

   View Slide

3. ͋ͷָثʁ
   

   View Slide

4. ʲॳԻϛΫʳInnocenceʲ3DPVʳ
   http://www.nicovideo.jp/watch/sm5480792
   

   View Slide

5. http://www.tripshots.net/img/wp/wp_ano.jpg
   

   View Slide

6. ͋ͷָث #ͱ͸
   • ʮʲॳԻϛΫʳInnocenceʲ3DPVʳʯ ͱ͍͏ಈըʹొ৔͢
   ΔɺॳԻϛΫ͕஄͍͍ͯΔָث
   • ܗঢ়͸γϣϧμʔΩʔϘʔυʹ͍ۙɻ伴൫ʹ͋ͨΔ෦෼͕Ұ໘
   σΟεϓϨΠʹͳ͓ͬͯΓɺλονͯ͠ԋ૗͢Δɻλον͢Δ
   ͜ͱͰσΟεϓϨΠ্ʹ௚ઢɺࡾ֯ܗɺ࢛֯ܗͳͲͷزԿֶ໛
   ༷͕͋ΒΘΕΔ

   (http://dic.nicovideo.jp/a/
   %E3%81%82%E3%81%AE%E6%A5%BD%E5%99%A8 ΑΓ)
   

   View Slide

7. ͳΜ͔ͩ࡞Εͦ͏ʂ
   (֎૷আ͘)
   

   View Slide

8. ࡞ͬͯΈͨ
   

   View Slide

9. http://bit.ly/anogakki
   ※IE͸ඇରԠͰ͢
   ※Android͸ChromeͰ
   ݟ͍ͯͩ͘͞
   

   View Slide

10. ʮ͋ͷָثʯ
    Λࢧ͑Δٕज़
    

    View Slide

11. Web Audio API
    

    View Slide

12. Web Audio API
    • Web Audio API ͷ createOscillatorNode() Λ࢖ͬͯαΠϯ
    ೾Λੜ੒
    • ԻߴͷσʔλΛɺҰ୴ MIDI ϊʔτ൪߸ʹม׵͠ɺMIDI
    ϊʔτ൪߸͔Βप೾਺ʹม׵ͯ͠ɺoscillatorNode ͷ
    frequency.value ϓϩύςΟʹ୅ೖ͍ͯ͠Δ
    • touchstart or mousedown Πϕϯτ͕ى͖ͨΒɺੜ੒ͨ͠
    ԻΛ࠶ੜͯ͠ɺ200ms ޙʹࢭΊΔͱ͍͏ॲཧΛ͍ͯ͠Δ
    

    View Slide

13. ԻߴΛप೾਺ʹ͢ΔྲྀΕ
    “A4” (Իߴ) ->

    69 (MIDIϊʔτ൪߸) ->

    440 (प೾਺)
    

    View Slide

14. SVG
    

    View Slide

15. SVG
    • Snap.svg ͱ͍͏ϥΠϒϥϦΛ࢖͍ɺ
    touchstart or mousedown Πϕϯτ͕ى͖ͨ
    ΒɺزԿֶ໛༷Λඳը͍ͯ͠Δ
    • ಈըΛݟͭͭɺͲͷΑ͏ʹزԿֶ໛༷Λඳը
    ͢Δ͔ௐ੔ (໛༷ͱ͔Ξχϝʔγϣϯͱ͔)
    

    View Slide

16. ·ͱΊ
    

    View Slide

17. ·ͩα൛ͳͷͰɺ
    σϞΛ৮ͬͯΈͯ
    ؾ͍ͮͨͱ͜Ζ͕͋ͬͨΒ
    issue ࡞͍ͬͯͩ͘͞
    http://bit.ly/anogakki-issues
    

    View Slide

18. ͋Γ͕ͱ͏͍͟͝·ͨ͠
    Twitter: https://twitter.com/kubosho_
    GitHub: https://github.com/kubosho
    

    View Slide