Webで音楽を奏でる

Reactでパターンシーケンサを作った話

Transcript

1. ϒϥ΢βͰԻָΛ૗ͰΔ ɹ SpeeeKaigi 2017/08/25 ೋࣾ୩ ߉༎ @nishaya 1
2. ࣗݾ঺հ • ೋࣾ୩ ߉༎ • GitHub: @nishaya • WebΞϓϦέʔγϣϯΤϯδχΞ • (ג) Speee ϓϩδΣΫτਪਐࣨ • React͸2016೥຤ʙ 2
3. લճ·Ͱͷ͋Β͢͡ React/ReduxͰγϯηαΠβʔΛ࡞ͬͨ2 • ԻΛग़͍ͨ͠ͱ͍͏ڧ͍Ϟνϕʔγ ϣϯ • React/Redux৯Θͣݏ͍Λࠀ෰͢Δ • ࣄલʹ΍͓͍ͬͯͨ͜ͱͰϓϩδΣ ΫτͰͷ໎͍͕ܰݮ͞Εͨ 2 ReactͰγϯηαΠβʔΛ࡞ͬͨ࿩ - Speee DEVELOPER BLOG http://tech.speee.jp/entry/2017/04/06/100000 3
4. ղܾ͍ͨ͠՝୊ • ָث͕஄͚ͳ͍ • Իָཧ࿦͕Θ͔Βͳ͍ • ͍Ζ͍ΖͳԻΛ࢖͍͍ͨ ...͚ͲɺԻָΛ૗Ͱ͍ͨ 4
5. Reaktion Multi Track Web Sequencer 5
6. ָث͕஄͚ͳ͍ • ָثΛ࡞ͬͨ͸͍͍͕ɺ஄͚ͳ͍ͷͰԻָ͕Ͱ͖ͳ͔ͬͨ • ϒϥ΢βʹࣗಈԋ૗ͤ͞Ε͹͍͍ • ೚ҙͷλΠϛϯάͰԻΛ໐Β͢࢓૊Έ͕ඞཁ 6
7. DEMO #1 7
8. ೚ҙͷλΠϛϯάͰԻΛ໐Β͢ • Ұ൪࠷ॳʹࢥ͍ු͔Ϳͷ͸ setInterval() ΍ setTimeout() Ͱϧʔϓ͢Δํ๏ • ਫ਼౓͕଍Γͳ͍ • OscillatorNode.start() ΍ AudioBufferSourceNode.start() ʹɺൃԻλΠϛϯάΛε έδϡʔϦϯά͢Δ 8
9. λΠϛϯά੍ޚͷ࿩ • ൃԻλΠϛϯάͷσʔλ͸ʮstep = 16෼Իූ1ͭ෼ʯͱ͍͏ ୯ҐͰ؅ཧ 9
10. λΠϛϯά੍ޚͷ࿩ • ϧʔϓ͝ͱʹɺݱࡏͷ࣌ࠁ͔Β࣍ʹstepΛ໐Β͢·ͰͷΦϑ ηοτΛࢉग़ t1 • ֤AudioNodeͷ start() ʹ͸ઈର࣌ࠁΛ౉͢ඞཁ͕͋Δͨ Ίɺࢉग़ͨ͠Φϑηοτʹ AudioContext.currentTime Λ ଍ͨ͠΋ͷΛൃԻ։࢝λΠϛϯάͱͯ͠εέδϡʔϦϯά͢ Δ t1 ϧʔϓࣗମ͸ setTimeout() Ͱ੍ޚ 10
11. ✅ λΠϛϯά੍ޚ 11
12. Իָཧ࿦͕Θ͔Βͳ͍ • ԻָΛਅ໘໨ʹษڧͯ͜͠ͳ͔ͬͨͷͰͲ͏΍ͬͯۂΛߏ੒ ͨ͠Β͍͍͔Θ͔Βͳ͍ • ੜ੒͞ΕͨύλʔϯΛ૊Έ߹ΘͤΔํ๏ͳΒ͍͚Δ͔΋ 12
13. DEMO #2 13
14. มԽͷ࿈࠯ʹΑͬͯύλʔϯΛੜ੒͢Δ • ύλʔϯΛड͚ͯɺ৽͍͠ύλʔϯΛฦ͢ύʔπΛfragment ͱͯ͠ఆٛ • fragmentʹ͸܁Γฦ͠ɺ֊ஈঢ়ͷมԽɺԻఔͷ্ԼͳͲ͞· ͟·ͳछྨΛ༻ҙ • fragmentΛ਺चͭͳ͗ʹ͢Δ͜ͱͰɺ࠷ॳͷύλʔϯ͔Βେ ͖͘มԽͤ͞Δ͜ͱ΋Ͱ͖Δ 14
15. 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. ✅ ύλʔϯੜ੒ 16
17. ͍Ζ͍ΖͳԻΛ࢖͍͍ͨ • γϯηαΠβʔΛ࡞ͬͨͱ͖͸oscillatorͱݺ͹ΕΔجຊ೾ܗ ͔Β͍Ζ͍ΖͳԻ৭Λ࡞͕ͬͨɺγϯηαΠζ͕೉͍͠Ի(ε τϦϯάͱ͔ɺ੠ͱ͔)΋࢖͍͍ͨ • ࿥Իͨ͠Ի͕ͦͷ৔Ͱ࢖͑ͨΒָͦ͠͏ 17
18. DEMO #3 18
19. MediaDevices, MediaRecorderΛ࢖͏ PCʹ઀ଓ͞ΕͨϚΠΫ΍ΧϝϥΛར༻͢ΔͨΊͷAPI • navigator.mediaDevices.getUserMedia({ audio: true, video: false }) Λݺͼग़͢ͱϚΠΫ࢖༻ͷڐՄΛٻΊΔμ ΠΞϩά͕දࣔ͞ΕΔ 19
20. MediaDevices, MediaRecorderΛ࢖͏ • Ϣʔβ͕ڐՄ͢ΔͱϚΠΫೖྗ͕ MediaStream ͱͯ͠ಘΒΕ ΔͷͰɺ new MediaRecorder(stream) Λ࢖ͬͯ࿥ԻΛߦ͏ 20
21. Ի৭ͱͯ͠࢖͏ͨΊͷ޻෉ • ϊʔϚϥΠζͰԻྔΛ࠷దԽ • ಄ग़͠ͱϧʔϓ • Իఔมߋ(υͷ伴൫Λԡͨ͠ΒυͷԻ Ͱ໐ΔΑ͏ʹௐ੔͢Δ) 21
22. αϯϓϦϯάσʔλ(flowtype) // @flow export type Sample = { buffer: AudioBuffer, id: string, name: string, offset: number, loop: boolean, loopStart: number, loopEnd: number, transpose: number, } 22
23. ✅ αϯϓϦϯά 23
24. https://reaktion.synthesizer.tokyo/ 3 3 FirebaseͰϗεςΟϯάͯ͠·͢ɻূ໌ॻ΋ઃఆͯ͘͠Εͯศར 24
25. ·ͱΊ • ࠷ऴతʹѻ͏ཁૉ͕ଟ͘ͳ͕ͬͨɺReactͱFlowtypeʹॿ͚ ΒΕͨ • (Ұൠతʹ͸)ϒϥ΢βͰ΍Βͳ͍Α͏ͳࣄΛ͢Δͱɺීஈ࢖ ͍ͬͯͳ͍APIʹ৮ΕΒΕָ͍ͯ͠ • ͦ͜Ͱಘͨܦݧ͕ϓϩμΫτʹؐݩͰ͖ͨΒૉఢ 25