Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

More Decks by Peter Piekarczyk

Other Decks in Technology


  1. Peter Piekarczyk PIE - CAR - CHICK • @peterpme •

    github.com/ppiekarczyk • JSConf 2015 - Migrating Backbone To React • UI Engineer, Trunk Club
  2. 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
  3. 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!
  4. 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
  5. Gaming Browser-based games are becoming a reality • Unreal Engine

    (Firefox) • Chrome Racer (Google) • http://g.co/racer • Angry Birds for Chrome
  6. 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
  7. 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
  8. 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
  9. WHAT IS MIDI? Musical Instrument Digital Interface The standard means

    of communicating between instruments or a computer
  10. 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
  11. 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