Webで音楽を奏でる

by nishaya

Slide 1

Slide 1 text

ϒϥ΢βͰԻָΛ૗ͰΔ ɹ SpeeeKaigi 2017/08/25 ೋࣾ୩ ߉༎ @nishaya 1

Slide 2

Slide 2 text

ࣗݾ঺հ • ೋࣾ୩ ߉༎ • GitHub: @nishaya • WebΞϓϦέʔγϣϯΤϯδχΞ • (ג) Speee ϓϩδΣΫτਪਐࣨ • React͸2016೥຤ʙ 2

Slide 3

Slide 3 text

લճ·Ͱͷ͋Β͢͡ React/ReduxͰγϯηαΠβʔΛ࡞ͬͨ2 • ԻΛग़͍ͨ͠ͱ͍͏ڧ͍Ϟνϕʔγ ϣϯ • React/Redux৯Θͣݏ͍Λࠀ෰͢Δ • ࣄલʹ΍͓͍ͬͯͨ͜ͱͰϓϩδΣ ΫτͰͷ໎͍͕ܰݮ͞Εͨ 2 ReactͰγϯηαΠβʔΛ࡞ͬͨ࿩ - Speee DEVELOPER BLOG http://tech.speee.jp/entry/2017/04/06/100000 3

Slide 4

Slide 4 text

ղܾ͍ͨ͠՝୊ • ָث͕஄͚ͳ͍ • Իָཧ࿦͕Θ͔Βͳ͍ • ͍Ζ͍ΖͳԻΛ࢖͍͍ͨ ...͚ͲɺԻָΛ૗Ͱ͍ͨ 4

Slide 5

Slide 5 text

Reaktion Multi Track Web Sequencer 5

Slide 6

Slide 6 text

ָث͕஄͚ͳ͍ • ָثΛ࡞ͬͨ͸͍͍͕ɺ஄͚ͳ͍ͷͰԻָ͕Ͱ͖ͳ͔ͬͨ • ϒϥ΢βʹࣗಈԋ૗ͤ͞Ε͹͍͍ • ೚ҙͷλΠϛϯάͰԻΛ໐Β͢࢓૊Έ͕ඞཁ 6

Slide 7

Slide 7 text

DEMO #1 7

Slide 8

Slide 8 text

೚ҙͷλΠϛϯάͰԻΛ໐Β͢ • Ұ൪࠷ॳʹࢥ͍ු͔Ϳͷ͸ setInterval() ΍ setTimeout() Ͱϧʔϓ͢Δํ๏ • ਫ਼౓͕଍Γͳ͍ • OscillatorNode.start() ΍ AudioBufferSourceNode.start() ʹɺൃԻλΠϛϯάΛε έδϡʔϦϯά͢Δ 8

Slide 9

Slide 9 text

λΠϛϯά੍ޚͷ࿩ • ൃԻλΠϛϯάͷσʔλ͸ʮstep = 16෼Իූ1ͭ෼ʯͱ͍͏ ୯ҐͰ؅ཧ 9

Slide 10

Slide 10 text

λΠϛϯά੍ޚͷ࿩ • ϧʔϓ͝ͱʹɺݱࡏͷ࣌ࠁ͔Β࣍ʹstepΛ໐Β͢·ͰͷΦϑ ηοτΛࢉग़ t1 • ֤AudioNodeͷ start() ʹ͸ઈର࣌ࠁΛ౉͢ඞཁ͕͋Δͨ Ίɺࢉग़ͨ͠Φϑηοτʹ AudioContext.currentTime Λ ଍ͨ͠΋ͷΛൃԻ։࢝λΠϛϯάͱͯ͠εέδϡʔϦϯά͢ Δ t1 ϧʔϓࣗମ͸ setTimeout() Ͱ੍ޚ 10

Slide 11

Slide 11 text

✅ λΠϛϯά੍ޚ 11

Slide 12

Slide 12 text

Իָཧ࿦͕Θ͔Βͳ͍ • ԻָΛਅ໘໨ʹษڧͯ͜͠ͳ͔ͬͨͷͰͲ͏΍ͬͯۂΛߏ੒ ͨ͠Β͍͍͔Θ͔Βͳ͍ • ੜ੒͞ΕͨύλʔϯΛ૊Έ߹ΘͤΔํ๏ͳΒ͍͚Δ͔΋ 12

Slide 13

Slide 13 text

DEMO #2 13

Slide 14

Slide 14 text

มԽͷ࿈࠯ʹΑͬͯύλʔϯΛੜ੒͢Δ • ύλʔϯΛड͚ͯɺ৽͍͠ύλʔϯΛฦ͢ύʔπΛfragment ͱͯ͠ఆٛ • fragmentʹ͸܁Γฦ͠ɺ֊ஈঢ়ͷมԽɺԻఔͷ্ԼͳͲ͞· ͟·ͳछྨΛ༻ҙ • fragmentΛ਺चͭͳ͗ʹ͢Δ͜ͱͰɺ࠷ॳͷύλʔϯ͔Βେ ͖͘มԽͤ͞Δ͜ͱ΋Ͱ͖Δ 14

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

✅ ύλʔϯੜ੒ 16

Slide 17

Slide 17 text

͍Ζ͍ΖͳԻΛ࢖͍͍ͨ • γϯηαΠβʔΛ࡞ͬͨͱ͖͸oscillatorͱݺ͹ΕΔجຊ೾ܗ ͔Β͍Ζ͍ΖͳԻ৭Λ࡞͕ͬͨɺγϯηαΠζ͕೉͍͠Ի(ε τϦϯάͱ͔ɺ੠ͱ͔)΋࢖͍͍ͨ • ࿥Իͨ͠Ի͕ͦͷ৔Ͱ࢖͑ͨΒָͦ͠͏ 17

Slide 18

Slide 18 text

DEMO #3 18

Slide 19

Slide 19 text

MediaDevices, MediaRecorderΛ࢖͏ PCʹ઀ଓ͞ΕͨϚΠΫ΍ΧϝϥΛར༻͢ΔͨΊͷAPI • navigator.mediaDevices.getUserMedia({ audio: true, video: false }) Λݺͼग़͢ͱϚΠΫ࢖༻ͷڐՄΛٻΊΔμ ΠΞϩά͕දࣔ͞ΕΔ 19

Slide 20

Slide 20 text

MediaDevices, MediaRecorderΛ࢖͏ • Ϣʔβ͕ڐՄ͢ΔͱϚΠΫೖྗ͕ MediaStream ͱͯ͠ಘΒΕ ΔͷͰɺ new MediaRecorder(stream) Λ࢖ͬͯ࿥ԻΛߦ͏ 20

Slide 21

Slide 21 text

Ի৭ͱͯ͠࢖͏ͨΊͷ޻෉ • ϊʔϚϥΠζͰԻྔΛ࠷దԽ • ಄ग़͠ͱϧʔϓ • Իఔมߋ(υͷ伴൫Λԡͨ͠ΒυͷԻ Ͱ໐ΔΑ͏ʹௐ੔͢Δ) 21

Slide 22

Slide 22 text

αϯϓϦϯάσʔλ(ﬂowtype) // @flow export type Sample = { buffer: AudioBuffer, id: string, name: string, offset: number, loop: boolean, loopStart: number, loopEnd: number, transpose: number, } 22

Slide 23

Slide 23 text

✅ αϯϓϦϯά 23

Slide 24

Slide 24 text

https://reaktion.synthesizer.tokyo/ 3 3 FirebaseͰϗεςΟϯάͯ͠·͢ɻূ໌ॻ΋ઃఆͯ͘͠Εͯศར 24

Slide 25

Slide 25 text

·ͱΊ • ࠷ऴతʹѻ͏ཁૉ͕ଟ͘ͳ͕ͬͨɺReactͱFlowtypeʹॿ͚ ΒΕͨ • (Ұൠతʹ͸)ϒϥ΢βͰ΍Βͳ͍Α͏ͳࣄΛ͢Δͱɺීஈ࢖ ͍ͬͯͳ͍APIʹ৮ΕΒΕָ͍ͯ͠ • ͦ͜Ͱಘͨܦݧ͕ϓϩμΫτʹؐݩͰ͖ͨΒૉఢ 25