Chromatica Player

HTML

              
                <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://use.typekit.net/hoy3lrg.js"></script>
  <script>
    try {
      Typekit.load({
        async: true
      });
    } catch (e) {}
  </script>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://use.fontawesome.com/15af25ac7b.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jcarousel/0.3.1/jquery.jcarousel.min.js"></script>

  <title>CHROMATICA</title>
</head>

<body>
  <a href="https://chromaticaplayer.netlify.app/">

    <div id="background-wrap">
      <div class="bubble x1"></div>
      <div class="bubble x2"></div>
      <div class="bubble x3"></div>
      <div class="bubble x4"></div>
      <div class="bubble x5"></div>
      <div class="bubble x6"></div>
      <div class="bubble x7"></div>
      <div class="bubble x8"></div>
      <div class="bubble x9"></div>
      <div class="bubble x10"></div>
      <div class="bubble x1"></div>
    </div>

    <div id="wrapper">
      <div id="iphone">
        <div id="camera">
          <span></span>
          <span></span>
        </div>
        <div id="screen">
          <div id="content-wrap">
            <div id="background"></div>
            <div id="content">
              <div class="jcarousel">
                <ul id="songs">
                  <li class="song" data-audio="https://raw.githubusercontent.com/pigs-pigs/chromatica-player/master/mp3/1-Chr1.mp3?token=APG3QMTP3UBXM2BCNHQSMWK7ER44O" data-color="#eb6e60">
                    <img src="https://celebmix.com/wp-content/uploads/2020/04/EUwFIvEX0AkfTpV.jpeg" alt="">
                    <p class="song-title">Chromatica I</p>
                    <p class="song-artist">Lady Gaga</p>
                  </li>
                </ul>
              </div>
              <audio crossorigin>
                <source src="" type="audio/mpeg">
              </audio>
              <div id="controls">
                <span id="previous-btn"><i class="fa fa-step-backward fa-fw" aria-hidden="true"></i></span>
                <span id="play-btn"><i class="fa fa-play fa-fw" aria-hidden="true"></i></span>
                <span id="next-btn"><i class="fa fa-step-forward fa-fw" aria-hidden="true"></i></span>
              </div>
              <div id="timeline">
                <span id="current-time">--:--</span>
                <span id="total-time">--:--</span>
                <div class="slider" data-direction="horizontal">
                  <div class="progress">
                    <div class="pin" id="progress-pin" data-method="rewind"></div>
                  </div>
                </div>
              </div>
              <div id="sub-controls">
                <i class="fa fa-random" aria-hidden="true"></i>
                <i class="fa fa-refresh" aria-hidden="true"></i>
                <i class="fa fa-bluetooth-b" id="bluetooth-btn" aria-hidden="true"></i>
                <i class="fa fa-heart-o" id="heart-icon" aria-hidden="true"></i>
              </div>
            </div>

            <div id="song-info">
              <img src="https://celebmix.com/wp-content/uploads/2020/04/EUwFIvEX0AkfTpV.jpeg" alt="">
              <div class="artist-wrap">
                <p>
                  <span class="title">Alice</span>
                  <span class="artist">Lady Gaga</span>
                </p>
              </div>
            </div>
          </div>
          <div id="home-screen">
            <div class="home-content">
              <h2>Chromatica</h2>
              <p id="made-by">Template By <a href="https://codepen.io/emilcarlsson">@emilcarlsson</a></p>
              <div class="app-icon">
                <img class="svg" src="https://m.media-amazon.com/images/I/61lvnbg0gxL._SS500_.jpg" alt="">
              </div>

              <p id="icons-by">Icons by <a href="http://fontawesome.io/" title="Font Awesome">Font Awesome</a>, <a href="https://www.flaticon.com/authors/those-icons" title="Those Icons">Those Icons</a>,<br /><a href="https://www.flaticon.com/authors/epiccoders" title="EpicCoders">EpicCoders</a> & <a href="https://www.flaticon.com/authors/smashicons" title="Smashicons">Smashicons</a></p>
            </div>
          </div>
        </div>
        <div id="home-btn"></div>
      </div>
    </div>
  </a>
</body>

CSS

              
                *,
*:before,
*:after {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

@import url("https://fonts.googleapis.com/css2?family=Lato&display=swap");

body {
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
  background: #ef8b80;
  font-family: "proxima-nova", "Lato", "Source Sans Pro", "Raleway", Arial,
    sans-serif;

  -webkit-transition: background 0.75s ease;
  -moz-transition: background 0.75s ease;
  -ms-transition: background 0.75s ease;
  -o-transition: background 0.75s ease;
  transition: background 0.75s ease;
}

#background-wrap {
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: -1;
}

@keyframes animateBubble {
  0% {
    margin-top: 1000px;
  }
  100% {
    margin-top: -100%;
  }
}

/* ANIMATIONS */

.x1 {
  animation: animateBubble 25s linear infinite,
    sideWays 2s ease-in-out infinite alternate;

  left: -5%;
  top: 5%;

  transform: scale(0.6);
}

.x2 {
  animation: animateBubble 20s linear infinite,
    sideWays 4s ease-in-out infinite alternate;

  left: 5%;
  top: 80%;

  transform: scale(0.4);
}

.x3 {
  animation: animateBubble 28s linear infinite,
    sideWays 2s ease-in-out infinite alternate;

  left: 10%;
  top: 40%;

  transform: scale(0.7);
}

.x4 {
  animation: animateBubble 22s linear infinite,
    sideWays 3s ease-in-out infinite alternate;

  left: 20%;
  top: 0;

  transform: scale(0.3);
}

.x5 {
  animation: animateBubble 29s linear infinite,
    sideWays 4s ease-in-out infinite alternate;

  left: 30%;
  top: 50%;

  transform: scale(0.5);
}

.x6 {
  animation: animateBubble 21s linear infinite,
    sideWays 2s ease-in-out infinite alternate;

  left: 50%;
  top: 0;

  transform: scale(0.8);
}

.x7 {
  animation: animateBubble 20s linear infinite,
    sideWays 2s ease-in-out infinite alternate;

  left: 65%;
  top: 70%;

  transform: scale(0.4);
}

.x8 {
  animation: animateBubble 22s linear infinite,
    sideWays 3s ease-in-out infinite alternate;

  left: 80%;
  top: 10%;

  transform: scale(0.3);
}

.x9 {
  animation: animateBubble 29s linear infinite,
    sideWays 4s ease-in-out infinite alternate;

  left: 90%;
  top: 50%;

  transform: scale(0.6);
}

.x10 {
  animation: animateBubble 26s linear infinite,
    sideWays 2s ease-in-out infinite alternate;

  left: 80%;
  top: 80%;

  transform: scale(0.3);
}
.x11 {
  animation: animateBubble 10s linear infinite,
    sideWays 4s ease-in-out infinite alternate;

  left: 10%;
  top: 80%;

  transform: scale(0.3);
}

/* OBJECTS */

.bubble {
  border-radius: 50%;

  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2),
    inset 0px 10px 30px 5px rgba(255, 255, 255, 1);

  height: 200px;
  position: absolute;
  width: 200px;
}

.bubble:after {

  background: radial-gradient(
    ellipse at center,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0) 70%
  ); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

  border-radius: 50%;

  box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3);

  content: "";
  height: 180px;
  left: 10px;
  position: absolute;
  width: 180px;
}

/* Float: left/right */
.pull-left {
  float: left;
}

.pull-right {
  float: right;
}

/* Flex center */
.flex-center,
div#home-screen div.home-content div.app-icon,
div#home-screen {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  justify-content: center;
}

/* Flex */
.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

/* Outline none */
*,
*:focus,
*:active {
  outline: none;
}

.clearfix:after,
div#song-options div#song-info:after,
div#header:after {
  content: "";
  display: table;
  clear: both;
}

.svg path {
  fill: white;
}

h3 {
  cursor: default;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 1px;
  margin: 0 0 15px;
  text-transform: uppercase;
}

p {
  cursor: default;
}
p.info-text {
  color: #b3b3b3;
  font-size: 10px;
}

.fa.add {
  position: relative;
}
.fa.add::after {
  background: #444444;
  border-radius: 100px;
  content: "";
  font-size: 10px;
  left: 2px;
  position: absolute;
  top: -1px;
  width: 10px;
  height: 11px;
}

div#wrapper {
  z-index: 999;
}

div#iphone {
  background: white;
  border: 4px solid #ececec;
  border-radius: 30px;
  max-width: 257px;
  padding: 10px;
  -webkit-box-shadow: 0px 10px 25px rgba(51, 51, 51, 0.3);
  -moz-box-shadow: 0px 10px 25px rgba(51, 51, 51, 0.3);
  box-shadow: 0px 10px 25px rgba(51, 51, 51, 0.3);
}
div#iphone div#camera {
  cursor: default;
  margin: 5px auto 20px;
  width: 100%;
  text-align: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
div#iphone div#camera span {
  background: #ececec;
  display: inline-block;
}
div#iphone div#camera span:nth-child(1) {
  border-radius: 7px;
  height: 7px;
  margin-right: 7px;
  position: relative;
  top: 1px;
  width: 7px;
}
div#iphone div#camera span:nth-child(2) {
  border-radius: 5px;
  height: 5px;
  width: 35px;
}
div#iphone div#screen {
  background: #666666;
  border: 2px solid #f2f2f2;
  border-radius: 4px;
  height: 400px;
  overflow: hidden;
  position: relative;
  width: 225px;
  z-index: 1;
}
div#iphone div#screen::after {
  background: gray;
  content: "";
  display: block;
  height: 130%;
  left: 60%;
  opacity: 0.15;
  position: absolute;
  pointer-events: none;
  top: -25%;
  width: 100%;
  -moz-transform: rotate(-20deg);
  -o-transform: rotate(-20deg);
  -ms-transform: rotate(-20deg);
  -webkit-transform: rotate(-20deg);
  transform: rotate(-20deg);
}
div#iphone div#home-btn {
  border: 3px solid #ececec;
  border-radius: 35px;
  cursor: pointer;
  height: 35px;
  margin: 10px auto 5px;
  width: 35px;
}

div#iphone.dark-mode {
  background: #262626;
  border: 4px solid #a6a6a6;
}

div#iphone div#camera span.dark-mode {
  background: #a6a6a6;
}

div#iphone div#screen.dark-mode {
  border: 2px solid #a6a6a6;
}

div#iphone.dark-mode {
  background: #262626;
  border: 4px solid #a6a6a6;
}
div#iphone div#camera span.dark-mode {
  background: #a6a6a6;
}
div#iphone div#screen.dark-mode {
  border: 2px solid #a6a6a6;
}

div#content-wrap {
  background: #333;
  height: 100%;
  overflow: hidden;
  position: relative;
  z-index: 5;
  -webkit-transition: transform 0.25s ease;
  -moz-transition: transform 0.25s ease;
  -ms-transition: transform 0.25s ease;
  -o-transition: transform 0.25s ease;
  transition: transform 0.25s ease;
}
div#content-wrap.minimized {
  -moz-transform: scale(0);
  -o-transform: scale(0);
  -ms-transform: scale(0);
  -webkit-transform: scale(0);
  transform: scale(0);
}
div#content-wrap.inactive {
  -moz-transform: scale(0.85) translate(0, 60%);
  -o-transform: scale(0.85) translate(0, 60%);
  -ms-transform: scale(0.85) translate(0, 60%);
  -webkit-transform: scale(0.85) translate(0, 60%);
  transform: scale(0.85) translate(0, 60%);
}
div#content-wrap.inactive div#overlay {
  display: block;
}

div#overlay {
  cursor: pointer;
  display: none;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 3;
}

div#content {
  padding: 15px;
  position: relative;
  z-index: 2;
}

div#background {
  background-size: cover;
  background-position: center;
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 1;
  -webkit-filter: blur(10px);
  -moz-filter: blur(10px);
  -ms-filter: blur(10px);
  -o-filter: blur(10px);
  filter: blur(10px);
  -webkit-transition: background-image 0.25s ease;
  -moz-transition: background-image 0.25s ease;
  -ms-transition: background-image 0.25s ease;
  -o-transition: background-image 0.25s ease;
  transition: background-image 0.25s ease;
}
div#background::before {
  background: #333;
  content: "";
  display: block;
  height: 100%;
  opacity: 0.5;
  position: absolute;
  width: 100%;
}
div#background::after {
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  width: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, #323232 100%);
}

div#header {
  color: white;
}
div#header span {
  cursor: pointer;
  font-size: 20px;
}
div#header span .svg {
  height: 16px;
  width: 16px;
}
div#header span#menu-btn {
  float: left;
}
div#header span#options-btn {
  float: right;
}

div.jcarousel {
  left: -15px;
  width: calc(100% + 30px);
  position: relative;
  overflow: hidden;
}
div.jcarousel ul#songs {
  width: 20000em;
  position: relative;
}
div.jcarousel ul#songs li.song {
  float: left;
  margin: 10px 15px;
  text-align: center;
  width: calc(225px - 30px);
}
div.jcarousel ul#songs li.song img {
  width: 92.5%;
  -webkit-box-shadow: 0px 5px 25px rgba(50, 50, 50, 0.5);
  -moz-box-shadow: 0px 5px 25px rgba(50, 50, 50, 0.5);
  box-shadow: 0px 5px 25px rgba(50, 50, 50, 0.5);
}
div.jcarousel ul#songs li.song p {
  color: white;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}
div.jcarousel ul#songs li.song p.song-title {
  font-size: 16px;
  font-weight: 600;
  margin: 10px 0 5px;
}
div.jcarousel ul#songs li.song p.song-artist {
  color: #b3b3b3;
  font-size: 12px;
  margin: 0;
}

div#controls {
  color: white;
  display: table;
  margin: 10px auto 25px;
  text-align: center;
  width: 75%;
}
div#controls span {
  display: table-cell;
  font-size: 20px;
  vertical-align: middle;
}
div#controls span#play-btn {
  font-size: 34px;
}
div#controls span i {
  cursor: pointer;
}

div#sub-controls {
  color: #999999;
  cursor: default;
  font-size: 14px;
  margin: 15px 0 0;
  text-align: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
div#sub-controls .svg {
  height: 14px;
  position: relative;
  top: 2px;
  width: 14px;
}
div#sub-controls .svg path {
  fill: #999999;
}
div#sub-controls i,
div#sub-controls .svg {
  cursor: pointer;
  margin: 0 15px;
}
div#sub-controls i.active,
div#sub-controls .svg.active {
  color: #e74c3c;
}

div#timeline {
  position: relative;
  margin: 0 auto;
  width: 92.5%;
}
div#timeline span {
  color: #b3b3b3;
  font-size: 7px;
  position: absolute;
  top: -10px;
}
div#timeline span#current-time {
  left: 0;
}
div#timeline span#total-time {
  right: 0;
}
div#timeline div.slider {
  background-color: gray;
  border-radius: 2px;
  cursor: pointer;
  height: 2px;
  position: relative;
  width: 100%;
}
div#timeline div.slider div.progress {
  background-color: #e74c3c;
  height: 100%;
  pointer-events: none;
  position: absolute;
  width: 0;
}
div#timeline div.slider div.progress div.pin {
  background-color: white;
  border-radius: 8px;
  height: 8px;
  position: absolute;
  pointer-events: all;
  right: -5px;
  top: -3px;
  width: 8px;
  -webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.32);
  -moz-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.32);
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.32);
  -webkit-transition: transform 0.25s ease;
  -moz-transition: transform 0.25s ease;
  -ms-transition: transform 0.25s ease;
  -o-transition: transform 0.25s ease;
  transition: transform 0.25s ease;
}
div#timeline div.slider div.progress div.pin:active {
  -moz-transform: scale(1.5);
  -o-transform: scale(1.5);
  -ms-transform: scale(1.5);
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
}

div#home-screen {
  background: linear-gradient(to bottom, #4f6f8f, #3d566e);
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  visibility: hidden;
  z-index: 2;
}
div#home-screen.active {
  visibility: visible;
}
div#home-screen div.home-content {
  margin: 15px;
  padding-bottom: 80px;
  text-align: center;
}
div#home-screen div.home-content h2 {
  font-size: 22px;
  font-weight: 600;
}
div#home-screen div.home-content p {
  font-size: 13px;
  line-height: 1.5;
  margin: 5px 0;
}
div#home-screen div.home-content p#made-by a {
  color: white;
}
div#home-screen div.home-content p#icons-by {
  color: #7796b4;
  bottom: 15px;
  font-size: 11px;
  left: 0;
  position: absolute;
  text-align: center;
  width: 100%;
}
div#home-screen div.home-content p a {
  color: #98afc6;
  border-bottom: 1px solid #7796b4;
  text-decoration: none;
  padding: 0 1px;
  -webkit-transition: border-color 0.25s ease, color 0.25s ease;
  -moz-transition: border-color 0.25s ease, color 0.25s ease;
  -ms-transition: border-color 0.25s ease, color 0.25s ease;
  -o-transition: border-color 0.25s ease, color 0.25s ease;
  transition: border-color 0.25s ease, color 0.25s ease;
}
div#home-screen div.home-content p a:hover {
  color: #b9c9d8;
  border-color: #b9c9d8;
}
div#home-screen div.home-content div.app-icon {
  cursor: pointer;
  border-radius: 10px;
  height: 40px;
  margin: 30px auto 0;
  position: relative;
  width: 40px;
  background: linear-gradient(to bottom, #e74c3c, #d62c1a);
}
div#home-screen div.home-content div.app-icon:hover {
  background: linear-gradient(to bottom, #e43725, #bf2718);
}
div#home-screen div.home-content div.app-icon::after {
  content: "Music Player";
  font-size: 10px;
  position: absolute;
  top: 45px;
  white-space: nowrap;
}
div#home-screen div.home-content div.app-icon .svg {
  height: 60%;
  width: 60%;
}

JS

              
                $(document).ready(function () {
	var songs = [
		{
      title: "Alice",
      artist: "Lady Gaga",
      cover:
        "https://celebmix.com/wp-content/uploads/2020/04/EUwFIvEX0AkfTpV.jpeg",
      audioFile: "mp3/2-alice.mp3",
      color: "#034f84"
    },
    {
      title: "Stupid Love",
      artist: "Lady Gaga",
      cover:
        "https://upload.wikimedia.org/wikipedia/en/thumb/3/34/Lady_Gaga_-_Stupid_Love.png/220px-Lady_Gaga_-_Stupid_Love.png",
      audioFile: "mp3/3-stup.mp3",
      color: "#622569"
    },
    {
      title: "Rain On Me",
      artist: "Lady Gaga, Arianna Grande",
      cover:
        "http://subrica.com/wp-content/uploads/2020/05/Lady-Gaga-Ariana-Grande-Rain-On-Me-cover.jpg",
      audioFile: "mp3/4-rain.mp3",
      color: "#92a8d1"
    },
    {
      title: "Free Woman",
      artist: "Lady Gaga",
      cover:
        "https://s31242.pcdn.co/wp-content/uploads/2020/05/ffee_woman-scaled.jpg",
      audioFile: "mp3/5-free.mp3",
      color: "#f7cac9"
    },
    {
      title: "Fun Tonight",
      artist: "Lady Gaga",
      cover:
        "https://celebmix.com/wp-content/uploads/2020/04/EUwFIvEX0AkfTpV.jpeg",
      audioFile: "mp3/6-fun.mp3",
      color: "#5d0126"
    },
    {
      title: "Chromatica II",
      artist: "Lady Gaga",
      cover:
        "https://celebmix.com/wp-content/uploads/2020/04/EUwFIvEX0AkfTpV.jpeg",
      audioFile: "mp3/7-chr2.mp3",
      color: "#c94c4c"
    },
    {
      title: "911",
      artist: "Lady Gaga",
      cover:
        "https://celebmix.com/wp-content/uploads/2020/04/EUwFIvEX0AkfTpV.jpeg",
      audioFile: "mp3/8-911.mp3",
      color: "#c3af50"
    },
    {
      title: "Plastic Doll",
      artist: "Lady Gaga",
      cover:
        "https://celebmix.com/wp-content/uploads/2020/04/EUwFIvEX0AkfTpV.jpeg",
      audioFile: "mp3/9-plastic.mp3",
      color: "#b1cbbb"
    },
    {
      title: "Sour Candy",
      artist: "Lady Gaga, BLACKPINK",
      cover:
        "https://i.redd.it/aogvmk7fccx41.jpg",
      audioFile: "mp3/10-sour.mp3",
      color: "#ffef96"
    },
    {
      title: "Enigma",
      artist: "Lady Gaga",
      cover:
        "https://celebmix.com/wp-content/uploads/2020/04/EUwFIvEX0AkfTpV.jpeg",
      audioFile: "mp3/11-enig.mp3",
      color: "#ff7b25"
    },
    {
      title: "Replay",
      artist: "Lady Gaga",
      cover:
        "https://celebmix.com/wp-content/uploads/2020/04/EUwFIvEX0AkfTpV.jpeg",
      audioFile: "mp3/12-replay.mp3",
      color: "#6b5b95"
    },
    {
      title: "Chromatica III",
      artist: "Lady Gaga",
      cover:
        "https://celebmix.com/wp-content/uploads/2020/04/EUwFIvEX0AkfTpV.jpeg",
      audioFile: "mp3/13-chr3.mp3",
      color: "#d64161"
    },
    {
      title: "Sine From Above",
      artist: "Lady Gaga, Elton John",
      cover:
        "https://celebmix.com/wp-content/uploads/2020/04/EUwFIvEX0AkfTpV.jpeg",
      audioFile: "mp3/14-sine.mp3",
      color: "#f4e1d2"
    },
    {
      title: "1000 Doves",
      artist: "Lady Gaga",
      cover:
        "https://celebmix.com/wp-content/uploads/2020/04/EUwFIvEX0AkfTpV.jpeg",
      audioFile: "mp3/15-doves.mp3",
      color: "#fefbd8"
    },
    {
      title: "Babylon",
      artist: "Lady Gaga",
      cover:
        "https://celebmix.com/wp-content/uploads/2020/04/EUwFIvEX0AkfTpV.jpeg",
      audioFile: "mp3/16-babylon.mp3",
      color: "#7e4a35"
    }
	];

	for (let song of songs) {
		$("#songs").append(
			'<li class="song" data-audio="' +
			song.audioFile +
			'" data-color="' +
			song.color +
			'">' +
			'<img src="' +
			song.cover +
			'">' +
			'<p class="song-title">' +
			song.title +
			"</p>" +
			'<p class="song-artist">' +
			song.artist +
			"</p>" +
			"</li>"
		);
	}

	$(".jcarousel").jcarousel({
		wrap: "circular"
	});
});

/*
 * Replace all SVG images with inline SVG
 */
jQuery('img[src$=".svg"]').each(function () {
	var $img = jQuery(this);
	var imgID = $img.attr("id");
	var imgClass = $img.attr("class");
	var imgURL = $img.attr("src");

	jQuery.get(
		imgURL,
		function (data) {
			// Get the SVG tag, ignore the rest
			var $svg = jQuery(data).find("svg");

			// Add replaced image's ID to the new SVG
			if (typeof imgID !== "undefined") {
				$svg = $svg.attr("id", imgID);
			}
			// Add replaced image's classes to the new SVG
			if (typeof imgClass !== "undefined") {
				$svg = $svg.attr("class", imgClass + " replaced-svg");
			}

			// Remove any invalid XML tags as per http://validator.w3.org
			$svg = $svg.removeAttr("xmlns:a");

			// Replace image with new SVG
			$img.replaceWith($svg);
		},
		"xml"
	);
});

// Current slide
$(".jcarousel").on("jcarousel:visiblein", "li", function (event, carousel) {
	let cover = $(this).find("img").attr("src");
	let songTitle = $(this).find("p.song-title").html();
	let songArtist = $(this).find("p.song-artist").html();
	let audioSrc = $(this).attr("data-audio");
	let backgroundColor = $(this).attr("data-color");
	$("body").css("background", backgroundColor);
	$("#background").css("background-image", "url(" + cover + ")");
	$("audio")
		.find("source")
		.attr("src", "" + audioSrc + "");
	player.load();
	player.currentTime = 0;
	$("#song-info").find("img").attr("src", cover);
	$("#song-info .artist-wrap p").find("span.title").html(songTitle);
	$("#song-info .artist-wrap p").find("span.artist").html(songArtist);
});

// Previous slide
$("#previous-btn").click(function () {
	$(".jcarousel").jcarousel("scroll", "-=1");
	$("#play-btn i").removeClass("fa-pause");
	player.pause();
});

// Next slide
$("#next-btn").click(function () {
	if ($(".fa-random").hasClass("active")) {
		let songs = $("#songs li").length - 1;
		let randomSong = Math.floor(Math.random() * songs) + 1;
		$(".jcarousel").jcarousel("scroll", "+=" + randomSong);
	} else {
		$(".jcarousel").jcarousel("scroll", "+=1");
	}
	$("#play-btn i").removeClass("fa-pause");
	player.pause();
});

// Play Icon Switcher
$("#play-btn").click(function () {
	$(this).find("i").toggleClass("fa-pause");
});

// Menu
$("#menu-btn").click(function () {
	$("#content-wrap").addClass("inactive");
	$("#sidemenu").addClass("active");
});

// Home Button
$("#home-btn").click(function () {
	$("#home-screen").addClass("active");
	$(".menu").removeClass("active");
	$("#content-wrap").addClass("minimized");
});

// App
$(".app-icon").click(function () {
	$("#content-wrap").removeClass("minimized");
	setTimeout(function () {
		$("#home-screen").removeClass("active");
	}, 300);
});

function darkMode(){
  $("#iphone").addClass("dark-mode")
  $("#camera span").addClass("dark-mode")
  $("div#screen").addClass("dark-mode")
}

function lightMode(){
  $("#iphone").removeClass("dark-mode")
  $("#camera span").removeClass("dark-mode")
  $("#iphone").removeClass("dark-mode")
}
// Bluetooth
$("#bluetooth-btn").click(function () {
  if ($("#bluetooth-btn").hasClass("active")) {
    $("#bluetooth-btn").removeClass("active");
    lightMode();
  } else {
    $("#bluetooth-btn").addClass("active");
    darkMode();
  }
});

$("#sub-controls i").click(function () {
	if (!$(this).hasClass("fa-bluetooth-b")) {
		$(this).toggleClass("active");
	}

	if ($("#heart-icon").hasClass("active")) {
		$("#heart-icon").removeClass("fa-heart-o");
		$("#heart-icon").addClass("fa-heart");
	} else {
		$("#heart-icon").removeClass("fa-heart");
		$("#heart-icon").addClass("fa-heart-o");
	}
});

/*
 * Music Player
 * By Greg Hovanesyan
 * https://codepen.io/gregh/pen/NdVvbm
 */

var audioPlayer = document.querySelector("#content");
var playpauseBtn = audioPlayer.querySelector("#play-btn");
var progress = audioPlayer.querySelector(".progress");
var sliders = audioPlayer.querySelectorAll(".slider");
var player = audioPlayer.querySelector("audio");
var currentTime = audioPlayer.querySelector("#current-time");
var totalTime = audioPlayer.querySelector("#total-time");

var draggableClasses = ["pin"];
var currentlyDragged = null;

window.addEventListener("mousedown", function (event) {
	if (!isDraggable(event.target)) return false;
  
	currentlyDragged = event.target;
	let handleMethod = currentlyDragged.dataset.method;

	this.addEventListener("mousemove", window[handleMethod], false);

	window.addEventListener(
		"mouseup",
		() => {
			currentlyDragged = false;
			window.removeEventListener("mousemove", window[handleMethod], false);
		},
		false
	);
});

playpauseBtn.addEventListener("click", togglePlay);
player.addEventListener("timeupdate", updateProgress);
player.addEventListener("loadedmetadata", () => {
	totalTime.textContent = formatTime(player.duration);
});
player.addEventListener("ended", function () {
	player.currentTime = 0;

	if ($(".fa-refresh").hasClass("active")) {
		togglePlay();
	} else {
		if ($(".fa-random").hasClass("active")) {
			let songs = $("#songs li").length - 1;
			let randomSong = Math.floor(Math.random() * songs) + 1;
			$(".jcarousel").jcarousel("scroll", "+=" + randomSong);
		} else {
			$(".jcarousel").jcarousel("scroll", "+=1");
		}
		togglePlay();
	}
});

sliders.forEach((slider) => {
	let pin = slider.querySelector(".pin");
	slider.addEventListener("click", window[pin.dataset.method]);
});

function isDraggable(el) {
	let canDrag = false;
	let classes = Array.from(el.classList);
	draggableClasses.forEach((draggable) => {
		if (classes.indexOf(draggable) !== -1) canDrag = true;
	});
	return canDrag;
}

function inRange(event) {
	let rangeBox = getRangeBox(event);
	let direction = rangeBox.dataset.direction;
	let screenOffset = document.querySelector("#screen").offsetLeft + 26;
	var min = screenOffset - rangeBox.offsetLeft;
	var max = min + rangeBox.offsetWidth;
	if (event.clientX < min || event.clientX > max) {
		return false;
	}
	return true;
}

function updateProgress() {
	var current = player.currentTime;
	var percent = (current / player.duration) * 100;
	progress.style.width = percent + "%";

	currentTime.textContent = formatTime(current);
}

function getRangeBox(event) {
	let rangeBox = event.target;
	let el = currentlyDragged;
	if (event.type == "click" && isDraggable(event.target)) {
		rangeBox = event.target.parentElement.parentElement;
	}
	if (event.type == "mousemove") {
		rangeBox = el.parentElement.parentElement;
	}
	return rangeBox;
}

function getCoefficient(event) {
	let slider = getRangeBox(event);
	let screenOffset = document.querySelector("#screen").offsetLeft + 26;
	let K = 0;
	let offsetX = event.clientX - screenOffset;
	let width = slider.clientWidth;
	K = offsetX / width;
	return K;
}

function rewind(event) {
	if (inRange(event)) {
		player.currentTime = player.duration * getCoefficient(event);
	}
}

function formatTime(time) {
	var min = Math.floor(time / 60);
	var sec = Math.floor(time % 60);
	return min + ":" + (sec < 10 ? "0" + sec : sec);
}

function togglePlay() {
	player.volume = 0.5;

	if (player.paused) {
		player.play();
	} else {
		player.pause();
	}
}

999px

Insecure Resource

About JavaScript Preprocessors

About External Resources

About Packages

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Packages

Add Packages

About Packages

Behavior

Auto Save

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Code Indent width

Want to change your Syntax Highlighting theme, Fonts and more?

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions