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
990
ブラウザ上で弾ける「あの楽器」を作ってみた
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
360
個人からチームに広げるアクセシビリティ向上の輪 / 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.9k
アクセシビリティーとは? / What the accessibility ?
kubosho
1
350
CSS のルールセットを高速に出力する VS Code 拡張を作った / Made a VS Code extension to output CSS rulesets
kubosho
1
5.3k
AbemaTVにおけるCSS is too fragile問題に対する解 / Solution of "CSS is too fragile" by AbemaTV
kubosho
12
5.6k
CSS設計を破綻させない
kubosho
10
2.8k
Prottフロントエンドのいまとこれから
kubosho
1
2.8k
Featured
See All Featured
BBQ
matthewcrist
88
9.6k
Rails Girls Zürich Keynote
gr2m
94
13k
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.4k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
19
1.2k
The Cost Of JavaScript in 2023
addyosmani
49
7.9k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
What's in a price? How to price your products and services
michaelherold
245
12k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Optimizing for Happiness
mojombo
378
70k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Faster Mobile Websites
deanohume
307
31k
The Cult of Friendly URLs
andyhume
78
6.4k
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