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

Slide 1

Slide 1 text

MAKIN’ MUSIC WITH REACT Peter Piekarczyk React Rally 2015

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Trunk Club Chicago, IL Men hate to shop but love to look good • React • Babel • Alt/Mcﬂy/Reﬂux • Webpack • 10 SPA’s • Microservices • Promised to stick to React

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

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!

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

What Does It Take TO MAKE MUSIC?

Slide 8

Slide 8 text

Synthesizer Electronic musical instrument that produces a wide variety of sounds

Slide 9

Slide 9 text

Synthesizer

Slide 10

Slide 10 text

OSCILLATOR A device for generating oscillating electric currents

Slide 11

Slide 11 text

SINE WAVE

Slide 12

Slide 12 text

SAWTOOTH WAVE

Slide 13

Slide 13 text

SQUARE WAVE

Slide 14

Slide 14 text

TUNING FORK

Slide 15

Slide 15 text

ENVELOPE

Slide 16

Slide 16 text

DIGITAL AUDIO WORKSTATION

Slide 17

Slide 17 text

A DAW IS a  FRAMEWORK YOU CAN USE TO CREATE MUSIC

Slide 18

Slide 18 text

GLOBAL VARIABLES

Slide 19

Slide 19 text

DEMO Attack, Decay, Sustain, Release

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Gaming DX Browser-based games are utilizing the Web Audio API • Update sound effects on the ﬂy • 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

Slide 22

Slide 22 text

CHROME RACER

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

PORTABILITY

Slide 26

Slide 26 text

YOU DON’T NEED EVERYTHING

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

MIDI IS THE SHEET MUSIC FOR YOUR COMPUTER

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

DEMO Midi

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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