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
980
ブラウザ上で弾ける「あの楽器」を作ってみた
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
350
個人からチームに広げるアクセシビリティ向上の輪 / 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
340
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
GitHub's CSS Performance
jonrohan
1030
460k
GraphQLとの向き合い方2022年版
quramy
45
14k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
12k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
Fireside Chat
paigeccino
37
3.3k
Testing 201, or: Great Expectations
jmmastey
42
7.4k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
118
51k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.3k
Site-Speed That Sticks
csswizardry
4
450
Stop Working from a Prison Cell
hatefulcrawdad
268
20k
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