Spotify x p5js

[alexnortn]

` function preload(){ sound = loadSound('https://p.scdn.co/mp3-preview/9338ba4491e37d0e1de7bee44f19bdbfa07c94dc?cid=null'); }

function setup(){ var cnv = createCanvas(100,100); cnv.mouseClicked(togglePlay); fft = new p5.FFT(); sound.amp(0.2); }

function draw(){ background(0);

var spectrum = fft.analyze(); noStroke(); fill(0,255,0); // spectrum is green for (var i = 0; i< spectrum.length; i++){ var x = map(i, 0, spectrum.length, 0, width); var h = -height + map(spectrum[i], 0, 255, height, 0); rect(x, height, width / spectrum.length, h ) }

var waveform = fft.waveform(); noFill(); beginShape(); stroke(255,0,0); // waveform is red strokeWeight(1); for (var i = 0; i< waveform.length; i++){ var x = map(i, 0, waveform.length, 0, width); var y = map( waveform[i], -1, 1, 0, height); vertex(x,y); } endShape();

text('click to play/pause', 4, 10); }

// fade sound if mouse is over canvas function togglePlay() { if (sound.isPlaying()) { sound.pause(); } else { sound.loop(); } } `

[alexnortn]

The URL returned by the Spotify API is interpretable by p5 as an

[alexnortn]

Set up your Spotify development account!!! Get this thing running on github pages!

[alexnortn]

Learn from your webVR experience ok? Boilerplate

[alexnortn]

Web Audio MDN https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API

Visualize Audio with D3 https://www.bignerdranch.com/blog/music-visualization-with-d3-js/

Simple Spotify Music App http://jsfiddle.net/0u0v7e1b/1170/

Spotify API https://developer.spotify.com/web-api/code-examples/

[alexnortn]

https://www.google.com/search?q=joy+division&espv=2&biw=1745&bih=1024&source=lnms&tbm=isch&sa=X&ved=0ahUKEwiTqd6DxYTRAhUB6SYKHQXdCMIQ_AUIBygC&dpr=2.2#imgrc=CEeDVGukRQaksM%3A