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
Webで音楽を奏でる
Search
nishaya
September 04, 2017
Technology
0
6.1k
Webで音楽を奏でる
Reactでパターンシーケンサを作った話
nishaya
September 04, 2017
Tweet
Share
More Decks by nishaya
See All by nishaya
ブラウザで一緒に音楽をつくる
nishaya
0
2k
そのSPA、本当に必要ですか?
nishaya
0
3.4k
ES.next — 20年目のECMAScriptに向けて
nishaya
0
1.3k
Other Decks in Technology
See All in Technology
助けて! XからWaylandに移行しないと新しいGNOMEが使えなくなっちゃう 2025-07-12
nobutomurata
2
200
ソフトウェアQAがハードウェアの人になったの
mineo_matsuya
3
220
サービスを止めるな! DDoS攻撃へのスマートな備えと最前線の事例
coconala_engineer
1
190
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
18k
AIコードアシスタントとiOS開発
jollyjoester
0
110
“日本一のM&A企業”を支える、少人数SREの効率化戦略 / SRE NEXT 2025
genda
1
280
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
5
39k
Digitization部 紹介資料
sansan33
PRO
1
4.5k
AI時代にも変わらぬ価値を発揮したい: インフラ・クラウドを切り口にユーザー価値と非機能要件に向き合ってエンジニアとしての地力を培う
netmarkjp
0
140
スタックチャン家庭用アシスタントへの道
kanekoh
0
120
モニタリング統一への道のり - 分散モニタリングツール統合のためのオブザーバビリティプロジェクト
niftycorp
PRO
1
520
Data Engineering Study#30 LT資料
tetsuroito
1
270
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Visualization
eitanlees
146
16k
The Language of Interfaces
destraynor
158
25k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Producing Creativity
orderedlist
PRO
346
40k
A designer walks into a library…
pauljervisheath
207
24k
Music & Morning Musume
bryan
46
6.7k
Adopting Sorbet at Scale
ufuk
77
9.5k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Transcript
ϒϥβͰԻָΛͰΔ ɹ SpeeeKaigi 2017/08/25 ೋࣾ୩ ߉༎ @nishaya 1
ࣗݾհ • ೋࣾ୩ ߉༎ • GitHub: @nishaya • WebΞϓϦέʔγϣϯΤϯδχΞ •
(ג) Speee ϓϩδΣΫτਪਐࣨ • React2016ʙ 2
લճ·Ͱͷ͋Β͢͡ React/ReduxͰγϯηαΠβʔΛ࡞ͬͨ2 • ԻΛग़͍ͨ͠ͱ͍͏ڧ͍Ϟνϕʔγ ϣϯ • React/Redux৯Θͣݏ͍Λࠀ͢Δ • ࣄલʹ͓͍ͬͯͨ͜ͱͰϓϩδΣ ΫτͰͷ໎͍͕ܰݮ͞Εͨ
2 ReactͰγϯηαΠβʔΛ࡞ͬͨ - Speee DEVELOPER BLOG http://tech.speee.jp/entry/2017/04/06/100000 3
ղܾ͍ͨ͠՝ • ָث͕͚ͳ͍ • Իָཧ͕Θ͔Βͳ͍ • ͍Ζ͍ΖͳԻΛ͍͍ͨ ...͚ͲɺԻָΛͰ͍ͨ 4
Reaktion Multi Track Web Sequencer 5
ָث͕͚ͳ͍ • ָثΛ࡞͍͍͕ͬͨɺ͚ͳ͍ͷͰԻָ͕Ͱ͖ͳ͔ͬͨ • ϒϥβʹࣗಈԋͤ͞Ε͍͍ • ҙͷλΠϛϯάͰԻΛ໐Β͢Έ͕ඞཁ 6
DEMO #1 7
ҙͷλΠϛϯάͰԻΛ໐Β͢ • Ұ൪࠷ॳʹࢥ͍ු͔Ϳͷ setInterval() setTimeout() Ͱϧʔϓ͢Δํ๏ • ਫ਼͕Γͳ͍ •
OscillatorNode.start() AudioBufferSourceNode.start() ʹɺൃԻλΠϛϯάΛε έδϡʔϦϯά͢Δ 8
λΠϛϯά੍ޚͷ • ൃԻλΠϛϯάͷσʔλʮstep = 16Իූ1ͭʯͱ͍͏ ୯ҐͰཧ 9
λΠϛϯά੍ޚͷ • ϧʔϓ͝ͱʹɺݱࡏͷ࣌ࠁ͔Β࣍ʹstepΛ໐Β͢·ͰͷΦϑ ηοτΛࢉग़ t1 • ֤AudioNodeͷ start() ʹઈର࣌ࠁΛ͢ඞཁ͕͋Δͨ Ίɺࢉग़ͨ͠Φϑηοτʹ
AudioContext.currentTime Λ ͨ͠ͷΛൃԻ։࢝λΠϛϯάͱͯ͠εέδϡʔϦϯά͢ Δ t1 ϧʔϓࣗମ setTimeout() Ͱ੍ޚ 10
✅ λΠϛϯά੍ޚ 11
Իָཧ͕Θ͔Βͳ͍ • ԻָΛਅ໘ʹษڧͯ͜͠ͳ͔ͬͨͷͰͲ͏ͬͯۂΛߏ ͨ͠Β͍͍͔Θ͔Βͳ͍ • ੜ͞ΕͨύλʔϯΛΈ߹ΘͤΔํ๏ͳΒ͍͚Δ͔ 12
DEMO #2 13
มԽͷ࿈ʹΑͬͯύλʔϯΛੜ͢Δ • ύλʔϯΛड͚ͯɺ৽͍͠ύλʔϯΛฦ͢ύʔπΛfragment ͱͯ͠ఆٛ • fragmentʹ܁Γฦ͠ɺ֊ஈঢ়ͷมԽɺԻఔͷ্ԼͳͲ͞· ͟·ͳछྨΛ༻ҙ • fragmentΛचͭͳ͗ʹ͢Δ͜ͱͰɺ࠷ॳͷύλʔϯ͔Βେ ͖͘มԽͤ͞Δ͜ͱͰ͖Δ
14
fragmentͷதͰ͍ͬͯΔ͜ͱ transform(steps: Steps): Steps { const newList = steps.list.map((step) =>
{ const note = step.note + this.state.transpose return { ...step, note } }) return { ...steps, list: newList } } 15
✅ ύλʔϯੜ 16
͍Ζ͍ΖͳԻΛ͍͍ͨ • γϯηαΠβʔΛ࡞ͬͨͱ͖oscillatorͱݺΕΔجຊܗ ͔Β͍Ζ͍ΖͳԻ৭Λ࡞͕ͬͨɺγϯηαΠζ͕͍͠Ի(ε τϦϯάͱ͔ɺͱ͔)͍͍ͨ • Իͨ͠Ի͕ͦͷͰ͑ͨΒָͦ͠͏ 17
DEMO #3 18
MediaDevices, MediaRecorderΛ͏ PCʹଓ͞ΕͨϚΠΫΧϝϥΛར༻͢ΔͨΊͷAPI • navigator.mediaDevices.getUserMedia({ audio: true, video: false })
Λݺͼग़͢ͱϚΠΫ༻ͷڐՄΛٻΊΔμ ΠΞϩά͕දࣔ͞ΕΔ 19
MediaDevices, MediaRecorderΛ͏ • Ϣʔβ͕ڐՄ͢ΔͱϚΠΫೖྗ͕ MediaStream ͱͯ͠ಘΒΕ ΔͷͰɺ new MediaRecorder(stream) ΛͬͯԻΛߦ͏
20
Ի৭ͱͯ͠͏ͨΊͷ • ϊʔϚϥΠζͰԻྔΛ࠷దԽ • ಄ग़͠ͱϧʔϓ • Իఔมߋ(υͷ伴൫Λԡͨ͠ΒυͷԻ Ͱ໐ΔΑ͏ʹௐ͢Δ) 21
αϯϓϦϯάσʔλ(flowtype) // @flow export type Sample = { buffer: AudioBuffer,
id: string, name: string, offset: number, loop: boolean, loopStart: number, loopEnd: number, transpose: number, } 22
✅ αϯϓϦϯά 23
https://reaktion.synthesizer.tokyo/ 3 3 FirebaseͰϗεςΟϯάͯ͠·͢ɻূ໌ॻઃఆͯ͘͠Εͯศར 24
·ͱΊ • ࠷ऴతʹѻ͏ཁૉ͕ଟ͘ͳ͕ͬͨɺReactͱFlowtypeʹॿ͚ ΒΕͨ • (Ұൠతʹ)ϒϥβͰΒͳ͍Α͏ͳࣄΛ͢Δͱɺීஈ ͍ͬͯͳ͍APIʹ৮ΕΒΕָ͍ͯ͠ • ͦ͜Ͱಘͨܦݧ͕ϓϩμΫτʹؐݩͰ͖ͨΒૉఢ 25