Sam Wray & Tim Pietrusky
{Live:JS}
Part 1: Sam
Game Boy music
Web Audio API
Analysing Sound
let source =
context.createMediaElementSource(audio);
let context = new AudioContext();
let audio = new Audio();
Source
Destination
source.connect(
context.destination
);
Source
Destination
Analyser
let analyser =
context.createAnalyser();
source.connect(analyser);
Meyda
RMS
Energy
ZCR
Amplitude Spectrum
Power Spectrum
Spectral Centroid
Spectral Flatness
Spectral Slope
Spectral Rolloff
Spectral Spread
Loudness
Perseptual Spread
Perceptual Sharpness
Mel-Freq Cepstral Coeffic.
Spectral Skewness
Spectral Kurtosis
Meyda
ZCR
RMS
![](https://s3.amazonaws.com/media-p.slid.es/uploads/612129/images/3294585/meyda-first-test.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/11681/images/3273069/modv_logo.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/612129/images/3294590/modV-first-video.gif)
Canvas 2D
![](https://s3.amazonaws.com/media-p.slid.es/uploads/612129/images/3274723/1.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/612129/images/3274726/2.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/612129/images/3274728/3.gif)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/612129/images/3274729/4.gif)
Three.JS
WebGL
WebGL
OpenGL Shader Language (GLSL)
Modules
Part 2: Tim
![](https://s3.amazonaws.com/media-p.slid.es/uploads/11681/images/2370322/Logo-NerdDisko-1024-dark.png)
MIDI
Musical Instrument Digital Interface
Web MIDI API
![](https://s3.amazonaws.com/media-p.slid.es/uploads/11681/images/3301812/novation_launchcontrol.jpg)
navigator.requestMIDIAccess();
MIDIMessageEvent
LED Curtain
8 x LED Strips
![](https://s3.amazonaws.com/media-p.slid.es/uploads/11681/images/1342831/fadecandy_by_Adafruit_small.jpg)
FadeCandy
![](https://s3.amazonaws.com/media-p.slid.es/uploads/11681/images/3269292/adafruit_raspberrypi_3_smaller.jpg)
Raspberry PI 3
![](https://s3.amazonaws.com/media-p.slid.es/uploads/11681/images/2870906/laptop.jpg)
WIFI
![](https://s3.amazonaws.com/media-p.slid.es/uploads/11681/images/3291323/neopixel_strip_part.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/11681/images/3291323/neopixel_strip_part.jpg)
[
255, 0, 0 /* 1. LED */
];
[
255, 0, 0, /* 1. LED */
0, 255, 0 /* 2. LED */
];
FadeCandy to LED
1.
2.
DMX512
DMX Universe
Sender
Device 2
Device 1
Device n
![](https://s3.amazonaws.com/media-p.slid.es/uploads/11681/images/3269660/cameo_par_flat.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/11681/images/3269660/cameo_par_flat.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/11681/images/3269704/enttec_usb_dmx_pro_mk2.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/11681/images/3270569/stairville_af_150.jpg)
DMX USB Interface
2 x PAR Lights
Fog Machine
![](https://s3.amazonaws.com/media-p.slid.es/uploads/11681/images/2870906/laptop.jpg)
USB
![](https://s3.amazonaws.com/media-p.slid.es/uploads/11681/images/3269660/cameo_par_flat.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/11681/images/3269660/cameo_par_flat.jpg)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/11681/images/3270569/stairville_af_150.jpg)
{ /* Address: 1 */
0: 255, 1: 0, 2: 0
};
{ /* Address: 1 */
0: 255, 1: 0, 2: 0,
/* Address: 4 */
3: 0, 4: 255, 5: 0
};
{ /* Address: 1 */
0: 255, 1: 0, 2: 0,
/* Address: 4 */
3: 0, 4: 255, 5: 0,
/* Address: 16 */
15: 255
};
Part 3: 🤓 + 🤓
![](https://s3.amazonaws.com/media-p.slid.es/uploads/11681/images/3295865/prof-barak.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/11681/images/3295866/prof-dave.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/11681/images/3295867/prof-martin.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/11681/images/3295868/prof-matt.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/11681/images/3295869/prof-ruth.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/11681/images/3295870/prof-sam.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/11681/images/3295871/prof-tim.png)
{Live:JS}
Hack Weekend
 + Web MIDI
 + Grab Canvas Data
 + Control LED / DMX
{Live:JS}
livejs.network
The End.
 @livejs_network
LiveJS : dotJS 2016
By Tim Pietrusky
LiveJS : dotJS 2016
- 2,744