​

// 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 = 'BQAoTIB-pSEXvO3Z7OSp8c-H7GHm6mEFMKXTGrSV36vVV4fCYbACT0JeNFZf446zlqWeric6G1pzwBMA0g8hopIrEIWgJg5JGa94ZoWuOk333g6jlzU';

​

let songParams, data, segments, sections, bars;

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 => data.json())

  .then((data) => {

   songParams = data;

   console.log(data);

   redraw();

 })

}

​

​

function setup() {

  getTrackParams(trackId); 

​

  createCanvas(1200, 1000);

  background(0);

  colorMode(HSL, 360, 100, 100);

  // blendMode(LIGHTEST);

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

  // redraw();

}

​

​

function visualizeMusicSegments(segments, xposition, yposition) {

  let yStep = 20;

  let scaleX = 2;

let count = 1

let maxLoudness = max(segments.map(s => abs(s.loudness_max)));

  console.log(maxLoudness);

  segments.forEach(segment => {

    let startTime = segment.start;

    let duration = segment.duration;

    let timbre = segment.timbre;

    let loudness = map(segment.loudness_max,-50, 50, 30, 100);

​

    segment.pitches.forEach((pitch, index) => {

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

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

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

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

      // console.log(brightness);

      if (brightness == 50) {

        count += 1;

      }

      fill(hue, 100, brightness);

      // 

      circle(startTime * scaleX+ 10, index * yStep + 10, loudness);

      // rect(startTime * scaleX, index * yStep, duration * scaleX, yStep);

    });

    // console.log(count)

  });

}

​

​

function draw() {

  bars = songParams['bars'];

  sections = songParams['sections'];

  segments = songParams['segments'];

  track = songParams['track'];

​

   background(255);

  noStroke()

  // segments = songParams['segments'];

  visualizeMusicSegments(segments, 50, 50);

​

​

}

​

​