Electronic

Music

Web ftw!

+

Server

+

+

LEDs

Node.js

Tessel 1

Adafruit NeoPixel

WebSocket

USB

Web Audio API

Wires

The Next Generation

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 frequency data
NERDDISCO_audio.frequencyData;

// Get grouped frequency data
NERDDISCO_audio.groupedFrequencyData;

  audio_element : document.querySelector('.player'),

  fftSize : 512

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 

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

• Select area on canvas

• 1 ndSelector =
  1 NeoMatrix

// Get the pixel data for one NeoPixel
var pixel_data = ctx.getImageData(x, y, width, height)

[ 255, 0, 128, 1,
  55, 22, 73,  1,
  20, 34, 0,   1 ]

// Create array for the result
var result = [];

// Sum red / green / blue for every pixel
for (var i = 0; i < pixel_data.length; i++) {
  result[0] += pixel_data[i];     // red
  result[1] += pixel_data[i + 1]; // green
  result[2] += pixel_data[i + 2]; // blue

  i += 2; // Jump to next pixel
}

// Amount of pixel for one NeoPixel
var pixel_amount = (pixel_data.length + 1) / 4;

// Calculate average color for one NeoPixel
result[0] = Math.floor(result[0] / pixel_amount);
result[1] = Math.floor(result[1] / pixel_amount);
result[2] = Math.floor(result[2] / pixel_amount);

// Transform pixel data to LED colors
NERDDISCO_visualization.getLEDs()

WebSocket

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 access.inputs.values()

    // Listen to onmidimessage event

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

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

github.com/NERDDISCO

timpietrusky.com

Thank you!