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
2. Peter Piekarczyk PIE - CAR - CHICK • @peterpme • github.com/ppiekarczyk • JSConf 2015 - Migrating Backbone To React • UI Engineer, Trunk Club
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
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!
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
7. What Does It Take TO MAKE MUSIC?
8. Synthesizer Electronic musical instrument that produces a wide variety of sounds
9. Synthesizer
10. OSCILLATOR A device for generating oscillating electric currents
11. SINE WAVE
12. SAWTOOTH WAVE
13. SQUARE WAVE
14. TUNING FORK
15. ENVELOPE
16. DIGITAL AUDIO WORKSTATION
17. A DAW IS a
 FRAMEWORK YOU CAN USE TO CREATE MUSIC
18. GLOBAL VARIABLES
19. DEMO Attack, Decay, Sustain, Release
20. Gaming Browser-based games are becoming a reality • Unreal Engine (Firefox) • Chrome Racer (Google) • http://g.co/racer • Angry Birds for Chrome
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
22. CHROME RACER
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
24. PORTABILITY Portability is Tough Imagine having to check Facebook on only one personal desktop computer
25. PORTABILITY
26. YOU DON’T NEED EVERYTHING
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
29. WHAT IS MIDI? Musical Instrument Digital Interface The standard means of communicating between instruments or a computer
30. WHAT IS MIDI? • Carries event messages • Notation • Pitch • Velocity
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
32. MIDI IS THE SHEET MUSIC FOR YOUR COMPUTER
35. REACT?! • Synthesizers have A LOT of State • React is GREAT at State
36. <Oscillator />
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
43. METHODS startMidiRequest() frequencyFromNote() noteOn() noteOff() onMidiSuccess() onMidiFail() onMidiStateChange()
45. DEMO Midi
46. VIKTOR SYNTH • nicroto.github.io/viktor/ • Not React, but very cool • based on Moog synthesizer
47. Midi Synth github.com/cwilso/midi-synth Thanks Chris Wilson! The guy who made it all happen
48. THANK YOU @peterpme github.com/ppiekarczyk github.com/ppiekarczyk/react-midi