Using the web for music production and live performances – JSConf.eu 2014 – Analyzing audio editors

View Github Repository Open presentation in a new window

janmonschke

See all presentation from janmonschke

Using the web for music production and live performances – JSConf.eu 2014 – Analyzing audio editors

0 2

JSConf2014

On Github janmonschke / JSConf2014

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

motivation: learning new things (audio essentials), experiment

Well...

Audio on the Web

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

first three points mainly for playing and varying in features

bgsound is kind of the blink aka marquee element of the web ;)

Audio Data API gave raw audio access and some ways tom manipulate audio, but API was nut sufficient

Newest addition to the family: web audio API

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)

create: literally! create sounds from waves

manipulate: a rich api to create custom filters easily

precision: timing is everything when dealing with more than one sound

Who feels comfortable with his knowledge about the physical basics of audio?

"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

Demo: show track layout, each track has different type, name the three types

Control buttons on the top, timeline, skip things

control elements for each track

canvas previews in the track elements

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