$30 off During Our Annual Pro Sale. View Details »

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

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!

Peter Piekarczyk

August 25, 2015
Tweet

More Decks by Peter Piekarczyk

Other Decks in Technology

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