Material Design UI Audio Player

index.html

<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://michael-zhigulin.github.io/mz-codepen-projects/Material%20Design%20UI%20Audio%20Player/audio/Tim%20Minchin%20%E2%80%94%20Rock%20n%20Roll%20Nerd.ogg" type="audio/ogg">
      <source src="https://michael-zhigulin.github.io/mz-codepen-projects/Material%20Design%20UI%20Audio%20Player/audio/Tim%20Minchin%20%E2%80%94%20Rock%20n%20Roll%20Nerd.mp3" type="audio/mpeg">
</audio>

material-design-ui-audio-player.markdown

Material Design UI Audio Player

A Pen by Michael Zhigulin on CodePen.

License.

script.js

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"]);

scripts

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/node-waves/0.7.5/waves.min.js"></script>

style.less

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://michael-zhigulin.github.io/mz-codepen-projects/Material%20Design%20UI%20Audio%20Player/tim_minchin_piano.jpg");
  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;
}

styles

<link href="https://fonts.googleapis.com/css?family=Roboto:400" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/node-waves/0.7.5/waves.min.css" rel="stylesheet" />
<link href="https://michael-zhigulin.github.io/mz-codepen-projects/Material%20Design%20UI%20Audio%20Player/font/font.css" rel="stylesheet" />