Müziğe Göre Hareket Eden Audio Player

HTML
    <article id="palyer">
        <div class="player">
            <div class="dis"></div>
            <div class="ic"></div>
            <div class="playpause"></div>
        </div>

        <audio data-bpm="86">
            <source src="m1.mp3" type="audio/mp3">
            <source src="m1.ogg" type="audio/ogg">
        </audio>
    </article>


---
CSS

#article{
    width: 800px;
    margin: 0 auto;
    position: relative;
}
.player{
    width: 700px;
    margin: 89px auto;
   
}
.dis{
    background-image: url("dp.png");
    width: 466px;
    height: 466px;
    position: relative;
    bottom: 50%;
}
.ic{
    background-image: url("ip.png");
    width: 428px;
    height: 428px;
    position: relative;
    top: -447px;
    left: 18px;
}
.playpause{
    background-image: url("pp.png");
    width: 140px;
    height: 135px;
    position: relative;
    top: -718px;
    left: 160px;
    cursor: pointer;
}
/*İç Animasyon*/
.ic-animasyon{
  animation: animationFrames ease 3s infinite;
}

@keyframes animationFrames{
  0% {
    transform:rotate(360deg) ;
  }
  100% {
    transform:rotate(0deg);
  }
}

/*Dış Animasyon*/
.dis-animasyon{
  animation: animationFramess ease 3s infinite;
}
@keyframes animationFramess{
  0% {
    transform:rotate(0deg) ;
  }
  100% {
    transform:rotate(360deg);
  }
}

.scale{
  animation: animationFramess ease 3s infinite;
  animation:scales ease .5s infinite;
}
@keyframes scales{
  0% {
    transform:scale(1) ;
  }
  100% {
    transform:scale(1.05);
  }
}

---
JS
$(document).ready(function($) {
   
    $(".playpause").click(function(e) {
        var audio = $("audio")[0];
        var bpm = $("audio").attr('data-bpm');
        saniye = (60/bpm)*100;
       

        if (audio.paused === false) {
            audio.pause();
            $(".playpause").css('background-position', '0px 0px');
            $(".ic").removeClass('ic-animasyon');
            $(".dis").removeClass('dis-animasyon');
            //$(".player").removeClass('scale');
           
            clearInterval(intervals);
        }else{
            audio.play();
            $(".playpause").css('background-position', '0px 138px');
            $(".ic").addClass('ic-animasyon');
            $(".dis").addClass('dis-animasyon');
            //$(".player").addClass('scale');

            intervals = setInterval(function(){
                ziplat()
            },saniye);
        }

        function ziplat(){
            $(".player").addClass('scale');
            setTimeout(function(){
                $(".player").removeClass('scale');
            },saniye);
        }

    });

});