Animate.css和音频

Question

我有一个问题，播放动画，如果音频被暂停。我只想动画工作时，我播放音频。当我暂停音频，我不想要任何动画。

小提琴：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 创建了一个JSFiddle示例。我已经将var从status更新为mstatus，因为我认为它造成了冲突。

代码：

​

  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>

​