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

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

Shota Kubota
May 08, 2015
910

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

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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. Web Audio API

    View full-size slide

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

    View full-size slide

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

    69 (MIDIϊʔτ൪߸) ->

    440 (प೾਺)

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide