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

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