cssAudio - ActiveCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmloctocatspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div class="container">
  <div class="player">
    <div class="like waves-effect waves-light">
      <i class="icon-heart"></i>
    </div>
    <div class="mask"></div>
    <ul class="player-info info-one">
      <li>Rock'n'Roll Nerd</li>
      <li>Tim Minchin</li>
      <li>5:34</li>
    </ul>
    <ul class="player-info info-two">
      <li>Rock'n'Roll Nerd</li>
      <li>Tim Minchin</li>
      <li><span id="duration"></span><i> / </i>5:34</li>
    </ul>
    <div id="play-button" class="unchecked">
      <i class="icon icon-play"></i>
    </div>
    <div class="control-row">
      <div class="waves-animation-one"></div>
      <div class="waves-animation-two"></div>
      <div id="pause-button">
        <i class="icon"></i>
      </div>
      <div class="seek-field">
        <input id="audioSeekBar" min="0" max="334" step="1" value="0" type="range" oninput="audioSeekBar()" onchange="this.oninput()">
      </div>
      <div class="volume-icon">
        <i class="icon-volume-up"></i>
      </div>
      <div class="volume-field">
        <input type="range" min="0" max="100" value="100" step="1" oninput="audio.volume = this.value/100" onchange="this.oninput()">
      </div>
    </div>
  </div>
</div>
<audio id="audio-player" ontimeupdate="SeekBar()" ondurationchange="CreateSeekBar()" preload="auto" loop>
  <source src="https://goo.gl/L3PFFI" type="audio/mpeg">
</audio>
            
          
!
            
              body {
  font-family: Roboto;
  background-color: #bbdefb;
}

.container {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.player {
  position: relative;
  background-color: #ffffff;
  background-image: url("https://goo.gl/X9j6DR");
  width: 550px;
  height: 375px;
  border-radius: 3px;
  border-bottom: 6px solid #3f51b5;
  box-shadow: 0 0 20px 3px rgba(0, 0, 0, .5);
  z-index: 1;
  &:hover .mask {
    background-color: rgba(255, 255, 255, .1);
    transition: all 1s;
  }
  & .like {
    position: absolute;
    width: 35px;
    height: 35px;
    top: 15px;
    right: 20px;
    z-index: 15;
    font-size: 1.5em;
    vertical-align: middle;
    line-height: 38px;
    color: #f2f2f2;
    border-radius: 50%;
    text-align: center;
    cursor: pointer;
  }
  & .icon-heart {
    display: block;
  }
  & .mask {
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, .2);
    z-index: 2;
    transition: all 1s;
  }
  &-info {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 4;
    list-style: none;
    color: #262626;
    transform: scale(1);
    & li {
      margin-bottom: 7px;
    }
    & li:nth-child(1) {
      font-size: 1.5em;
    }
    & li:nth-child(2) {
      font-size: 1.2em;
    }
    & li:nth-child(3) {
      font-size: .9em;
    }
  }
  & .info-two {
    left: auto;
    right: 4.5%;
    z-index: 1;
    color: #f2f2f2;
    & li:nth-child(2) {
      float: right;
    }
    & li:nth-child(3) {
      display: inline-block;
      float: right;
      clear: both;
    }
  }
  & #play-button {
    box-sizing: border-box;
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #5c6bc0;
    box-shadow: 0 8px 25px 6px rgba(0, 0, 0, .5);
    right: 40px;
    bottom: 90px;
    z-index: 5;
    cursor: pointer;
    transition: all 70ms;
    border: none;
    &:hover {
      width: 70px;
      height: 70px;
      box-shadow: 0 4px 15px 0 rgba(0, 0, 0, .5);
      right: 45px;
      bottom: 95px;
      transition: all 70ms;
    }
    & .icon-play {
      position: absolute;
      font-size: 1.5em;
      left: 52%;
      top: 50%;
      transform: translate(-48%, -50%);
      transition: all 70ms;
      color: #ffffff;
    }
    &:hover .icon-play {
      font-size: 1.2em;
      transition: all 70ms;
    }
    & .icon-cancel {
      position: absolute;
      font-size: 1.6em;
      left: 50%;
      top: 49%;
      transform: translate(-50%, -51%);
      color: #ffffff;
    }
  }
}

.control-row {
  position: absolute;
  bottom: -1px;
  width: 100%;
  height: 130px;
  background-color: #ffffff;
  overflow: hidden;
  z-index: 3;
  & #pause-button {
    box-sizing: border-box;
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #f2f2f2;
    left: 40px;
    bottom: 25px;
    z-index: 5;
    cursor: pointer;
    border: none;
    transform: scale(0);
    display: none;
    animation: scale-animation .4s;
    animation-fill-mode: forwards;
    animation-delay: .3s;
    & .icon-pause {
      position: absolute;
      font-size: 1.5em;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      transition: all .1s;
      color: #424242;
    }
    & .icon-play {
      position: absolute;
      font-size: 1.5em;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      transition: all .1s;
      color: #424242;
    }
  }
  & .seek-field {
    bottom: 67px;
    left: 148px;
    position: absolute;
    width: 170px;
    z-index: 5;
    transform: scale(0);
    display: none;
    animation: scale-animation .4s;
    animation-fill-mode: forwards;
    animation-delay: .3s;
  }
  & .volume-field {
    bottom: 67px;
    right: 127px;
    position: absolute;
    width: 50px;
    z-index: 5;
    transform: scale(0);
    display: none;
    animation: scale-animation .4s;
    animation-fill-mode: forwards;
    animation-delay: .3s;
  }
  & .volume-icon {
    width: 20px;
    height: 20px;
    position: absolute;
    border-radius: 50%;
    bottom: 58px;
    right: 185px;
    z-index: 5;
    font-size: 1.2em;
    display: none;
    transform: scale(0);
    animation: scale-animation .4s;
    animation-fill-mode: forwards;
    animation-delay: .3s;
    & .icon-volume-up {
      color: #424242;
    }
  }
}

.like-active {
  color: #ef5350;
  animation: scale-animation .4s;
  animation-fill-mode: forwards;
}

@keyframes scale-animation {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.waves-animation-one {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #5c6bc0;
  z-index: 3;
  left: 42.5%;
  bottom: 20%;
  transform: scale(0);
  animation: waves-animation-one .25s;
  animation-fill-mode: forwards;
  animation-delay: .3s;
  display: none;
}

@keyframes waves-animation-one {
  0% {
    transform: scale(1);
  }
  99% {
    transform: scale(7.8);
  }
  100% {
    transform: scale(7.8);
  }
}

.waves-animation-two {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #5c6bc0;
  z-index: 3;
  right: 40px;
  bottom: 35px;
  transform: scale(7.8);
  display: none;
  animation: waves-animation-two .2s;
  animation-fill-mode: forwards;
}

@keyframes waves-animation-two {
  to {
    transform: scale(0);
  }
}

.info-active {
  animation: info-active-animation 3s;
  animation-fill-mode: forwards;
  animation-delay: .37s;
}

@keyframes info-active-animation {
  to {
    bottom: 56.5%;
  }
}

.play-active {
  animation: play-animation .3s;
  animation-fill-mode: forwards;
}

@keyframes play-animation {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
  98% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    transform: translate(-200px, 65px);
  }
  99% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    transform: translate(-200px, 65px) scale(0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    transform: translate(0, 65px) scale(1);
  }
}

.play-inactive {
  animation: play-inactive 1s;
  animation-fill-mode: forwards
}

@keyframes play-inactive {
  from {
    transform: translate(0, 65px);
  }
}

input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

input[type="range"]:focus {
  outline: none;
}

input[type="range"] + .thumb {
  display: none;
}

input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 3px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px transparent, 0px 0px 0px transparent;
  background: #f2f2f2;
  border-radius: 0;
  border: 0px solid #000101;
}

input[type="range"]::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px transparent, 0px 0px 0px transparent;
  border: 0px solid transparent;
  height: 18px;
  width: 18px;
  border-radius: 50%;
  background: #009688;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -7px;
}

input[type="range"]:focus::-webkit-slider-runnable-track {
  background: #f2f2f2;
}

input[type="range"]::-moz-range-track {
  width: 100%;
  height: 3px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px transparent, 0px 0px 0px transparent;
  background: #f2f2f2;
  border-radius: 0;
  border: 0px solid #000101;
}

input[type="range"]::-moz-range-thumb {
  box-shadow: 0px 0px 0px transparent, 0px 0px 0px transparent;
  border: 0px solid transparent;
  height: 18px;
  width: 18px;
  border-radius: 50%;
  background: #009688;
  cursor: pointer;
}

input[type="range"]::-ms-track {
  width: 100%;
  height: 3px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  border-width: 39px 0;
  color: transparent;
  padding-top: 5px;
}

input[type="range"]::-ms-fill-lower {
  background: #f2f2f2;
  border: 0px solid transparent;
  border-radius: 0;
  box-shadow: 0px 0px 0px transparent, 0px 0px 0px transparent;
}

input[type="range"]::-ms-fill-upper {
  background: #f2f2f2;
  border: 0px solid transparent;
  border-radius: 0x;
  box-shadow: 0px 0px 0px transparent, 0px 0px 0px transparent;
}

input[type="range"]::-ms-thumb {
  box-shadow: 0px 0px 0px transparent, 0px 0px 0px transparent;
  border: 0px solid transparent;
  height: 18px;
  width: 18px;
  border-radius: 50%;
  background: #009688;
  cursor: pointer;
  margin-top: 1px;
}

input[type="range"]::-ms-tooltip {
  display: none;
}

input[type="range"]::-ms-ticks {
  display: none;
}

input[type="range"]:focus::-ms-fill-lower {
  background: #f2f2f2;
}

input[type="range"]:focus::-ms-fill-upper {
  background: #f2f2f2;
}


/* --- Fontello --- */

@font-face {
  font-family: 'fontello';
  src: url('data:application/octet-stream;base64,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') format('woff'), url('data:application/octet-stream;base64,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YFlmsAFjYCMgsAErI7AEQ2CwASuwBSVhsAUlsAJiILAAUFiwQGBZZrABY7AEJmEgsAQlYGQjsAMlYGRQWCEbIyFZIyAgsAQmI0ZhOFktsDcssAAWICAgsAUmIC5HI0cjYSM8OC2wOCywABYgsAgjQiAgIEYjR7ABKyNhOC2wOSywABawAyWwAiVHI0cjYbAAVFguIDwjIRuwAiWwAiVHI0cjYSCwBSWwBCVHI0cjYbAGJbAFJUmwAiVhuQgACABjYyMgWGIbIVljuAQAYiCwAFBYsEBgWWawAWNgIy4jICA8ijgjIVktsDossAAWILAIQyAuRyNHI2EgYLAgYGawAmIgsABQWLBAYFlmsAFjIyAgPIo4LbA7LCMgLkawAiVGUlggPFkusSsBFCstsDwsIyAuRrACJUZQWCA8WS6xKwEUKy2wPSwjIC5GsAIlRlJYIDxZIyAuRrACJUZQWCA8WS6xKwEUKy2wPiywNSsjIC5GsAIlRlJYIDxZLrErARQrLbA/LLA2K4ogIDywBCNCijgjIC5GsAIlRlJYIDxZLrErARQrsARDLrArKy2wQCywABawBCWwBCYgLkcjRyNhsAlDKyMgPCAuIzixKwEUKy2wQSyxCAQlQrAAFrAEJbAEJSAuRyNHI2EgsAQjQrAJQysgsGBQWCCwQFFYswIgAyAbswImAxpZQkIjIEewBEOwAmIgsABQWLBAYFlmsAFjYCCwASsgiophILACQ2BkI7ADQ2FkUFiwAkNhG7ADQ2BZsAMlsAJiILAAUFiwQGBZZrABY2GwAiVGYTgjIDwjOBshICBGI0ewASsjYTghWbErARQrLbBCLLA1Ky6xKwEUKy2wQyywNishIyAgPLAEI0IjOLErARQrsARDLrArKy2wRCywABUgR7AAI0KyAAEBFRQTLrAxKi2wRSywABUgR7AAI0KyAAEBFRQTLrAxKi2wRiyxAAEUE7AyKi2wRyywNCotsEgssAAWRSMgLiBGiiNhOLErARQrLbBJLLAII0KwSCstsEossgAAQSstsEsssgABQSstsEwssgEAQSstsE0ssgEBQSstsE4ssgAAQistsE8ssgABQistsFAssgEAQistsFEssgEBQistsFIssgAAPistsFMssgABPistsFQssgEAPistsFUssgEBPistsFYssgAAQCstsFcssgABQCstsFgssgEAQCstsFkssgEBQCstsFossgAAQystsFsssgABQystsFwssgEAQystsF0ssgEBQystsF4ssgAAPystsF8ssgABPystsGAssgEAPystsGEssgEBPystsGIssDcrLrErARQrLbBjLLA3K7A7Ky2wZCywNyuwPCstsGUssAAWsDcrsD0rLbBmLLA4Ky6xKwEUKy2wZyywOCuwOystsGgssDgrsDwrLbBpLLA4K7A9Ky2waiywOSsusSsBFCstsGsssDkrsDsrLbBsLLA5K7A8Ky2wbSywOSuwPSstsG4ssDorLrErARQrLbBvLLA6K7A7Ky2wcCywOiuwPCstsHEssDorsD0rLbByLLMJBAIDRVghGyMhWUIrsAhlsAMkUHiwARUwLQBLuADIUlixAQGOWbABuQgACABjcLEABUKxAAAqsQAFQrEACCqxAAVCsQAIKrEABUK5AAAACSqxAAVCuQAAAAkqsQMARLEkAYhRWLBAiFixA2REsSYBiFFYugiAAAEEQIhjVFixAwBEWVlZWbEADCq4Af+FsASNsQIARAA=') format('truetype');
}

[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  margin-left: .2em;
}

.icon-info:before {
  content: '\e800';
}

.icon-download-cloud:before {
  content: '\e801';
}

.icon-menu:before {
  content: '\e802';
}

.icon-arrows-cw:before {
  content: '\e803';
}

.icon-cancel:before {
  content: '\e804';
}

.icon-ok:before {
  content: '\e805';
}

.icon-volume-up:before {
  content: '\e806';
}

.icon-volume-off:before {
  content: '\e807';
}

.icon-shuffle:before {
  content: '\e808';
}

.icon-play:before {
  content: '\e809';
}

.icon-pause:before {
  content: '\e80a';
}

.icon-heart:before {
  content: '\e80b';
}
            
          
!
            
              var audio = document.getElementById("audio-player");

$(document).ready(function() {
  $("#play-button").click(function() {
    if ($(this).hasClass("unchecked")) {
      $(this)
        .addClass("play-active")
        .removeClass("play-inactive")
        .removeClass("unchecked");
      $(".info-two")
        .addClass("info-active");
      $("#pause-button")
        .addClass("scale-animation-active");
      $(".waves-animation-one, #pause-button, .seek-field, .volume-icon, .volume-field, .info-two").show();
      $(".waves-animation-two").hide();
      $("#pause-button")
        .children('.icon')
        .addClass("icon-pause")
        .removeClass("icon-play");
      setTimeout(function() {
        $(".info-one").hide();
      }, 400);
      audio.play();
      audio.currentTime = 0;
    } else {
      $(this)
        .removeClass("play-active")
        .addClass("play-inactive")
        .addClass("unchecked");
      $("#pause-button")
        .children(".icon")
        .addClass("icon-pause")
        .removeClass("icon-play");
      $(".info-two")
        .removeClass("info-active");
      $(".waves-animation-one, #pause-button, .seek-field, .volume-icon, .volume-field, .info-two").hide();
      $(".waves-animation-two").show();
      setTimeout(function() {
        $(".info-one").show();
      }, 150);
      audio.pause();
      audio.currentTime = 0;
    }
  });
  $("#pause-button").click(function() {
    $(this).children(".icon")
      .toggleClass("icon-pause")
      .toggleClass("icon-play");

    if (audio.paused) {
      audio.play();
    } else {
      audio.pause();
    }
  });
  $("#play-button").click(function() {
    setTimeout(function() {
      $("#play-button").children(".icon")
        .toggleClass("icon-play")
        .toggleClass("icon-cancel");
    }, 350);
  });
  $(".like").click(function() {
    $(".icon-heart").toggleClass("like-active");
  });
});

function CreateSeekBar() {
  var seekbar = document.getElementById("audioSeekBar");
  seekbar.min = 0;
  seekbar.max = audio.duration;
  seekbar.value = 0;
}

function EndofAudio() {
  document.getElementById("audioSeekBar").value = 0;
}

function audioSeekBar() {
  var seekbar = document.getElementById("audioSeekBar");
  audio.currentTime = seekbar.value;
}

function SeekBar() {
  var seekbar = document.getElementById("audioSeekBar");
  seekbar.value = audio.currentTime;
}

audio.addEventListener("timeupdate", function() {
  var duration = document.getElementById("duration");
  var s = parseInt(audio.currentTime % 60);
  var m = parseInt((audio.currentTime / 60) % 60);
  duration.innerHTML = m + ':' + s;
}, false);

Waves.init();
Waves.attach("#play-button", ["waves-button", "waves-float"]);
Waves.attach("#pause-button", ["waves-button", "waves-float"]);
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console