Webで音楽を奏でる

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