JSFiddle - React, Tailwind, and code Playground

by irina675

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.7.0/jquery.lettering.min.js"></script>

<div class="box">
		<audio id="audio" src="http://www.sousound.com/music/healing/healing_01.mp3"></audio>
  <p>
  Jesus What
  </p>
</div>

CSS

.box{
  background:green;
  height:300px;
  width:300px;
  border:2px solid red;
}

JavaScript

$(function(){

var audiocircle= $("#audio")[0]; //audio variable


$('.box').click(function(){


 if (audiocircle.paused){
audiocircle.play();
animationClick('.box','jello');

function animationClick(element, animation){
  element = $(element);
  element.click(
    function() {
      element.addClass('animated ' + animation);
      //wait for animation to finish before removing classes
      window.setTimeout( function(){
element.removeClass('animated ' + animation);
      }, 2000);
    }
  );
};

}  else {

       audiocircle.pause();
}
});

});