Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Webで音楽を奏でる

Fce89ba6c42ee675dba62e4b127a7290?s=47 nishaya
September 04, 2017

 Webで音楽を奏でる

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

Fce89ba6c42ee675dba62e4b127a7290?s=128

nishaya

September 04, 2017
Tweet

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