Using the web for music production and live performances – DevFest Berlin 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 – DevFest Berlin 2014 – Analyzing audio editors

0 0

DevFest-Berlin-2014

My Web Audio Editor presentation from DevFest Berlin 2014

On Github janmonschke / DevFest-Berlin-2014

Using the web for music production and live performances

DevFest Berlin 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

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?

Web Audio 101

Everything is created from a context object

var context = new AudioContext();

var oscillator = context.createOscillator();

oscillator.connect(context.destination);

oscillator.start();
Start Stop

Web Audio 101

Timing is everything

var audio = context.createBufferSource();

// load a buffer via xhr

audio.buffer = xhrBuffer;

audio.connect(context.destination);

// play with delay of one second
audio.start(1);
Start (1s delay) Stop

Still confused?

Let's visualize the thing!

Visualize different wave types

More advanced usage of Oscillators

Made by Soledad Penadés

"Building a collaborative music production environment using emerging web standards"

Analyzing audio editors

Garageband

Ableton Live

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...

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 The Glitch Mob

Check out Broken Haze