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
940
ブラウザ上で弾ける「あの楽器」を作ってみた
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
190
個人からチームに広げるアクセシビリティ向上の輪 / Accessibility improvement expanding from individual to team
kubosho
1
1.8k
ABEMA のアクセシビリティータスクフォースは何をしてきて何をやるか / What ABEMA accessibility task force has done and will do
kubosho
1
2.5k
アクセシビリティーとは? / What the accessibility ?
kubosho
1
310
CSS のルールセットを高速に出力する VS Code 拡張を作った / Made a VS Code extension to output CSS rulesets
kubosho
1
5k
AbemaTVにおけるCSS is too fragile問題に対する解 / Solution of "CSS is too fragile" by AbemaTV
kubosho
12
5.2k
CSS設計を破綻させない
kubosho
10
2.7k
Prottフロントエンドのいまとこれから
kubosho
1
2.7k
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
784
250k
Building a Modern Day E-commerce SEO Strategy
aleyda
25
6.7k
Raft: Consensus for Rubyists
vanstee
134
6.5k
4 Signs Your Business is Dying
shpigford
178
21k
Principles of Awesome APIs and How to Build Them.
keavy
124
16k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
29
2.5k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
20
7.2k
BBQ
matthewcrist
82
9k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
35
6.3k
A Philosophy of Restraint
colly
200
16k
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