​

function preload() {

  // Create the MusicPlayer instance and preload the audio files

  musicPlayer = new MusicPlayer();

  musicPlayer.preloadAudio();

}

​

function setup() {

  createCanvas(400, 400);

  musicPlayer.setup();  // Call the setup method of the MusicPlayer instance

}

​

function draw() {

  background(20);

  musicPlayer.draw();  // Call the draw method of the MusicPlayer instance

}

​

// MusicPlayer class to handle the audio, visuals, and interactivity

class MusicPlayer {

  constructor() {

    // Variables for rotation and spinning

    this.angle = 0;

    this.rotationSpeed = 0.03;

    this.isSpinning = false;

    // Color variables

    this.colorPalette = [

      color(242, 39, 76),

      color(133, 48, 130),

      color(84, 73, 55),

      color(5, 17, 242),

      color(245, 139, 87),

      color(0,0,13),

      color(66,106,140),

      color(84, 73, 55)

    ];

    this.rectColor = this.colorPalette[0];

    this.innerCircleColor = this.colorPalette[0];

    // Audio files and controls

    this.audioFiles = [];

    this.trackNames = [

      'Kanye West - All Of The Lights',

      'Kanye West - Cant Tell Me Nothing',

      'Kanye West - Burn',

      'Kanye West - God is',

      "Kanye West - Ultralight Beam",

      'Kanye West - Hurricane',

      'Kanye West - Ghost Town',

      'Kanye West - GOOD(DONT DIE)'

    ];

    this.currentAudioIndex = 0;

    this.playtimeSlider;

    this.volumeSlider;

    this.isSeeking = false;  // Variable to track if the user is seeking

  }

​

  preloadAudio() {

    // Load audio files and store their names

    soundFormats('mp3');

    this.audioFiles[0] = loadSound('Kanye West - All Of The Lights.mp3');

    this.audioFiles[1] = loadSound('Kanye West - Cant Tell Me Nothing.mp3');

    this.audioFiles[2] = loadSound('Kanye West - Burn.mp3');

    this.audioFiles[3] = loadSound('Kanye West - God is.mp3');

    this.audioFiles[4] = loadSound('Kanye West - Ultralight Beam.mp3')

    this.audioFiles[5] = loadSound('Kanye West - Hurricane.mp3')

    this.audioFiles[6] = loadSound('Kanye West - Ghost Town.mp3')

    this.audioFiles[7] = loadSound('Kanye West - GOOD(DONT DIE).mp3')

  }

​

  setup() {

    // Set up the canvas and sliders

    angleMode(RADIANS);

​

    // Create buttons

    let buttonPrevious = createButton('⏮');

    buttonPrevious.position(100, height - 50);

    buttonPrevious.mousePressed(() => this.previousTrack());

​

    let buttonStartStop = createButton('⏯');

    buttonStartStop.position(width / 2, height - 50);

    buttonStartStop.mousePressed(() => this.togglePlay());

​

    let buttonNext = createButton('⏭');

    buttonNext.position(width - 100, height - 50);

    buttonNext.mousePressed(() => this.nextTrack());

​

    // Create volume slider (vertical slider)

    this.volumeSlider = createSlider(0, 1, 0.5, 0.01);

    this.volumeSlider.position(width - 100, 150);

    this.volumeSlider.style('rotate', '270deg');  // Vertical slider

​

    // Create playtime slider (horizontal)

    this.playtimeSlider = createSlider(0, 100, 0);

    this.playtimeSlider.position(50, height - 100);

    this.playtimeSlider.style('width', '300px');

​

    // Detect when user starts seeking (mouse pressed on the slider)

    this.playtimeSlider.input(() => {

      this.isSeeking = true;

    });

​

    // Detect when user finishes seeking (mouse released)

    this.playtimeSlider.mouseReleased(() => {

      if (this.audioFiles[this.currentAudioIndex].isLoaded()) {

        let newTime = map(this.playtimeSlider.value(), 0, 100, 0, this.audioFiles[this.currentAudioIndex].duration());

        this.audioFiles[this.currentAudioIndex].jump(newTime);  // Jump to the new time

      }

      this.isSeeking = false;

    });

  }

​

  draw() {

    // Draw the record and interactive elements

    stroke(255);

    fill(0);

​

    // Draw the large circle in the center

    let centerX = width / 2;

    let centerY = height / 2 - 50; // Move it up to make space for buttons

    circle(centerX, centerY, 180); // Main outer circle

​

    stroke(255);

​

    // Rotate and draw elements inside the circle

    push();

    translate(centerX, centerY); // Move the origin to the center of the circle

    rotate(this.angle); // Always rotate to the current angle, even if spinning is stopped

    this.drawSpinningElements(this.rectColor); // Draw spinning arcs and rectangles

    pop();

​

    // Update angle based on rotation speed if spinning is active

    if (this.isSpinning) {

      this.angle += this.rotationSpeed;

    }

​

    // Inner Circle

    fill(this.innerCircleColor);  // Use the updated color for the inner circle

    circle(centerX, centerY, 80);  // Inner circle

​

    // Small inner circle

    fill(0);

    circle(centerX, centerY, 25);  // Small inner circle

​

    // Update volume based on volume slider value

    if (this.audioFiles[this.currentAudioIndex].isPlaying()) {

      this.audioFiles[this.currentAudioIndex].setVolume(this.volumeSlider.value());

​

      // Update the playtime slider based on the current playtime if not seeking

      if (!this.isSeeking) {

        let currentTime1 = this.audioFiles[this.currentAudioIndex].currentTime();

        let duration1 = this.audioFiles[this.currentAudioIndex].duration();

        this.playtimeSlider.value((currentTime1 / duration1) * 100);

      }

    }

​

    // Display the track name under the record

    fill(255);

    textAlign(CENTER);

    textSize(16);

    text(this.trackNames[this.currentAudioIndex], width / 2, height - 120);  // Track name below the record

  }

​

  drawSpinningElements(rectColor) {

    fill(rectColor);  // Use the updated color for the rectangle

    noStroke();

​

    // Draw the rectangle relative to the translated origin

    rect(-10, -85, 10, 100); // Center the rectangle around the translated origin

​

    noFill();

    stroke(225);

​

    // Arcs drawn using a loop

    let arcSizes = [60, 155, 135, 115];

    let arcAngles = [0.4, PI / 2 - 0.2];

    for (let i = 0; i < arcSizes.length; i++) {

      arc(0, 0, arcSizes[i], arcSizes[i], arcAngles[0], arcAngles[1]);

    }

  }

​

  togglePlay() {

    // Toggle the playback and spinning

    if (this.audioFiles[this.currentAudioIndex].isPlaying()) {

      this.audioFiles[this.currentAudioIndex].pause();  // Pause the audio instead of stopping

      this.isSpinning = false;  // Stop the spinning

    } else {

      this.audioFiles[this.currentAudioIndex].play();  // Resume the audio from where it was paused

      this.isSpinning = true;  // Start the spinning

    }

  }

​

  previousTrack() {

    // Switch to the previous track

    this.audioFiles[this.currentAudioIndex].stop();  // Stop current audio

    this.currentAudioIndex = (this.currentAudioIndex - 1 + this.audioFiles.length) % this.audioFiles.length;

​

    // Automatically play the new track and start spinning

    this.audioFiles[this.currentAudioIndex].play();

    this.isSpinning = true;

​

    this.updateColors();

  }

​

  nextTrack() {

    // Switch to the next track

    this.audioFiles[this.currentAudioIndex].stop();  // Stop current audio

    this.currentAudioIndex = (this.currentAudioIndex + 1) % this.audioFiles.length;

​

    // Automatically play the new track and start spinning

    this.audioFiles[this.currentAudioIndex].play();

    this.isSpinning = true;

​

    this.updateColors();

  }

​

  updateColors() {

    // Update the colors based on the current track

    this.rectColor = this.colorPalette[this.currentAudioIndex % this.colorPalette.length];

    this.innerCircleColor = this.colorPalette[this.currentAudioIndex % this.colorPalette.length];

  }

}

​