​

// generate access Token with 

​

/*

​

curl -X POST "https://accounts.spotify.com/api/token" \

     -H "Content-Type: application/x-www-form-urlencoded" \

     -d "grant_type=client_credentials&client_id=b2cc0a3604154457ac2d7c216d8e55a1&client_secret=38e579a2942f4930af3c4eed0737696a"

​

*/

​

const accessToken = 'BQCLDUOGHODVINJugfg5ZUJQWuZH8LUHhf6uBajhns2v28nGFYPXkD_l7ApsgGG689vgOvgy3Ms0CKR9sUHdsvOCEdR8F1wfNGKwJOUiDLvzLuNEp_s';

​

let songParams;

let x_length = 500;

let y_length = 500;

const max_size = 500;

​

​

function getTrackParams(trackId){

  const requestOptions = {

    method: 'GET',

    headers: {'Authorization': `Bearer ${accessToken}`},

  };

 fetch(`https://api.spotify.com/v1/audio-analysis/${trackId}`, requestOptions)

  .then(data => {

  return data.json()

  })

  .then((info) => {

   songParams = info;

   redraw();

   console.log(info);

 })

}

​

​

function setup() {

  songParams = getTrackParams(trackId);

  createCanvas(1200, 1000);

  colorMode(HSL, 360, 100, 100);

  noLoop(); // Static drawing, call 'redraw()' in the console to refresh

}

​

function visualizeMusicSegments(bars, beats) {

  let yStep = 50;

  let scaleX = 2;

​

  beats.forEach((beat, index) => {

    let startTime = beat.start;

    let duration = beat.duration;

    // let timbre = beat.timbre;

    // let hue = map(timbre[index], -100, 60, 0, 360);

    // let brightness = map(pitch, 0, 1, 0, 50);

    // brightness = (brightness < 50) ? 0 : brightness;

    fill(100, 100, 50);

    circle(startTime * 100, yStep, duration * 100);

  });

}

​

function draw() {

 background(0);

  noStroke();

  // visualizeMusicSegments(songParams['bars'], songParams['beats']);

}