I am attempting to make a Spotify visualizer as a personal project, but can't seem to find a way to analyze the sound before it is played through the browser. I have the Spotify player playing music through the browser, and the visualizer is working with mp3 files stored on my machine. I just don't have the slightest clue on how to connect the two. Additionally, I looked through the Spotify API and couldn't seem to find anything there either.
If there is no way to analyze a Dpotify track directly, is there any way to capture the sound played through the browser first, then play through the p5.js loadSound() function?
Here are the code snippets for reference:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.sound.js"></script>
</head>
<body>
<script src="https://sdk.scdn.co/spotify-player.js"></script>
<script>
window.onSpotifyWebPlaybackSDKReady = () => {
const token =
'redacted';
const player = new Spotify.Player({
name: 'Web Playback SDK Quick Start Player',
getOAuthToken: cb => {
cb(token);
}
});
// Error handling
player.addListener('initialization_error', ({
message
}) => {
console.error(message);
});
player.addListener('authentication_error', ({
message
}) => {
console.error(message);
});
player.addListener('account_error', ({
message
}) => {
console.error(message);
});
player.addListener('playback_error', ({
message
}) => {
console.error(message);
});
// Playback status updates
player.addListener('player_state_changed', state => {
console.log(state);
});
// Ready
player.addListener('ready', ({
device_id
}) => {
console.log('Ready with Device ID', device_id);
});
// Not Ready
player.addListener('not_ready', ({
device_id
}) => {
console.log('Device ID has gone offline', device_id);
});
// Connect to the player!
player.connect();
};
</script>
<script src="visualizer.js"></script>
var spotifyToken = ""
//["streaming", "user-read-birthdate", "user-read-email", "user-read-private"]
var song;
var amp;
var button;
var volHistory = [];
function toggleSong(){
if (song.isPlaying()){
song.pause();
} else {
song.play();
}
}
function preload(){
soundFormats('mp3');
song = loadSound('backgroundsong.mp3')
}
function setup(){
var canvas = createCanvas(window.innerWidth/2, 100);
//canvas.parent('div id')
canvas.position(0, (windowHeight - height) / 2)
//var canvasLeft = createCanvas(window.innerWidth/2, 100);
//canvasLeft.position(windowWidth/2, (windowHeight - height) / 2)
//createCanvas(window.innerWidth, window.innerHeight);
masterVolume(0.002,0,0);
button = createButton('toggle');
button.mousePressed(toggleSong);
song.loop();
amp = new p5.Amplitude();
}
function draw(){
background(0);
var volume = amp.getLevel();
volHistory.push(volume * 400);
beginShape();
stroke(0, 255, 0);
strokeWeight(3);
strokeCap(ROUND);
strokeJoin(ROUND);
noFill();
for (var i = 0; i < volHistory.length; i++) {
var y = map(volHistory[i], 0, 1, height, 0);
vertex(i*1.5, y);
if (i*1.5 > width) {
volHistory.splice(0, 1);
}
}
endShape();
//ellipse(400, 400, volume * 800, volume * 800);
}
