How to pause CSS animation while music is stopped?

Question

I made an example:

function play() {
    //Fazer animação
}

function pause() {
    //Para animação, ficar toda linha roxa;
}

#animacao {
  position: relative;
  margin: 30px;
}

#bloco {
  display: block;
  bottom: 0px;
  width: 09px;
  height: 5px;
  background: #9b59b6;
  position: absolute;
  animation: audio-wave 1.5s infinite ease-in-out;
}

#bloco:nth-child(1) {
left: 00px;
animation-delay: 0.0s;
}
#bloco:nth-child(2) {
left: 11px;
animation-delay: 0.1s;
}

#bloco:nth-child(3) {
left: 22px;
animation-delay: 0.2s;
}

#bloco:nth-child(4) {
left: 33px;
animation-delay: 0.3s;
}

#bloco:nth-child(5) {
left: 44px;
animation-delay: 0.4s;
}

#bloco:nth-child(6) {
left: 55px;
animation-delay: 0.5s;
}

@keyframes audio-wave {
    0% {height:5px;transform:translateY(0px);background:#9b59b6;}
    25% {height:40px;transform:translateY(20px);background:#3498db;}
/*effect is to animate the height of each span from 5px to 30px*/
/*translateY makes Y axis move down to give the effect that it is growing from the center*/

    50% {height:5px;transform:translateY(0px);background:#9b59b6;}
    100% {height:5px;transform:translateY(0px);background:#9b59b6;}
}

<div id="animacao">
  <div id="bloco"></div>
  <div id="bloco"></div>
  <div id="bloco"></div>
  <div id="bloco"></div>
  <div id="bloco"></div>
  <div id="bloco"></div>
</div>

<br>

<audio id="player" controls="controls" onclick="this.paused ? this.play() : this.pause();" src="http://ianreah.apphb.com/sounds/movement%20proposition.mp3"> </audio>

I saw another example of the function when she stops the music and plays the music here.

When pausing the music, it should be all purple and not blue.

Before playing the song should get all purple line too.

He can only do animation while the music plays.

Any idea ?

Answer 1

So you can pause the animation use the snipet tool, to make your js because external links may stop working

$('video').bind('play', function (e) {
  $('.bloco').toggleClass('paused');
});


$('video').bind('pause', function (e) {
  $('.bloco').toggleClass('paused');
});

#animacao {
  position: relative;
  margin: 30px;
}
.bloco {
  display: block;
  bottom: 0px;
  width: 09px;
  height: 5px;
  background: #9b59b6;
  position: absolute;
  animation: audio-wave 1.5s infinite ease-in-out;
}
.paused {
  -ms-animation-play-state: paused;
  -o-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}
.bloco:nth-child(1) {
  left: 00px;
  animation-delay: 0.0s;
}
.bloco:nth-child(2) {
  left: 11px;
  animation-delay: 0.1s;
}
.bloco:nth-child(3) {
  left: 22px;
  animation-delay: 0.2s;
}
.bloco:nth-child(4) {
  left: 33px;
  animation-delay: 0.3s;
}
.bloco:nth-child(5) {
  left: 44px;
  animation-delay: 0.4s;
}
.bloco:nth-child(6) {
  left: 55px;
  animation-delay: 0.5s;
}
@keyframes audio-wave {
  0% {
    height: 5px;
    transform: translateY(0px);
    background: #9b59b6;
  }
  25% {
    height: 40px;
    transform: translateY(20px);
    background: #3498db;
  }
  /*effect is to animate the height of each span from 5px to 30px*/
  /*translateY makes Y axis move down to give the effect that it is growing from the center*/
  50% {
    height: 5px;
    transform: translateY(0px);
    background: #9b59b6;
  }
  100% {
    height: 5px;
    transform: translateY(0px);
    background: #9b59b6;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="animacao">
  <div class="bloco"></div>
  <div class="bloco"></div>
  <div class="bloco"></div>
  <div class="bloco"></div>
  <div class="bloco"></div>
  <div class="bloco"></div>
</div>

<br>
<video id="video" controls="" preload="none" mediagroup="myVideoGroup">
</video>

Answer 2

1. An alternative without importing jQuery:

     
     var audio = document.getElementById("player");
     var animacao = document.getElementById("animacao");
     
     audio.addEventListener("click", function() {
          if (audio.paused) {
              audio.play();
          } else {
              audio.pause();
          }
     });
     
     audio.addEventListener("play", detectStatus);
     
     //Para a animação se o audio for pausado
     audio.addEventListener("pause", detectStatus);
     
     //Para a animação se o audio terminar
     audio.addEventListener("ended", detectStatus);
     
     //Para a animação se o audio não puder continuar, talvez não esteja recebendo dados e esteja aguardando
     audio.addEventListener("suspend", detectStatus);
     
     //Para a animação se o audio não puder ser reproduzido
     audio.addEventListener("error", detectStatus);
     
     var reclass = /(^|\s)paused(\s|$)/g;
     
     function detectStatus()
     {
          if (!audio.paused) {
              animacao.className = String(audio.className).replace(reclass, "");
          } else if (!reclass.test(animacao.className)) {
              animacao.className += " paused";
          }
     }
     
     

     
     #animacao {
       position: relative;
       margin: 30px;
     }
     .bloco {
       display: block;
       bottom: 0px;
       width: 09px;
       height: 5px;
       background: #9b59b6;
       position: absolute;
       animation: audio-wave 1.5s infinite ease-in-out;
     }
     .paused > .bloco {
       -ms-animation-play-state: paused;
       -o-animation-play-state: paused;
       -moz-animation-play-state: paused;
       -webkit-animation-play-state: paused;
       animation-play-state: paused;
     }
     .bloco:nth-child(1) {
       left: 00px;
       animation-delay: 0.0s;
     }
     .bloco:nth-child(2) {
       left: 11px;
       animation-delay: 0.1s;
     }
     .bloco:nth-child(3) {
       left: 22px;
       animation-delay: 0.2s;
     }
     .bloco:nth-child(4) {
       left: 33px;
       animation-delay: 0.3s;
     }
     .bloco:nth-child(5) {
       left: 44px;
       animation-delay: 0.4s;
     }
     .bloco:nth-child(6) {
       left: 55px;
       animation-delay: 0.5s;
     }
     @keyframes audio-wave {
       0% {
         height: 5px;
         transform: translateY(0px);
         background: #9b59b6;
       }
       25% {
         height: 40px;
         transform: translateY(20px);
         background: #3498db;
       }
       /*effect is to animate the height of each span from 5px to 30px*/
       /*translateY makes Y axis move down to give the effect that it is growing from the center*/
       50% {
         height: 5px;
         transform: translateY(0px);
         background: #9b59b6;
       }
       100% {
         height: 5px;
         transform: translateY(0px);
         background: #9b59b6;
       }
     }
     
     

     
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
     <div id="animacao" class="paused">
       <div class="bloco"></div>
       <div class="bloco"></div>
       <div class="bloco"></div>
       <div class="bloco"></div>
       <div class="bloco"></div>
       <div class="bloco"></div>
     </div>
     
     <br>
     <audio id="player" controls src="http://ianreah.apphb.com/sounds/movement%20proposition.mp3"></audio>
     
     

2. You can also choose can remove the animation so instead of pausing the effect is eats if it restarts:

     
     var audio = document.getElementById("player");
     var animacao = document.getElementById("animacao");
     
     audio.addEventListener("click", function() {
          if (audio.paused) {
              audio.play();
          } else {
              audio.pause();
          }
     });
     
     audio.addEventListener("play", detectStatus);
     
     //Para a animação se o audio for pausado
     audio.addEventListener("pause", detectStatus);
     
     //Para a animação se o audio terminar
     audio.addEventListener("ended", detectStatus);
     
     //Para a animação se o audio não puder continuar, talvez não esteja recebendo dados e esteja aguardando
     audio.addEventListener("suspend", detectStatus);
     
     //Para a animação se o audio não puder ser reproduzido
     audio.addEventListener("error", detectStatus);
     
     var reclass = /(^|\s)animado(\s|$)/g;
     
     function detectStatus()
     {
          if (audio.paused) {
              animacao.className = String(audio.className).replace(reclass, "");
          } else if (!reclass.test(animacao.className)) {
              animacao.className += " animado";
          }
     }
   
     

     
     #animacao {
       position: relative;
       margin: 30px;
     }
     .bloco {
       display: block;
       bottom: 0px;
       width: 09px;
       height: 5px;
       background: #9b59b6;
       position: absolute;
     }
     .animado > .bloco {
       animation: audio-wave 1.5s infinite ease-in-out;
     }
     .bloco:nth-child(1) {
       left: 00px;
       animation-delay: 0.0s;
     }
     .bloco:nth-child(2) {
       left: 11px;
       animation-delay: 0.1s;
     }
     .bloco:nth-child(3) {
       left: 22px;
       animation-delay: 0.2s;
     }
     .bloco:nth-child(4) {
       left: 33px;
       animation-delay: 0.3s;
     }
     .bloco:nth-child(5) {
       left: 44px;
       animation-delay: 0.4s;
     }
     .bloco:nth-child(6) {
       left: 55px;
       animation-delay: 0.5s;
     }
     @keyframes audio-wave {
       0% {
         height: 5px;
         transform: translateY(0px);
         background: #9b59b6;
       }
       25% {
         height: 40px;
         transform: translateY(20px);
         background: #3498db;
       }
       /*effect is to animate the height of each span from 5px to 30px*/
       /*translateY makes Y axis move down to give the effect that it is growing from the center*/
       50% {
         height: 5px;
         transform: translateY(0px);
         background: #9b59b6;
       }
       100% {
         height: 5px;
         transform: translateY(0px);
         background: #9b59b6;
       }
     }
     
     

     
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
     <div id="animacao">
       <div class="bloco"></div>
       <div class="bloco"></div>
       <div class="bloco"></div>
       <div class="bloco"></div>
       <div class="bloco"></div>
       <div class="bloco"></div>
     </div>
     
     <br>
     <audio id="player" controls src="http://ianreah.apphb.com/sounds/movement%20proposition.mp3"></audio>
     
     

3. Some other alternatives:

   Get "waves" from sound or music frequency