CodePen Embed - Functional neumorphic UI - Simple Music Player by Filip Legierski on Dribble

<section class='phone left'>
  <article class='content'>
    <article class='header'>
      <div>
        <button></button>
      </div>
      <h1>PLAYING NOW</h1>
      <div>
        <button></button>
      </div>
    </article>
    <section class='main'>
      <article>
        <div></div>
      </article>
    </section>
    <article class='title'>
    </article>
    <article class='slider'>
      <input type='range' max='' value="0">
      <span class='gradient-time'></span>
      <label id='passed'>00:00</label>
      <label id='left'></label>
    </article>
    <article class='controls'>
      <div>
        <button></button>
      </div>
      <div>
        <button></button>
      </div>
      <div>
        <button></button>
      </div>
    </article>
  </article>
</section>
<section class='phone right'>
  <article class='content'>
    <article class='header'>
      <h1>XXX XXX</h1>
    </article>
    <section class='visual'>
      <div>
        <button></button>
      </div>
      <article>
        <div></div>
      </article>
      <div>
        <button></button>
      </div>
    </section>
    <article class='catalog'>
      <section class='catalog-content'>
      </section>
    </article>
  </article>
</section>

:root {
  --main-dark: #25272a;
  --neu-dark: #090a0c;
  --neu-light: #252a30;
  --back-gradient: linear-gradient(
    180deg,
    rgba(62, 67, 76, 1) 0%,
    rgba(30, 32, 36, 1) 100%
  );
  --front-gradient: linear-gradient(
    180deg,
    rgba(49, 56, 61, 1) 0%,
    rgba(24, 25, 29, 1) 100%
  );
  --header-button-wrapper-gradient: linear-gradient(
    135deg,
    rgba(43, 47, 52, 1) 0%,
    rgba(49, 56, 61, 1) 100%
  );
  --header-button-wrapper-neu-shadows: 0.2vw 0.2vw 0.7vw #16191b,
    -0.2vw -0.2vw 0.7vw #4c575f;
  --header-pressed-wrapper-gradient: linear-gradient(
    135deg,
    rgba(218, 77, 12, 1) 0%,
    rgba(180, 54, 19, 1) 100%
  );
  --header-normal-button-front-gradient: linear-gradient(
    135deg,
    rgba(46, 52, 57, 1) 0%,
    rgba(27, 30, 34, 1) 100%
  );
  --header-pressed-button-front-gradient: linear-gradient(
    135deg,
    rgba(222, 57, 19, 1) 0%,
    rgba(234, 81, 14, 1) 100%
  );
  --header-pressed-button-inset-shadows: inset 0.75vw 0.75vw 0.75vw
    rgba(0, 0, 0, 0.3);
  --main-cover-wrapper-gradient: linear-gradient(
    135deg,
    rgba(31, 36, 40, 1) 0%,
    rgba(22, 23, 25, 1) 100%
  );
  --main-cover-neu-shadows: 0.5vw 0.5vw 0.5vw #1a1e20,
    -0.5vw -0.5vw 0.75vw #363e44;
  --slider-track-gradient: linear-gradient(
    90deg,
    rgba(217, 61, 7, 1) 0%,
    rgba(147, 113, 20, 1) 100%
  );

  --controls-normal-button-wrapper-gradient: linear-gradient(
    135deg,
    rgba(32, 37, 41, 1) 0%,
    rgba(22, 24, 25, 1) 100%
  );
  --controls-button-wrapper-neu-shadows: 0.2vw 0.2vw 0.5vw #16191b,
    -0.2vw -0.2vw 0.5vw #363e44;
  --controls-normal-button-front-gradient: linear-gradient(
    135deg,
    rgba(40, 43, 48, 1) 0%,
    rgba(29, 32, 35, 1) 100%
  );
  --controls-normal-button-inset-shadows: inset 0 0 0.3vw
    rgba(255, 255, 255, 0.1);
  --controls-pressed-button-wrapper-gradient: linear-gradient(
    135deg,
    rgba(214, 78, 12, 1) 0%,
    rgba(166, 47, 19, 1) 100%
  );
  --controls-pressed-button-front-gradient: linear-gradient(
    135deg,
    rgba(183, 29, 16, 1) 0%,
    rgba(236, 86, 12, 1) 100%
  );
  --controls-pressed-button-inset-shadows: inset 0.75vw 0.75vw 0.75vw
    rgba(0, 0, 0, 0.2);
  --main-icon-text-color: rgba(255, 255, 255, 0.5);
}

@mixin flexy {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
@mixin adjust($number, $numtwo) {
  background-size: $number, auto;
  background-repeat: no-repeat;
  background-position: $numtwo 52%, center;
}
@mixin dualGraphicControls($prop1, $prop2, $prop3, $prop4) {
  background: $prop1, $prop2;
  @include adjust($prop3, $prop4);
}

body {
  display: flex;
  height: 100vh;
  background: var(--main-dark);
}

div {
  border-radius: 50%;
}
button {
  width: 100%;
  height: 100%;
  background: none;
  border: none;
  outline: none;
  border-radius: 50%;
  cursor: pointer;
}

@media (min-width: 550px) {
  %small-button {
    display: flex;
    width: 4vw;
    height: 4vw;
    background: var(--header-button-wrapper-gradient);
    box-shadow: var(--header-button-wrapper-neu-shadows);
    &.pressed {
      background: linear-gradient(
        135deg,
        rgba(218, 77, 12, 1) 0%,
        rgba(180, 54, 19, 1) 100%
      );
    }
    button {
      margin: auto;
      transform: scale(0.9);
      &:active {
        box-shadow: var(--header-pressed-button-inset-shadows);
        transition: all 0.1s ease;
      }
    }
  }
  %big-button {
    width: 6vw;
    height: 6vw;
    transform: translateY(-15%);
    background: var(--controls-normal-button-wrapper-gradient);
    box-shadow: var(--controls-button-wrapper-neu-shadows);
    &.pressed {
      background: var(--controls-pressed-button-wrapper-gradient);
    }
    button {
      width: 100%;
      height: 100%;
      transform: scale(0.925);
      background: var(--controls-normal-button-front-gradient);
      box-shadow: var(--controls-normal-button-inset-shadows);
      transition: all 0.1s linear;
      &:active,
      &.pressed {
        box-shadow: var(--controls-pressed-button-inset-shadows);
      }
    }

    &:nth-of-type(1) {
      button {
        @include dualGraphicControls(
          url("https://ik.imagekit.io/g0osqsaljoz/go-to_icons/rewind-smooth-grey_phS9yVLxzQ.svg"),
          var(--controls-normal-button-front-gradient),
          20%,
          45%
        );
        &:active {
          @include dualGraphicControls(
            url("https://ik.imagekit.io/g0osqsaljoz/go-to_icons/rewind-smooth-white_FD1zH584S-B.svg"),
            var(--controls-pressed-button-front-gradient),
            20%,
            45%
          );
        }
      }
    }

    &:nth-of-type(2) {
      width: 7vw;
      height: 7vw;
      button {
        @include dualGraphicControls(
          url("https://ik.imagekit.io/g0osqsaljoz/go-to_icons/play-smooth-grey_6XsAGjQH72Ot.svg"),
          var(--controls-normal-button-front-gradient),
          20%,
          50%
        );

        &:active,
        &.pressed {
          @include dualGraphicControls(
            url("https://ik.imagekit.io/g0osqsaljoz/go-to_icons/pause-smooth-white_ZCASk4Ki1.svg"),
            var(--controls-pressed-button-front-gradient),
            20%,
            50%
          );
        }
      }
    }
    &:nth-of-type(3) {
      button {
        @include dualGraphicControls(
          url("https://ik.imagekit.io/g0osqsaljoz/go-to_icons/forward-smooth-grey_1VHaYN1dVPC.svg"),
          var(--controls-normal-button-front-gradient),
          20%,
          50%
        );

        &:active {
          @include dualGraphicControls(
            url("https://ik.imagekit.io/g0osqsaljoz/go-to_icons/forward-smooth-white_5nb4IDXja.svg"),
            var(--controls-pressed-button-front-gradient),
            20%,
            50%
          );
        }
      }
    }
  }

  %neu-pic {
    margin: auto;
    @include flexy;
    position: relative;
    background: var(--main-cover-wrapper-gradient);
    border-radius: 50%;
    box-shadow: var(--main-cover-neu-shadows);
    div {
      border-radius: 50%;
      background: url(https://ik.imagekit.io/g0osqsaljoz/album-cover_iw7fHN1BC.jpg);
      background-size: cover;
    }
  }
  .phone {
    width: 28vw;
    height: 60vw;
    position: relative;
    margin: auto;
    background: var(--back-gradient);
    border-radius: 3vw;
    box-shadow: 2vw 2vw 8vw black;
    &:before {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 2.5vw;
      transform: scale(0.97, 0.985);
      background: var(--front-gradient);
    }
    .content {
      text-align: center;
      width: 97%;
      height: 98.5%;
      position: relative;
      top: 0.75%;
      left: 1.5%;
      border-radius: 25px;
      display: grid;
      .header {
        grid-area: header;
        @include flexy;
        padding-top: 2vw;
        border-top-left-radius: 19px;
        border-top-right-radius: 19px;
        h1 {
          font-size: 1.15vw;
          width: calc(100% - 17vw);
          color: var(--main-icon-text-color);
        }
      }
    }
    &:nth-of-type(1) {
      transform: translate(30%, -2.5%);
      .content {
        grid-template-columns: repeat(8, 1fr);
        grid-template-rows: repeat(18, 1fr);
        grid-template-areas:
          "header header header header header header header header"
          "header header header header header header header header"
          "main main main main main main main main"
          "main main main main main main main main"
          "main main main main main main main main"
          "main main main main main main main main"
          "main main main main main main main main"
          "main main main main main main main main"
          "main main main main main main main main"
          "main main main main main main main main"
          ". title title title title title title ."
          ". title title title title title title ."
          " slider slider slider slider slider slider slider slider"
          " slider slider slider slider slider slider slider slider"
          "controls controls controls controls controls controls controls controls"
          "controls controls controls controls controls controls controls controls"
          "controls controls controls controls controls controls controls controls"
          "controls controls controls controls controls controls controls controls";

        .header {
          div {
            @extend %small-button;
            &:nth-of-type(1) {
              button {
                @include dualGraphicControls(
                  url("https://ik.imagekit.io/g0osqsaljoz/go-to_icons/arrow-left-grey_Er2XRLPB2.svg"),
                  var(--header-normal-button-front-gradient),
                  30%,
                  50%
                );

                &:active {
                  @include dualGraphicControls(
                    url("https://ik.imagekit.io/g0osqsaljoz/go-to_icons/arrow-left-white_n6gjnpl6PDC.svg"),
                    var(--header-pressed-button-front-gradient),
                    30%,
                    50%
                  );
                }
              }
            }
            &:nth-of-type(2) {
              button {
                @include dualGraphicControls(
                  url("https://ik.imagekit.io/g0osqsaljoz/go-to_icons/menu-grey_Z9pv0VL_wSd.svg"),
                  var(--header-normal-button-front-gradient),
                  30%,
                  50%
                );
                &:active {
                  @include dualGraphicControls(
                    url("https://ik.imagekit.io/g0osqsaljoz/go-to_icons/menu-white_26x_7SXWL0.svg"),
                    var(--header-pressed-button-front-gradient),
                    30%,
                    50%
                  );
                }
              }
            }
          }
        }
        .main {
          grid-area: main;
          display: flex;
          article {
            @extend %neu-pic;
            top: -1%;
            width: 22vw;
            height: 22vw;
            div {
              width: 92.5%;
              height: 92.5%;
            }
          }
        }
        .title {
          grid-area: title;
          position: relative;
          h1 {
            width: 100%;
            position: relative;
            color: rgba(255, 255, 255, 0.75);
            font-size: 1.6vw;
          }
          h3 {
            width: 100%;
            top: 40%;
            left: 0;
            position: absolute;
            color: var(--main-icon-text-color);
            font-size: 1.15vw;
          }
        }
        .slider {
          grid-area: slider;
          position: relative;
          display: flex;
          @include flexy;

          input[type="range"] {
            appearance: none;
            width: 90%;
            height: 8%;
            background: black;
            box-shadow: inset 0 -1px 2px var(--main-icon-text-color);
            border-radius: 1vw;

            &:focus {
              outline: 0;
            }
            &::-moz-focus-outer {
              outline: 0;
              border: 0;
            }
            &::-webkit-slider-thumb {
              appearance: none;
              width: 2.5vw;
              height: 2.5vw;
              border-radius: 50%;
              background: radial-gradient(
                circle,
                orange 0,
                orange 4px,
                #24292d 4px,
                #24292d 8px,
                #212529 8px,
                #212529
              );
              box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15),
                inset 1px 0 1px rgba(255, 255, 255, 0.08),
                inset -1px 0 1px rgba(255, 255, 255, 0.01),
                inset 0 -1px 1px rgba(0, 0, 0, 0.5),
                5px 5px 5px rgba(0, 0, 0, 0.4);
              background-clip: border-box;
              position: relative;
            }
            &::-moz-range-thumb {
              width: 2.5vw;
              height: 2.5vw;
              border-radius: 50%;
              background: radial-gradient(
                circle,
                orange 0,
                orange 4px,
                #24292d 4px,
                #24292d 8px,
                #212529 8px,
                #212529
              );
              box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15),
                inset 1px 0 1px rgba(255, 255, 255, 0.08),
                inset -1px 0 1px rgba(255, 255, 255, 0.01),
                inset 0 -1px 1px rgba(0, 0, 0, 0.5),
                5px 5px 5px rgba(0, 0, 0, 0.4);
              background-clip: border-box;
              position: relative;
              border: none;
            }
          }
          label {
            position: absolute;
            width: 15%;
            height: 20%;
            top: 7%;
            color: var(--main-icon-text-color);
            font-size: 1vw;
          }
          #passed {
            left: 3%;
          }
          #left {
            right: 3%;
          }
        }

        .controls {
          grid-area: controls;
          @include flexy;
          div {
            @extend %big-button;
          }
        }
      }
    }
    &:nth-of-type(2) {
      transform: translate(-30%, 2.5%);
      .content {
        position: relative;
        grid-template-columns: repeat(8, 1fr);
        grid-template-rows: 1fr 1fr 1fr 1fr repeat(6, 1fr);
        grid-template-areas:
          "header header header header header header header header"
          "visual visual visual visual visual visual visual visual"
          "visual visual visual visual visual visual visual visual"
          "visual visual visual visual visual visual visual visual"
          "catalog catalog catalog catalog catalog catalog catalog catalog"
          "catalog catalog catalog catalog catalog catalog catalog catalog"
          "catalog catalog catalog catalog catalog catalog catalog catalog"
          "catalog catalog catalog catalog catalog catalog catalog catalog"
          "catalog catalog catalog catalog catalog catalog catalog catalog"
          "catalog catalog catalog catalog catalog catalog catalog catalog"
          "catalog catalog catalog catalog catalog catalog catalog catalog";
        .header {
          grid-area: header;
        }
        .visual {
          grid-area: visual;
          width: 87.5%;
          margin: auto;
          @include flexy;

          div {
            @extend %small-button;

            &:nth-of-type(1) {
              transform: translate(12%, -5%);
              button {
                @include dualGraphicControls(
                  url("https://generic-icons.s3.eu-west-3.amazonaws.com/heart-grey.svg"),
                  var(--header-normal-button-front-gradient),
                  30%,
                  48%
                );
                &:active {
                  @include dualGraphicControls(
                    url("https://generic-icons.s3.eu-west-3.amazonaws.com/heart-white.svg"),
                    var(--header-pressed-button-front-gradient),
                    30%,
                    48%
                  );
                }
                &.pressed {
                  @include dualGraphicControls(
                    url("https://generic-icons.s3.eu-west-3.amazonaws.com/heart-white.svg"),
                    var(--header-pressed-button-front-gradient),
                    30%,
                    48%
                  );
                }
                &.heart-pressed {
                  @include dualGraphicControls(
                    url("https://generic-icons.s3.eu-west-3.amazonaws.com/heart-red.svg"),
                    var(--header-normal-button-front-gradient),
                    30%,
                    48%
                  );
                }
                &.heart-back {
                  @include dualGraphicControls(
                    url("https://generic-icons.s3.eu-west-3.amazonaws.com/heart-white.svg"),
                    var(--header-pressed-button-front-gradient),
                    30%,
                    48%
                  );
                }
              }
            }
            &:nth-of-type(2) {
              transform: translate(-12%, -5%);
              button {
                @include dualGraphicControls(
                  url("https://generic-icons.s3.eu-west-3.amazonaws.com/more-grey.svg"),
                  var(--header-normal-button-front-gradient),
                  30%,
                  48%
                );
                background-position: 48% 50%, center;

                &:active {
                  @include dualGraphicControls(
                    url("https://generic-icons.s3.eu-west-3.amazonaws.com/more-white.svg"),
                    var(--header-pressed-button-front-gradient),
                    30%,
                    48%
                  );
                  background-position: 48% 50%, center;
                }
              }
            }
          }
          article {
            @extend %neu-pic;
            transform: translateY(-5%);
            width: 10vw;
            height: 10vw;
            div {
              width: 90%;
              height: 90%;
              box-shadow: none;
              transform: none !important;
            }
          }
        }
        .catalog {
          grid-area: catalog;
          position: relative;
          display: flex;
          overflow-y: scroll;
          .catalog-content {
            margin: auto;
            width: 95%;
            height: auto;
            display: flex;
            flex-wrap: wrap;
            height: auto;

            .entry-wrapper {
              width: 100%;
              height: 4.68vw;
              border-radius: 1.25vw;
              display: flex;
              &.pressed {
                background: linear-gradient(
                  180deg,
                  rgba(51, 57, 63, 1) 0%,
                  rgba(18, 20, 23, 1) 100%
                );
              }
              .entry {
                width: 99%;
                height: 95%;
                margin: auto;
                border-radius: 1.25vw;
                display: grid;
                grid-template-columns: repeat(6, 1fr);
                grid-template-rows: repeat(2, 1fr);
                justify-items: start;
                align-items: start;
                gap: 0;
                grid-template-areas:
                  "title title title . . control"
                  "sub sub sub . . control";
                cursor: pointer;
                &.pressed {
                  background: linear-gradient(
                    135deg,
                    rgba(19, 21, 23, 1) 0%,
                    rgba(27, 29, 32, 1) 100%
                  );
                }

                h1 {
                  grid-area: title;
                  font-size: 1.2vw;
                  margin-top: 9%;
                  margin-left: 10%;
                  color: rgba(255, 255, 255, 0.8);
                  pointer-events: none;
                }
                h3 {
                  grid-area: sub;
                  text-align: left;
                  font-size: 1vw;
                  margin-top: -7%;
                  margin-left: 10%;
                  color: var(--main-icon-text-color);
                  pointer-events: none;
                }
                div {
                  grid-area: control;
                  @extend %small-button;
                  transform: translate(20%, 37.5%);
                  width: 2.75vw;
                  height: 2.75vw;
                  button {
                    @include dualGraphicControls(
                      url("https://generic-icons.s3.eu-west-3.amazonaws.com/play-smooth-grey.svg"),
                      var(--header-normal-button-front-gradient),
                      30%,
                      50%
                    );
                    background-position: center, center;
                    &.pressed {
                      @include dualGraphicControls(
                        url("https://generic-icons.s3.eu-west-3.amazonaws.com/pause-smooth-white.svg"),
                        var(--header-pressed-button-front-gradient),
                        30%,
                        50%
                      );
                      background-position: center, center;
                    }
                  }
                }
              }
            }
          }
        }
        &:after {
          content: "";
          width: 99%;
          height: 15%;
          background: linear-gradient(to top, rgba(28, 30, 34, 1), transparent);
          position: absolute;
          left: 0.5%;
          bottom: 0;
          border-bottom-left-radius: 20px;
          border-bottom-right-radius: 20px;
          pointer-events: none;
        }
      }
    }
  }
}

/*

*/

View Compiled

uiController = {
  songsArray: [],
  audioArray: [
    "https://musichugopriet.s3.eu-west-3.amazonaws.com/aint-no-time.mp3",
    "https://musichugopriet.s3.eu-west-3.amazonaws.com/in-her-mouth.mp3",
    "https://musichugopriet.s3.eu-west-3.amazonaws.com/maybach.mp3",
    "https://musichugopriet.s3.eu-west-3.amazonaws.com/xanny-family.mp3",
    "https://musichugopriet.s3.eu-west-3.amazonaws.com/lil-haiti-baby.mp3",
    "https://musichugopriet.s3.eu-west-3.amazonaws.com/photo-copied.mp3",
    "https://musichugopriet.s3.eu-west-3.amazonaws.com/seven-rings.mp3",
    "https://musichugopriet.s3.eu-west-3.amazonaws.com/lie-to-me.mp3",
    "https://musichugopriet.s3.eu-west-3.amazonaws.com/program.mp3",
    "https://musichugopriet.s3.eu-west-3.amazonaws.com/Future+-+Low+Life+(Official+Music+Video)+ft.+The+Weeknd.mp3",
    "https://musichugopriet.s3.eu-west-3.amazonaws.com/fly-shit-only.mp3"
  ],
  titleArray: [
    "EVOL",
    "Ain't No Time",
    "In Her Mouth",
    "Maybach",
    "Xanny Family",
    "Lil Haiti Baby",
    "Photo Copied",
    "Seven Rings",
    "Lie to Me",
    "Program",
    "Low Life",
    "Fly Shit Only"
  ],
  artistArray: ["Future", "Future &#8226 The Weeknd"],
  albumHeading: document.querySelector(
    ".phone.right > .content > .header > h1"
  ),
  titleWrapper: document.querySelector(".title"),
  listWrapper: document.querySelector(".catalog-content"),
  visualButtons: document.querySelectorAll(".visual > div > button "),
  playingTrack: new Audio(),
  toggleState: false,
  songDuration: 0,
  songIndex: 0,
  playing: null,
  entries: "",
  entryArray: "",
  entryButtons: "",
  entryButtonArray: "",
  activeEntry: "",
  headerWrappers: document.querySelectorAll(".header > div "),
  headerButtons: document.querySelectorAll(".header > div > button "),
  controlButtons: document.querySelectorAll(".controls > div > button "),
  controlArray: Array.from(
    document.querySelectorAll(".controls > div > button ")
  ),
  sliderEl: document.querySelector(".slider > input[type=range]"),
  passed: document.querySelector("#passed"),
  remaining: document.querySelector("#left"),
  formatDuration: (s) => {
    let minutes = Math.floor(s / 60);
    let seconds = s % 60;
    let formatted =
      minutes.toString().padStart(2, "0") +
      ":" +
      seconds.toString().padStart(2, "0");
    return formatted;
  },
  createSongObject(x, y, z) {
    newSong = {
      src: uiController.audioArray[x],
      title: uiController.titleArray[y],
      artist: uiController.artistArray[z]
    };
    uiController.songsArray.push(newSong);
  },
  populateAlbum: () => {
    let length = uiController.audioArray.length;
    for (let i = 0; i < length; i++) {
      switch (i) {
        case 0:
          uiController.createSongObject(0, 1, 0);
          break;
        case 1:
          uiController.createSongObject(1, 2, 0);
          break;
        case 2:
          uiController.createSongObject(2, 3, 0);
          break;
        case 3:
          uiController.createSongObject(3, 4, 0);
          break;
        case 4:
          uiController.createSongObject(4, 5, 0);
          break;
        case 5:
          uiController.createSongObject(5, 6, 0);
          break;
        case 6:
          uiController.createSongObject(6, 7, 0);
          break;
        case 7:
          uiController.createSongObject(7, 8, 0);
          break;
        case 8:
          uiController.createSongObject(8, 9, 0);
          break;
        case 9:
          uiController.createSongObject(9, 10, 1);
          break;
        case 10:
          uiController.createSongObject(10, 11, 0);
          break;
      }
    }
  },
  createList: () => {
    for (let i = 0; i < uiController.audioArray.length; i++) {
      let newEntry = `<article class='entry-wrapper'><article class='entry'><h1>${
        uiController.songsArray[i].title
      }</h1><h3>${
        i == uiController.audioArray.length - 2
          ? uiController.songsArray[9].artist
          : uiController.songsArray[0].artist
      }</h3><div><button></button></div></article></article>`;
      uiController.listWrapper.insertAdjacentHTML("beforeend", newEntry);
    }
    uiController.entries = document.querySelectorAll(".entry");
    uiController.entryArray = Array.from(uiController.entries);
    uiController.entryButtons = document.querySelectorAll(
      ".entry > div > button"
    );
    uiController.entryButtonArray = Array.from(uiController.entryButtons);

    uiController.albumHeading.innerHTML = `${
      uiController.titleArray[0]
    } &#8226 ${uiController.artistArray[0].toUpperCase()}`;
  },
  passAudioProps: (obj) => {
    if (uiController.playingTrack.src != obj.src) {
      uiController.entryButtons.forEach((item, i) => {
        item.classList.remove("pressed");
        item.parentElement.classList.remove("pressed");
      });
      uiController.entries.forEach((item, i) => {
        item.classList.remove("pressed");
        item.parentElement.classList.remove("pressed");
      });
      uiController.playingTrack.src = obj.src;
      uiController.songIndex = uiController.audioArray.indexOf(
        uiController.playingTrack.src
      );
      uiController.toggleState = false;
    }

    let title = `<h1>${obj.title}</h1><h3>${obj.artist}</h3>`;
    uiController.titleWrapper.innerHTML = title;
  },
  getAudioData: () => {
    uiController.playingTrack.addEventListener("loadedmetadata", (event) => {
      uiController.songDuration = uiController.playingTrack.duration;
      let time = Math.round(uiController.songDuration);
      uiController.sliderEl.setAttribute("max", time);
      uiController.remaining.innerHTML = uiController.formatDuration(time);
    });
  },
  toRangeVal: (x) => {
    uiController.sliderEl.value = x;
  },
  inputRender: () => {
    let time = uiController.songDuration;
    let roundTime = Math.round(time);
    let cleanLength = uiController.formatDuration(roundTime);
    let now = uiController.playingTrack.currentTime;
    let roundNow = Math.round(now);
    let format = uiController.formatDuration(now);
    uiController.passed.innerHTML = uiController.formatDuration(roundNow);
    let updated = uiController.formatDuration(roundTime - roundNow);
    uiController.remaining.innerHTML = `${updated}`;
    uiController.toRangeVal(roundNow);
  },
  createInterval: () => {
    uiController.entryButtonArray[uiController.songIndex].classList.add(
      "pressed"
    );
    uiController.entryButtonArray[
      uiController.songIndex
    ].parentElement.classList.add("pressed");
    uiController.controlArray[1].parentElement.classList.add("pressed");

    uiController.controlArray[1].classList.add("pressed");

    uiController.playingTrack.play();
    uiController.toggleState = true;
    uiController.playing = setInterval(() => {
      uiController.inputRender();
    }, 1000);
  },
  applySlideValue: (x) => {
    let newCurrent = uiController.formatDuration(x);
    let time = uiController.songDuration;
    let rawLeft = Math.round(time - x);
    let remaining = uiController.formatDuration(rawLeft);
    uiController.playingTrack.currentTime = x;
    if (uiController.controlArray[1].classList.contains("pressed")) {
      uiController.playingTrack.play();
    } else {
      uiController.playingTrack.pause();
    }
    uiController.passed.innerHTML = newCurrent;
    uiController.remaining.innerHTML = remaining;
  },
  setRangeHandler: () => {
    uiController.sliderEl.addEventListener("input", (e) => {
      uiController.applySlideValue(e.target.value);
    });
  },
  selectSong: (i) => {
    uiController.passAudioProps(uiController.songsArray[i]);
    uiController.getAudioData();
    uiController.inputRender();
    uiController.setRangeHandler();
    uiController.entries.forEach((item, i) => {
      item.classList.remove("pressed", "active");
    });
    uiController.entryArray[i].classList.add("pressed", "active");
    uiController.entryArray[i].parentElement.classList.add("pressed");
  },
  playPause: () => {
    uiController.toggleState == false
      ? uiController.createInterval()
      : (uiController.playingTrack.pause(),
        uiController.controlArray[1].classList.remove("pressed"),
        uiController.controlArray[1].parentElement.classList.remove("pressed"),
        uiController.entryButtonArray[uiController.songIndex].classList.remove(
          "pressed"
        ),
        uiController.entryButtonArray[
          uiController.songIndex
        ].parentElement.classList.remove("pressed"),
        clearInterval(uiController.playing),
        (uiController.toggleState = false));
  },
  prevSong: () => {
    uiController.songIndex == 0
      ? uiController.selectSong(uiController.audioArray.length - 1)
      : uiController.selectSong(uiController.songIndex - 1);
    uiController.controlArray[1].classList.remove("pressed");
    uiController.controlArray[1].parentElement.classList.remove("pressed");
  },
  nextSong: () => {
    uiController.songIndex == uiController.audioArray.length - 1
      ? uiController.selectSong(0)
      : uiController.selectSong(uiController.songIndex + 1);
    uiController.controlArray[1].classList.remove("pressed");
    uiController.controlArray[1].parentElement.classList.remove("pressed");
  },
  simplePress: (el) => {
    el.addEventListener("mousedown", () => {
      el.classList.add("pressed");
      el.parentElement.classList.add("pressed");
    });
    el.addEventListener("mouseup", () => {
      el.classList.remove("pressed");
      el.parentElement.classList.remove("pressed");
    });
  },
  activeHeart: (el, str, str2) => {
    el.addEventListener("mousedown", () => {
      if (el.classList.contains(str)) {
        el.classList.add(str2);
      }
    });
    el.addEventListener("click", () => {
      el.classList.toggle(str);
    });
    el.addEventListener("mouseup", () => {
      el.classList.remove(str2);
    });
  },
  activePress: (el) => {
    el.classList.add("active");
    el.classList.toggle("pressed");
    el.parentElement.classList.toggle("pressed");
  },
  mainPressHandler: (nodelist) => {
    nodelist.forEach((item, i) => {
      if (nodelist == uiController.visualButtons) {
        switch (i) {
          case 0:
            uiController.simplePress(item);
            uiController.activeHeart(item, "heart-pressed", "heart-back");
            break;
          case 1:
            uiController.simplePress(item);
            break;
        }
      } else if (nodelist == uiController.entries) {
        item.addEventListener("click", () => {
          if (item.classList.contains("pressed")) {
            item.classList.remove("pressed");
            item.parentElement.classList.remove("pressed");
          } else {
            uiController.selectSong(i);
            uiController.controlArray[1].classList.remove("pressed");
            uiController.controlArray[1].parentElement.classList.remove(
              "pressed"
            );
          }
        });
      } else if (nodelist == uiController.entryButtons) {
        item.addEventListener("click", (e) => {
          e.stopPropagation();

          uiController.selectSong(i);
          setTimeout(() => {
            uiController.playPause();
          }, 0);
        });
      } else if (nodelist == uiController.headerButtons) {
        uiController.simplePress(item);
      } else if (nodelist == uiController.controlButtons) {
        item.addEventListener("click", () => {
          switch (i) {
            case 0:
              uiController.simplePress(item);
              uiController.prevSong();
              break;
            case 1:
              uiController.simplePress(item);
              uiController.playPause();
              break;
            case 2:
              uiController.simplePress(item);
              uiController.nextSong();
              break;
          }
        });
      }
    });
  },
  setControlsHandler: () => {
    uiController.mainPressHandler(uiController.visualButtons);
    uiController.mainPressHandler(uiController.entries);
    uiController.mainPressHandler(uiController.entryButtons);
    uiController.mainPressHandler(uiController.headerButtons);
    uiController.mainPressHandler(uiController.controlButtons);
  },
  init: () => {
    uiController.populateAlbum();
    uiController.createList();
    uiController.selectSong(0);
    uiController.setControlsHandler();
  }
};

uiController.init();

This Pen is owned by Hugo Priet on CodePen.

See more by @smoothdev35 on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.