<div class="wrapper">
  <div class="block">
    
    <div class="player-btn">
      
      <div class="player-btn-particles">
        <div class="player-btn-particle player-btn-particle--one"></div>
        <div class="player-btn-particle player-btn-particle--second"></div>
        <div class="player-btn-particle player-btn-particle--third"></div>
        <div class="player-btn-particle player-btn-particle--fourth"></div>
      </div>
      
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" class="player-btn-icon">
        <path class="svg-play" fill="transparent" d="M90 50 L30 15 L30 160 L170 100 L130 75"/>
      </svg>
      
    </div>
    
    <audio id="track">
      <source src="http://dl2.mp3party.net/online/3644.mp3" type="audio/mpeg">
    </audio>
    
  </div>
  
    <!-- Filter -->
    <svg class="svg-hidden" xmlns="http://www.w3.org/2000/svg" version="1.1">
      <defs>
        <filter id="fancy-goo">
          <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
          <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
          <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
        </filter>
      </defs>
    </svg>
</div>

* {
  box-sizing: border-box;
  margin: 0;
}

.wrapper {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: center / cover url(https://images.pexels.com/photos/1150988/pexels-photo-1150988.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
  
  &:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0,0,0,.6);
  }
}

.block {
  display: flex;
  justify-content: center;
  padding: 100px 50px;
}

.player-btn {
  position: relative;
  
  & > * {
    pointer-events: none;
  }
  
  &-particles {
    width: 50px;
    height: 50px;
    background: #0037a3;
    filter: url(#fancy-goo);
  }
  
  &-particle {
    position: absolute;
    width: 20px;
    height: 20px;
    background: #0037a3;
    
    &--second {
      right: 0;
    }
    &--third {
      right: 0;
      bottom: 0;
    }
    &--fourth {
      bottom: 0;
    }
  }
  
  &-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 25px;
  }
  
  & .svg-play {
    stroke: #fff;
    stroke-width: 20;
    stroke-dasharray: 1000;
    stroke-dashoffset: 0;
    stroke-linejoin: round;
    stroke-linecap: round;
    
    &.to-pause {
      animation: to-pause 1s ease-in-out forwards;
    }
    &.to-play {
      animation: to-play 1s ease-in-out forwards;
    }
  }
  
  &.active {
    .player-btn-particles {
      animation: 3s rotation linear infinite;
    }
    .player-btn-particle {
      will-change: transform;
      border-radius: 50%;
      &--one {
         animation: particle-1 2s ease-in-out infinite;
      }
      &--second {
        animation: particle-2 2s 1s ease-in-out infinite;
      }
      &--third {
        animation: particle-3 2s 1.5s ease-in-out infinite;
      }
      &--fourth {
        animation: particle-4 2s 2s ease-in-out infinite;
      }
    }
    
  }
}

.svg-hidden {
  position: absolute;
  height: 0;
  width: 0;
}

// For button body
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  50% {
    background: #00aaff;
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes particle-1 {
  50% {
    transform: translate(-6px, 15px);
    background: #00aaff;
  }
}

@keyframes particle-2 {
  50% {
    transform: translate(-12px, -9px);
    background: #00aaff;
  }
}

@keyframes particle-3 {
  50% {
    transform: translate(10px, -25px);
    background: #00aaff;
  }
}

@keyframes particle-4 {
  50% {
    transform: translate(0px, 10px);
    background: #00aaff;
  }
}

// For Svg
@keyframes to-play {
  0% {
    stroke-width: 40;
    d: path("M50 20 V160 M140 20 V160");
  }
  50% {
    stroke-dashoffset: 1000;
  }
  100% {
    stroke-width: 20;
    d: path("M90 50 L30 15 L30 160 L170 100 L130 75");
    stroke-dashoffset: 0;
  }
}
@keyframes to-pause {
  0% {
    stroke-dashoffset: 0;
    d: path("M90 50 L30 15 L30 160 L170 100 L130 75");
  }
  50% {
    stroke-dashoffset: 1000;
  }
  100% {
    stroke-width: 40;
    d: path("M50 20 V160 M140 20 V160");
    stroke-dashoffset: 0;
  }
}

let btn = document.getElementsByClassName('player-btn')[0],
    icon = document.getElementsByClassName('svg-play')[0];

let audio = document.getElementById('track'),
    isPlaying = false;

btn.addEventListener('click', function(e) {
  e.target.classList.toggle('active');
  
  if (!icon.classList.contains('to-pause')) {
    icon.classList.add('to-pause');
    icon.classList.remove('to-play');
  } else {
    icon.classList.remove('to-pause');
    icon.classList.add('to-play');
  }
  
  if (isPlaying) {
    audio.pause();
    isPlaying = false;
  } else {
    audio.play();
    isPlaying = true;
  }
  
});