Animate.css and Audio

Question

I'm having an issue with playing the animation if audio is paused. I only want the animation to work when I play the audio. When I pause the audio, I don't want any animation.

fiddle: https://jsfiddle.net/jzhang172/n7xqz3d0/1/

 $(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(); } }); });

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.7.0/jquery.lettering.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css" rel="stylesheet"/> <div class="box"> <audio id="audio" src="http://www.sousound.com/music/healing/healing_01.mp3"></audio> <p> Jesus What </p> </div>

Answer 1

I created a JSFiddle sample . I've updated the var from status to mstatus because I think it created a conflict.

Code:

 var mstatus = 1; $('.control').on('click',function(){ var e = document.getElementById("audio"); if(mstatus === 1){ e.play(); $('.control').addClass('animated shake'); mstatus = 2; }else{ e.pause(); $('.control').removeClass('animated shake'); mstatus = 1; } });

 .control{ width:100px; height:100px; background:blue; cursor:pointer; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="control"> <audio id="audio" src="http://www.sousound.com/music/healing/healing_01.mp3"></audio> </div>