How It's Made: opening jsconf.eu

Prelude

The year was 2014...

Web Audio for music production and live performances

The Plan

  1. Find band members
  2. Buy MIDI instruments
  3. Write the software

Meet Ill Inspecta

The Plan

  1. Find band members
  2. Buy MIDI instruments
  3. Write the software

The Plan

  1. Find band members
  2. Buy MIDI instruments
  3. Write the software

Writing software is easy, right?

But...should we really build a huge music production app for this??

And...what kind of music do we want to make?

"Hey JSConf, what kind of performance were you thinking of?"
"Be creative! We trust you!" - Malte Ubl
Idea(tion), music making

The software

[144, 66, 127] 

						
  module.exports = {
    // ROW 1
    // Intro
    0: new VideoNode('videos/720p/roberts.m4v'),
    1: new VideoNode('videos/720p/williams3.m4v'),
    2: new VideoNode('videos/720p/reactconf1.m4v'),
    // Chorus
    3: new VideoNode('videos/720p/rockbot3.m4v'),
    4: new VideoNode('videos/720p/schiffer.m4v'),
    5: new VideoNode('videos/720p/emberconf4.m4v'),
    6: new VideoNode('videos/720p/emberconf5.m4v')
  };
						
					

  const v = document.createElement('video');
  const sn = context.createMediaElementSource(v);

How to play a video without delay?

  • videoElement.play() ?
  • preload -> videoElement.play() ?
  • obscure hack -> videoElement.play() ?

  const xhr = new XMLHttpRequest();
  xhr.open('GET', this.location, true);
  xhr.responseType = 'arraybuffer';
  xhr.onload = (event) => {
    const blob = new Blob(
      [event.target.response],
      { type: 'video/mp4' }
    );
    videElement.src = URL.createObjectURL(blob);
  };
  • Do the same for audio elements
  • Have someone who is good at pushing buttons in sync with a beat
  • Taddaaa, you have your JSConf opening performance

There's more, there's always more

  • Videos were pre-rendered
  • Beat not live performed
  • If we only had more time, we would have done it all live

Overwhelming Response

Nested Loops Tee Storify

Caesura (JSConf.eu break)

Step it up a notch!

Build a real piece of software

2015: Push a button -> do the thing

2017: Push a button 10x edition

The stack

The app

  • import / export project setup
  • perfect timing
  • live music
  • live video filters

How is a beat made?

That light show!!

Anouncements!

T-Shirts!

http://bit.ly/peoplegotmadjs1

http://bit.ly/peoplegotmadjs2

Stream & Download the track for free!

soundcloud.com/nested-loops/people-got-mad-javascript

Everything is Open Source

github.com/NestedLoops/jsconf-2017