Using the web for music production and live performances


JSConf.eu 2014

Me: Jan Monschke

@thedeftone, janmonschke.com

Frontend Developer from Berlin

Not really a musical background but

passionate about music

Well...

Audio on the Web

  • bgsound
  • object, embed
  • < audio />
  • Audio Data API
  • Web Audio API
  • Frames
  • Table Layout
  • Float Layout
  • Flexbox v1
  • Flexbox

Web Audio API

  • low-level access to all things audio
  • create sounds
  • manipulate sounds (filters)
  • timing sounds precisely
  • tons of other cool stuff (spatial audio, audio analysis)
"Building a collaborative music production environment using emerging web standards"

Analyzing audio editors

  • years of development and best practices
  • common interface patterns
  • minimum feature sets

Garageband

Ableton Live

Reason

Analyzing audio editors

  • timeline (left to right)
  • previews, depending on content
  • tracks as rows
  • recording, importing, drums, synth

Web Audio Editor

Wait, there's one more thing:

Collaboration

  • Remote band brainstorming
  • Auto-save and auto-backup
  • sadly not offline...(sorry, Team Hoodie)

Demo Time

Live Music Performance

  • Use instruments and use API as amp and for effects
  • Live-code the music (see livec0d3r)
  • Use MIDI devices to control your application (e.g. Ableton Live)

The Glitch Mob

Broken Haze

Web MIDI

  • MIDI != MIDI background songs
  • Protocol for digital 'instruments'
  • Early stage API

<3 Japan for MIDIAppy

JS Live performances

Demo Time

Next year we'll have theglitchmob.js ;)

THX so much for your attention!

Check out The Semicolons

Check out my brothers band

Check out The Glitch Mob

Check out Broken Haze