​

// Get WEB_PLAYER_TOKEN -> https://developer.spotify.com/console/get-track

// Get SPOTIFY_AUTH_HEADER -> https://developer.spotify.com/documentation/web-playback-sdk/quick-start

​

let fft;

let spotifyPlayer

let songTitle

let currentSong

let classifier;

let searchQuery

let clearButton;

let titleSpan;

​

let toggleState = 1;

​

const WEB_PLAYER_TOKEN = 'BQAh3VMqhZq8c4qxdttIkmKDf_EB0VIRqnfSaHOV0itQzKJupZo79OTz_yaxOEqb0OV7k4I4OsJViO_jY8W-Sgmg0r0ifBsnDzy6m1_SBREO-1z8BhfdIyUxUO2nd-KNmjPZu2rZbPdVxlE'

​

const SPOTIFY_AUTH_HEADER = 'BQCg01Wyr-NOnMJ_vh4EAzU5nqTh-w4NVYOmoWmi44wLsL1orvsZPnPwqdrFj9ikRsUzlKeDilgH_u0WRZN5cg7hu0NuFI2BmAKC8MbPmbeKuCTu1WZwSP7Rbol0IegY1ARb9FDVN4Bt6yHW6OahrVtf8AVX6jV1aXQ'

​

window.onSpotifyWebPlaybackSDKReady = () => {

  spotifyPlayer = new Spotify.Player({

    name: 'Web Playback SDK Quick Start Player',

    getOAuthToken: cb => {

      cb(WEB_PLAYER_TOKEN);

    }

  });

​

  // Ready

  spotifyPlayer.addListener('ready', ({

    device_id

  }) => {

    console.log('Ready with Device ID', device_id);

  });

​

  // Connect to the spotifyPlayer!

  spotifyPlayer.connect();

};

​

const playOnSpotify = ({

  spotify_uri,

  playerInstance: {

    _options: {

      getOAuthToken,

      id

    }

  }

}) => {

  getOAuthToken(access_token => {

    fetch(`https://api.spotify.com/v1/me/player/play?device_id=${id}`, {

      method: 'PUT',

      body: JSON.stringify({

        uris: [spotify_uri]

      }),

      headers: {

        'Content-Type': 'application/json',

        'Authorization': `Bearer ${access_token}`

      },

    });

  });

};

​

function preload() {

  classifier = ml5.imageClassifier('DoodleNet');

}

​

function setup() {

​

  createCanvas(400, 400);

  background(255);

  classifier.classify(canvas, onClassificationResult);

​

  // Create a clear canvas button

  clearButton = select("#clearBtn");

  clearButton.mousePressed(clearCanvas);

  //toggle to voice drawing mode

  togglButton = select("#togglButton");

  togglButton.mousePressed(toggle);

  titleSpan = select("#title");

  createDiv('<br/>')

  button = createButton('Play Song');

  button.mousePressed(onButtonPress);

  amp = new p5.Amplitude();

}

​

function draw() {

  strokeWeight(16);

  stroke(0);

  if (mouseIsPressed) {

    if (toggleState == 1) {

    line(pmouseX, pmouseY, mouseX, mouseY);

    } else if (toggleState == 2) {

      stroke(random(255),random(255),random(255));

      line(pmouseX, pmouseY, mouseX, mouseY);

    } else {

      stroke(random(255));

      line(pmouseX,pmouseY,mouseX,mouseY);

    }

  }

}

​

function clearCanvas() {

  titleSpan.html("Draw a Sketch, and we'll find a song for you");

  background(255);

}

​

function toggle() {

  background(255);

  if (toggleState == 1) {

  toggleState = 2;

  } else if (toggleState == 2) {

    toggleState = 3;

  } else {

    toggleState = 1;

  }

}

​

// A function to run when we get any errors and the results

function onClassificationResult(error, results) {

  // Display error in the console

  if (error) {

    console.error(error);

    return;

  }

  // The results are in an array ordered by confidence.

  // console.log(results);

  // Show the first label and confidence

  searchQuery = results[0].label

  classifier.classify(canvas, onClassificationResult);

}

​

function onButtonPress() {

  console.log("searching for: " + searchQuery);

  $.ajax({

    url: "https://api.spotify.com/v1/search",

    data: {

      q: searchQuery,

      type: 'track',

      market: 'US',

      limit: 1

    },

    type: "GET",

    beforeSend: function(xhr) {

      xhr.setRequestHeader('Authorization', SPOTIFY_AUTH_HEADER);

    },

    success: function(data) {

      titleSpan.html("We found you a song!! Now listen to " + data.tracks.items[0].name + " by " + data.tracks.items[0].artists[0].name);

      console.log('Found data: ' + data)

      console.log('Found song: ' + data.tracks.items[0].name)

      playOnSpotify({

        playerInstance: spotifyPlayer,

        spotify_uri: data.tracks.items[0].uri,

      });

​

    }

  });

  //background(255);

}