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

Cb0e411d88a1bcd1562890c816970a8e?s=47 Shota Kubota
May 08, 2015
840

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

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

Cb0e411d88a1bcd1562890c816970a8e?s=128

Shota Kubota

May 08, 2015
Tweet

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