CodeGrid三周年記念パーティー on Zusaar http://www.zusaar.com/event/7847057 で話した、ブラウザ上で弾ける「あの楽器」についての資料です。
ϒϥβ্Ͱ͚Δʮ͋ͷָثʯΛ࡞ͬͯΈͨ@kubosho_ / Grani, inc.
View Slide
CodeGrid3प͓ΊͰͱ͏͍͟͝·͢ʂ
͋ͷָثʁ
ʲॳԻϛΫʳInnocenceʲ3DPVʳhttp://www.nicovideo.jp/watch/sm5480792
http://www.tripshots.net/img/wp/wp_ano.jpg
͋ͷָث #ͱ• ʮʲॳԻϛΫʳInnocenceʲ3DPVʳʯ ͱ͍͏ಈըʹొ͢ΔɺॳԻϛΫ͕͍͍ͯΔָث• ܗঢ়γϣϧμʔΩʔϘʔυʹ͍ۙɻ伴൫ʹ͋ͨΔ෦͕Ұ໘σΟεϓϨΠʹͳ͓ͬͯΓɺλονͯ͠ԋ͢Δɻλον͢Δ͜ͱͰσΟεϓϨΠ্ʹઢɺࡾ֯ܗɺ࢛֯ܗͳͲͷزԿֶ༷͕͋ΒΘΕΔ (http://dic.nicovideo.jp/a/%E3%81%82%E3%81%AE%E6%A5%BD%E5%99%A8 ΑΓ)
ͳΜ͔ͩ࡞Εͦ͏ʂ(֎আ͘)
࡞ͬͯΈͨ
http://bit.ly/anogakki※IEඇରԠͰ͢※AndroidChromeͰݟ͍ͯͩ͘͞
ʮ͋ͷָثʯΛࢧ͑Δٕज़
Web Audio API
Web Audio API• Web Audio API ͷ createOscillatorNode() ΛͬͯαΠϯΛੜ• ԻߴͷσʔλΛɺҰ୴ MIDI ϊʔτ൪߸ʹม͠ɺMIDIϊʔτ൪߸͔Βपʹมͯ͠ɺoscillatorNode ͷfrequency.value ϓϩύςΟʹೖ͍ͯ͠Δ• touchstart or mousedown Πϕϯτ͕ى͖ͨΒɺੜͨ͠ԻΛ࠶ੜͯ͠ɺ200ms ޙʹࢭΊΔͱ͍͏ॲཧΛ͍ͯ͠Δ
ԻߴΛपʹ͢ΔྲྀΕ“A4” (Իߴ) -> 69 (MIDIϊʔτ൪߸) -> 440 (प)
SVG
SVG• Snap.svg ͱ͍͏ϥΠϒϥϦΛ͍ɺtouchstart or mousedown Πϕϯτ͕ى͖ͨΒɺزԿֶ༷Λඳը͍ͯ͠Δ• ಈըΛݟͭͭɺͲͷΑ͏ʹزԿֶ༷Λඳը͢Δ͔ௐ (༷ͱ͔Ξχϝʔγϣϯͱ͔)
·ͱΊ
·ͩα൛ͳͷͰɺσϞΛ৮ͬͯΈͯؾ͍ͮͨͱ͜Ζ͕͋ͬͨΒissue ࡞͍ͬͯͩ͘͞http://bit.ly/anogakki-issues
͋Γ͕ͱ͏͍͟͝·ͨ͠Twitter: https://twitter.com/kubosho_GitHub: https://github.com/kubosho