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
2.1k
そのSPA、本当に必要ですか?
nishaya
0
3.4k
ES.next — 20年目のECMAScriptに向けて
nishaya
0
1.3k
Other Decks in Technology
See All in Technology
Modern_Data_Stack最新動向クイズ_買収_AI_激動の2025年_.pdf
sagara
0
230
Escaping_the_Kraken_-_October_2025.pdf
mdalmijn
0
150
Function calling機能をPLaMo2に実装するには / PFN LLMセミナー
pfn
PRO
0
990
OCI Network Firewall 概要
oracle4engineer
PRO
1
7.8k
Optuna DashboardにおけるPLaMo2連携機能の紹介 / PFN LLM セミナー
pfn
PRO
2
930
【Kaigi on Rails 事後勉強会LT】MeはどうしてGirlsに? 私とRubyを繋いだRail(s)
joyfrommasara
0
170
【Oracle Cloud ウェビナー】クラウド導入に「専用クラウド」という選択肢、Oracle AlloyとOCI Dedicated Region とは
oracle4engineer
PRO
3
120
社内報はAIにやらせよう / Let AI handle the company newsletter
saka2jp
8
1.2k
Trust as Infrastructure
bcantrill
1
370
Geospatialの世界最前線を探る [2025年版]
dayjournal
0
160
セキュアな認可付きリモートMCPサーバーをAWSマネージドサービスでつくろう! / Let's build an OAuth protected remote MCP server based on AWS managed services
kaminashi
3
230
実装で解き明かす並行処理の歴史
zozotech
PRO
1
630
Featured
See All Featured
It's Worth the Effort
3n
187
28k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Six Lessons from altMBA
skipperchong
28
4k
Thoughts on Productivity
jonyablonski
70
4.9k
Scaling GitHub
holman
463
140k
Making Projects Easy
brettharned
119
6.4k
Docker and Python
trallard
46
3.6k
GraphQLとの向き合い方2022年版
quramy
49
14k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Agile that works and the tools we love
rasmusluckow
331
21k
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