Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ブラウザ上で弾ける「あの楽器」を作ってみた
Search
Shota Kubota
May 08, 2015
0
970
ブラウザ上で弾ける「あの楽器」を作ってみた
CodeGrid三周年記念パーティー on Zusaar
http://www.zusaar.com/event/7847057
で話した、ブラウザ上で弾ける「あの楽器」についての資料です。
Shota Kubota
May 08, 2015
Tweet
Share
More Decks by Shota Kubota
See All by Shota Kubota
私の困りごとと解決案 / My issues and proposed solutions
kubosho
1
340
個人からチームに広げるアクセシビリティ向上の輪 / Accessibility improvement expanding from individual to team
kubosho
1
2.1k
ABEMA のアクセシビリティータスクフォースは何をしてきて何をやるか / What ABEMA accessibility task force has done and will do
kubosho
1
2.8k
アクセシビリティーとは? / What the accessibility ?
kubosho
1
330
CSS のルールセットを高速に出力する VS Code 拡張を作った / Made a VS Code extension to output CSS rulesets
kubosho
1
5.2k
AbemaTVにおけるCSS is too fragile問題に対する解 / Solution of "CSS is too fragile" by AbemaTV
kubosho
12
5.5k
CSS設計を破綻させない
kubosho
10
2.8k
Prottフロントエンドのいまとこれから
kubosho
1
2.8k
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Typedesign – Prime Four
hannesfritz
40
2.5k
Become a Pro
speakerdeck
PRO
26
5.2k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
The Language of Interfaces
destraynor
156
24k
For a Future-Friendly Web
brad_frost
176
9.6k
KATA
mclloyd
29
14k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Testing 201, or: Great Expectations
jmmastey
42
7.2k
What's in a price? How to price your products and services
michaelherold
244
12k
Producing Creativity
orderedlist
PRO
344
40k
Transcript
ϒϥβ্Ͱ͚Δ ʮ͋ͷָثʯΛ ࡞ͬͯΈͨ @kubosho_ / Grani, inc.
CodeGrid 3प͓ΊͰͱ͏͍͟͝·͢ʂ
͋ͷָثʁ
ʲॳԻϛΫʳ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