Web Audio API

• Play a song

• Manipulate 

• Analyse

// Create new AudioContext
var audio_context = new AudioContext();

// Create AnalyserNode
var audio_analyser = audio_context.createAnalyser();

// Set "Fast Fourier transform"-size 
audio_analyser.fftSize = 512;

// Save frequency data from the audio_analyser
var audio_frequencyData = 
    new Uint8Array(audio_analyser.frequencyBinCount);

<audio id="player" controls preload src="song.mp3"></audio>

// Get HTML audio element
var audio_element = document.getElementById('player');

// Set the audio_element as audio input
var audio_source = 
    audio_context.createMediaElementSource(audio_element);

// Connect the audio_source with the audio_analyser
audio_source.connect(audio_analyser);

// Connect the audio_analyser to the output (speaker etc.)
audio_analyser.connect(audio_context.destination);

// Get byte frequency data from the audio_analyser
audio_analyser.getByteFrequencyData(audio_frequencyData);

sub lows

lows

low mids

mids

high mids

highs

super highs

var NERDDISCO_audio = new ndAudio({



});

// Update & transform frequency data
NERDDISCO_audio.updateData();

// Get grouped frequency data
NERDDISCO_audio.groupedFrequencyData;

  audio_element : document.getElementById('player'),

  fftSize : 512

Music 

API

MP3 Stream

HTML audio

Canvas API

• Draw

• Animate

• Video processing

<canvas id="NERDDISCO" width="500" height="500"></canvas>

// Get the HTML canvas element
var canvas = document.getElementById('NERDDISCO');

// Get the canvas context
var ctx = canvas.getContext('2d');

// Set fill color
ctx.fillStyle = "rgb(200, 0, 0)";

// Draw a rectangle on the canvas
ctx.fillRect(10, 10, 55, 50);

function update() {












}

// Start animation loop
update();

  // Clear whole canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // Draw a rectangle
  // ...

  // Run at ~ 30 fps
  setTimeout(function() {



  }, 1000 / 30);

    // Call update (recursion)
    window.requestAnimationFrame(update);

var NERDDISCO_visualization = new ndVisualization({


});

// Add visualization element to queue
NERDDISCO_visualization.addElement(









);

  ndAudio : NERDDISCO_audio

  new ndCircle({
    x : 0,             // x position
    y : 0,             // y position
    r : 120,           // radius



  })

    range : 'lowmid',  // frequency range

    trigger: 254       // min. frequency 

GIF ❤ Archive

API

MP4

HTML video

function update() {








}

  // Update the audio data
  NERDDISCO_audio.updateData();

  // Draw every visualization element on canvas
  NERDDISCO_visualization.draw();

  // setTimeout + requestAnimationFrame
  // ...

LEDs

• Adafruit 

• NeoPixel

• NeoMatrix

var myLEDs = [ 

  



];

  255, 0,   0, // red

  0,   255, 0  // green

#1

#2

#3

  255, 255, 0  // yellow

USB

Fadecandy Server

Node.js

Fadecandy Client

Socket

Fadecandy

• Select area on canvas

• 1 ndSelector =
  1 NeoMatrix

function update() {













}

  // Update the audio data
  NERDDISCO_audio.updateData();

  // Draw every visualization element on canvas
  NERDDISCO_visualization.draw();

  // setTimeout + requestAnimationFrame
  // ...

  // Calculate & send pixel data to the node.js server
  NERDDISCO_connector.sendLEDs(
    NERDDISCO_visualization.getLEDs()
  );

Web MIDI API

• Control MIDI devices

• No plugin required

// Get permission from user
navigator.permissions.query({ name: 'midi', sysex: true });

// Permission granted: Request access to the MIDI devices
navigator.requestMIDIAccess({ sysex: true }).then(










);

  // Got access
  function(access) {



  }, 

  // Handle failure
  function(failure) {}

    // Iterate over all input ports

    // Listen to MIDIMessage

// Create instance of ndMidi
var NERDDISCO_midi = new ndMidi();

// Get permission for Web MIDI API & 
// connect to the attached MIDI devices
NERDDISCO_midi.connect();

Thank you!

@NERDDISCO by @TimPietrusky