React Rally 2015: Makin' Music with React & The Midi / Audio APIs

The Web Audio API has taken a huge leap forward by introducing MIDI into the equation. That means making music in the browser with all the great instruments you've had at home! Learn what it takes to build your own synths, styles or effects with React!

Transcript

1. MAKIN’ MUSIC WITH REACT
   Peter Piekarczyk
   React Rally 2015
   

   View Slide

2. Peter Piekarczyk
   PIE - CAR - CHICK
   • @peterpme
   • github.com/ppiekarczyk
   • JSConf 2015 - Migrating Backbone To React
   • UI Engineer, Trunk Club
   

   View Slide

3. Trunk Club
   Chicago, IL
   Men hate to shop but love to look good
   • React
   • Babel
   • Alt/Mcfly/Reflux
   • Webpack
   • 10 SPA’s
   • Microservices
   • Promised to stick to React
   

   View Slide

4. View Slide

5. Why Am I Here?
   • React can render more than just your website

   • Chrome Stable Released Web Audio API 4/14
   • Audio synthesis right in the browser!

   • Chrome Stable Released Midi API 5/15
   • Play that audio with your electronic keyboard!
   

   View Slide

6. ME & Music
   Violin and piano growing up (hated it)
   • Discovered Music Making Apps
   • DJ’d in College for a short time
   • Focused on making music
   • Rekindled that relationship
   Freshman year, circa 2009
   

   View Slide

7. What Does It Take
   TO MAKE
   MUSIC?
   

   View Slide

8. Synthesizer
   Electronic musical instrument
   that produces a wide variety of sounds
   

   View Slide

9. Synthesizer
   

   View Slide

10. OSCILLATOR
    A device for generating oscillating electric currents
    

    View Slide

11. SINE WAVE
    

    View Slide

12. SAWTOOTH WAVE
    

    View Slide

13. SQUARE WAVE
    

    View Slide

14. TUNING FORK
    

    View Slide

15. ENVELOPE
    

    View Slide

16. DIGITAL AUDIO WORKSTATION
    

    View Slide

17. A DAW IS a

    FRAMEWORK
    YOU CAN USE
    TO CREATE
    MUSIC
    

    View Slide

18. GLOBAL VARIABLES
    
    

    View Slide

19. DEMO
    Attack, Decay, Sustain, Release
    

    View Slide

20. Gaming
    Browser-based games are becoming a reality
    • Unreal Engine (Firefox)
    • Chrome Racer (Google)
    • http://g.co/racer
    • Angry Birds for Chrome
    

    View Slide

21. Gaming DX
    Browser-based games are utilizing the Web Audio API
    • Update sound effects on the fly
    • No need to compile an mp3 anymore

    • Create more sounds as you need to
    • Cheaper to create an oscillator in the browser

    than to import another mp3
    

    View Slide

22. CHROME RACER
    

    View Slide

23. PRODUCING
    Why are the MIDI/Audio API’s big for music makers
    • Making music is a PITA!
    • GB’s & GB’s of synthesizers, soundpacks, beats
    • Numerous hard drives
    • Dedicated music making computer
    • Not the best when it comes to convenience
    

    View Slide

24. PORTABILITY
    Portability is Tough
    Imagine having to check Facebook
    on only one personal desktop computer
    

    View Slide

25. PORTABILITY
    

    View Slide

26. YOU DON’T NEED
    EVERYTHING
    

    View Slide

27. COLLABORATING
    Why are the MIDI/Audio API’s big for music makers
    • Sharing projects is a hassle
    • Latency
    • Dependencies (worse than NPM)
    • Exact Copy of Directory & Structure
    

    View Slide

28. View Slide

29. WHAT IS MIDI?
    Musical Instrument Digital Interface
    The standard means of communicating
    between instruments or a computer
    

    View Slide

30. WHAT IS MIDI?
    • Carries event messages
    • Notation
    • Pitch
    • Velocity
    

    View Slide

31. MIDI ~ JSON
    • Set of instructions
    • An entire song can be coded in a few hundred lines
    • Easy to modify, manipulate
    • Use any instrument to control music
    • Data layer for UI
    

    View Slide

32. MIDI IS THE
    SHEET MUSIC
    FOR YOUR
    COMPUTER
    

    View Slide

33. View Slide

34. View Slide

35. REACT?!
    • Synthesizers have A LOT of State
    • React is GREAT at State
    

    View Slide

36. 
    

    View Slide

37. View Slide

38. View Slide

39. View Slide

40. View Slide

41. View Slide

42. MIDI API BRIDGE
    • github.com/ppiekarczyk/js-midi
    • Simple bridge for the MIDI API
    • Automatic Helper Methods
    • On Key {Press, Release}
    • Event Note to Frequency
    

    View Slide

43. METHODS
    startMidiRequest()
    frequencyFromNote()
    noteOn()
    noteOff()
    onMidiSuccess()
    onMidiFail()
    onMidiStateChange()
    

    View Slide

44. View Slide

45. DEMO
    Midi
    

    View Slide

46. VIKTOR SYNTH
    • nicroto.github.io/viktor/
    • Not React, but very cool
    • based on Moog synthesizer
    

    View Slide

47. Midi Synth
    github.com/cwilso/midi-synth
    Thanks Chris Wilson!
    The guy who made it all happen
    

    View Slide

48. THANK YOU
    @peterpme
    github.com/ppiekarczyk
    github.com/ppiekarczyk/react-midi
    

    View Slide