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
950
ブラウザ上で弾ける「あの楽器」を作ってみた
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
310
個人からチームに広げるアクセシビリティ向上の輪 / Accessibility improvement expanding from individual to team
kubosho
1
2k
ABEMA のアクセシビリティータスクフォースは何をしてきて何をやるか / What ABEMA accessibility task force has done and will do
kubosho
1
2.8k
アクセシビリティーとは? / What the accessibility ?
kubosho
1
320
CSS のルールセットを高速に出力する VS Code 拡張を作った / Made a VS Code extension to output CSS rulesets
kubosho
1
5.1k
AbemaTVにおけるCSS is too fragile問題に対する解 / Solution of "CSS is too fragile" by AbemaTV
kubosho
12
5.5k
CSS設計を破綻させない
kubosho
10
2.7k
Prottフロントエンドのいまとこれから
kubosho
1
2.8k
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
54
9.1k
The Cult of Friendly URLs
andyhume
78
6.1k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Scaling GitHub
holman
458
140k
GraphQLとの向き合い方2022年版
quramy
44
13k
Thoughts on Productivity
jonyablonski
67
4.4k
A Philosophy of Restraint
colly
203
16k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
5
440
Facilitating Awesome Meetings
lara
50
6.1k
Visualization
eitanlees
146
15k
Unsuck your backbone
ammeep
669
57k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
28
2.1k
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