Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Shota Kubota
May 08, 2015
900

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

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

Shota Kubota

May 08, 2015
Tweet

More Decks by Shota Kubota

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