Reloaded
JSConf Colombia 2015
Notebook
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);
Web Audio API
<audio id="player" controls preload src="song.mp3"></audio>
Web Audio API
// 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
0 Hz
22000 Hz
var NERDDISCO_audio = new ndAudio({
});
// Update & transform frequency data
NERDDISCO_audio.updateData();
// Get grouped frequency data
NERDDISCO_audio.groupedFrequencyData;
ndAudio
audio_element : document.getElementById('player'),
fftSize : 512
Music
API
MP3 Stream
HTML audio
ndSoundcloud
Notebook
Canvas API
-
Draw
-
Animate
-
Video processing
Canvas API
<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);
Canvas API
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);
ndVisualization
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
ndCircle
ndGiphy
GIF ❤ Archive
API
MP4
HTML video
ndGiphy
ndVisualization
function update() {
}
// Update the audio data
NERDDISCO_audio.updateData();
// Draw every visualization element on canvas
NERDDISCO_visualization.draw();
// setTimeout + requestAnimationFrame
// ...
Notebook
LEDs
-
Adafruit
-
NeoPixel
-
NeoMatrix
nube 1
Adafruit NeoMatrix
var myLEDs = [
];
255, 0, 0, // red
0, 255, 0 // green
#1
#2
#3
255, 255, 0 // yellow
Adafruit Fadecandy
Notebook
USB
Fadecandy Server
Node.js
Fadecandy Client
Socket
Fadecandy
ndSelector
-
Select area on canvas
-
1 ndSelector =
1 NeoMatrix
Pixel to LED mapping
Pixel to LED mapping
ndVisualization
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()
);
Notebook
USB
Fadecandy Server
Node.js
Fadecandy Client
Socket
WebSocket
Web MIDI API
-
Control MIDI devices
-
No plugin required
Web MIDI API
// 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
ndMidi
// Create instance of ndMidi
var NERDDISCO_midi = new ndMidi();
// Get permission for Web MIDI API &
// connect to the attached MIDI devices
NERDDISCO_midi.connect();
KORG padKONTROL
Reloaded
Kazzo
Thank you!
NERD DISCO: Reloaded - JSConf Colombia 2015
By Tim Pietrusky
NERD DISCO: Reloaded - JSConf Colombia 2015
Music visualization in the browser (HTML canvas, Web Audio API, socket.io) and on LEDs (Adafruit NeoPixel, Adafruit Fadecandy).
- 3,385