CODEWITHSUNDEEP
javascriptsignal-processingspotifyp5.js
Revircs
Revircs

Reputation: 1352

Is there a way to analyze the amplitude from a spotify song using p5.js in browser?

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);

}

Upvotes: 1

Views: 1213

Answers (1)

Bee
Bee

Reputation: 1306

Processing raw data samples is not possible using Spotify's Web Playback SDK. As seen in the following quote Spotify uses Encrypted Media Extensions in order to make playback possible within the browser.

The Web Playback SDK is client-side JavaScript library which allows you to create a new player in Spotify Connect and play any audio track from Spotify in the browser via Encrypted Media Extensions.

You could use this Spotify Web API endpoint and try to visualize one of those properties. There are no actual samples (which would be the amplitude you asked for) but maybe something those data sets include will fit your needs.

I found a reddit thread where some people showed off some visualizations mostly using the before mentioned API endpoint.

Another option is to use Spotify's Android or iOS SDK where you have access to raw data samples though I am not sure if it is allowed by Spotify's terms of service to process those samples. But due to you are looking for something client-sided within the browser this won't fit your needs.

Upvotes: 3

Related Questions