function musicPlayer() {
  const musicContainer = document.querySelector(`.music-player`);
  const playBtn = document.querySelector(`#play`);
  const prevSongBtn = document.querySelector(`#fast-rewind`);
  const nextSongBtn = document.querySelector(`#fast-forward`);
  const prevAlbumBtn = document.querySelector(`#skip-previous`);
  const nextAlbumBtn = document.querySelector(`#skip-next`);
  const audio = document.querySelector(`#audio`);
  const progress = document.querySelector(`.music-player__progress-indicator`);
  const progressContainer = document.querySelector(
    `.music-player__progress-wrapper`
  );
  const artistName = document.querySelector(`#artist-name`);
  const albumName = document.querySelector(`#album-name`);
  const songName = document.querySelector(`#track-name`);
  const trackNo = document.querySelector(`#track-number`);
  const muteBtn = document.querySelector(`#mute`);

  const music = [
    {
      artist: `Star Forest`,
      album: `Star Forest`,
      year: 2021,
      songs: [
        `Star Forest`,
        `Monster Flower`,
        `Wildewood`,
        `Starchaser Dreamgirl`,
        `Play to Live`,
        `Something Under That Rock`,
        `Cyberschool`,
        `Wishing Song`,
        `Little Fancy Creek`,
        `Zuggabuggaboo`,
        `Everything You Do`,
        `Chantey Cog`
      ],
      songLinks: [
        `https://assets.codepen.io/4999959/Star+Forest.mp3`,
        `https://assets.codepen.io/4999959/Monster+Flower.mp3`,
        `https://assets.codepen.io/4999959/Wildewood.mp3`,
        `https://assets.codepen.io/4999959/Starchaser+Dreamgirl.mp3`,
        `https://assets.codepen.io/4999959/Play+to+Live.mp3`,
        `https://assets.codepen.io/4999959/Something+Under+That+Rock.mp3`,
        `https://assets.codepen.io/4999959/Cyberschool.mp3`,
        `https://assets.codepen.io/4999959/Wishing+Song.mp3`,
        `https://assets.codepen.io/4999959/Little+Fancy+Creek.mp3`,
        `https://assets.codepen.io/4999959/Zuggabuggaboo.mp3`,
        `https://assets.codepen.io/4999959/Everything+You+Do.mp3`,
        `https://assets.codepen.io/4999959/Chantey+Cog.mp3`
      ]
    },

    {
      artist: `Straight Dope Cherry`,
      album: `Traffic, Tile, and I Will See the Sun`,
      year: 2004,
      songs: [
        `Creepin' Around`,
        `Traffic, Tile, and I will See the Sun`,
        `All My Blame`,
        `Carver's Cathedral`,
        `Give Back`,
        `Union Down`,
        `So Long`
      ],
      songLinks: [
        `https://assets.codepen.io/4999959/Creepin+Around.mp3`,
        `https://assets.codepen.io/4999959/Traffic%2C+Tile%2C+And+I+Will+See+The.mp3`,
        `https://assets.codepen.io/4999959/All+My+Blame.mp3`,
        `https://assets.codepen.io/4999959/Carvers+Cathedral.mp3`,
        `https://assets.codepen.io/4999959/Give+Back.mp3`,
        `https://assets.codepen.io/4999959/Union+Down.mp3`,
        `https://assets.codepen.io/4999959/So+Long.mp3`
      ]
    }
  ];

  // Keep track of album and songs
  let albumIndex = 0;
  let songIndex = 0;

  // Initially load song info DOM
  loadSong();

  // FUNCTIONS
  function loadSong() {
    let currentArtist = music[albumIndex].artist;
    let currentAlbum = music[albumIndex].album;
    let currentSong = music[albumIndex].songs[songIndex];
    artistName.innerText = currentArtist;
    albumName.innerText = currentAlbum;
    songName.innerText = currentSong;

    audio.src = music[albumIndex].songLinks[songIndex];
    setTrackNo(songIndex);

    if (artistName.innerText.length > 20) {
      overflowScroll(artistName);
    }

    if (albumName.innerText.length > 20) {
      overflowScroll(albumName);
    }

    if (songName.innerText.length > 20) {
      overflowScroll(songName);
    }
  }

  function setTrackNo() {
    const realNo = (parseInt(songIndex) + 1).toString().padStart(2, `0`);
    trackNo.innerText = realNo;
  }

  function playSong() {
    playBtn.classList.add(`play`);
    playBtn.innerText = `pause_circle`;

    audio.play();
  }

  function autoplaySong() {
    loadSong();

    playSong();
  }

  function pauseSong() {
    playBtn.classList.remove(`play`);
    playBtn.innerText = `play_circle`;

    audio.pause();
  }

  // Changing Songs
  function prevSong() {
    function backSong() {
      songIndex--;

      let totalSongs = music[albumIndex].songs.length;

      if (songIndex < 0) {
        songIndex = totalSongs - 1;
      }
    }

    function sameSong() {
      audio.currentTime = 0;
      updateProgress();
    }

    audio.currentTime > 0 ? sameSong() : backSong();

    audio.paused ? loadSong() : autoplaySong();
  }

  function nextSong() {
    songIndex++;

    let totalSongs = music[albumIndex].songs.length;

    if (songIndex > totalSongs - 1) {
      songIndex = 0;
    }

    audio.paused ? loadSong() : autoplaySong();
  }

  // Changing Albums
  function prevAlbum() {
    function backAlbum() {
      albumIndex--;
      songIndex = 0;

      let totalAlbums = music.length;

      if (albumIndex < 0) {
        albumIndex = totalAlbums - 1;
      }
    }

    function sameAlbum() {
      songIndex = 0;
      audio.currentTime = 0;
      updateProgress();
    }

    songIndex > 0 ? sameAlbum() : backAlbum();

    audio.paused ? loadSong() : autoplaySong();
  }

  function nextAlbum() {
    albumIndex++;
    songIndex = 0;
    audio.currentTime = 0;

    let totalAlbums = music.length;
    console.log(`totalAlbums next`, totalAlbums);

    if (albumIndex > totalAlbums - 1) {
      albumIndex = 0;
    }

    audio.paused ? loadSong() : autoplaySong();
  }

  // Progress Bar
  function updateProgress() {
    const { duration, currentTime } = audio;
    const progressPercent = (currentTime / duration) * 100;
    progress.style.width = `${progressPercent}%`;
  }

  function setProgress(e) {
    const width = this.clientWidth;
    const clickX = e.offsetX;
    const duration = audio.duration;

    audio.currentTime = (clickX / width) * duration;
  }

  // Selecting a song from a playlist
  function changeSong() {
    songIndex = this.dataset.indexNumber;

    loadSong();

    playSong();
  }

  // Volume Controls
  function mute() {
    muteBtn.innerText = `volume_off`;

    audio.muted = true;
  }

  function unmute() {
    muteBtn.innerText = `volume_up`;

    audio.muted = false;
  }

  // Animations for the Info Displays
  function overflowScroll(target) {
    const chLength = target.innerText.length;
    const trackLength = 20;
    const scrollLength = chLength - trackLength;
    const scrollTime = 3;
    const letterSpeed = scrollTime / trackLength;
    const scrollSpeed = letterSpeed * scrollLength;

    var tl = gsap.timeline({ repeat: -1, yoyo: true, repeatDelay: 3 });

    tl.to(target, {
      duration: scrollSpeed,
      x: `-${scrollLength}ch`,
      ease: `steps(${scrollLength})`
    });
  }

  //EVENT LISTENERS

  //Player Listeners
  playBtn.addEventListener(`click`, () => {
    audio.paused ? playSong() : pauseSong();
  });
  prevSongBtn.addEventListener(`click`, prevSong);
  nextSongBtn.addEventListener(`click`, nextSong);
  prevAlbumBtn.addEventListener(`click`, prevAlbum);
  nextAlbumBtn.addEventListener(`click`, nextAlbum);
  audio.addEventListener(`timeupdate`, updateProgress);
  progressContainer.addEventListener(`click`, setProgress);
  audio.addEventListener(`ended`, nextSong);
  muteBtn.addEventListener(`click`, () => {
    audio.muted ? unmute() : mute();
  });

  //Non Player Listeners
}

musicPlayer();