How to pause CSS animation while music is stopped?

Navigation
0

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>

Isawanotherexampleofthefunctionwhenitstopsthesongandplaysthesong here .

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

Before playing the song, you should get all the purple lines as well.

It can only animate while the music plays.

Any ideas?

    
asked by anonymous 01.12.2016 / 18:55

2 answers

0

  • An alternative without having to import 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><divid="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>

  • Youcanalsochoosetoremovetheanimationsoinsteadofpausingtheeffectitiseatifitrestarts:

      
  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><divid="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>

  • Someotheralternatives:

    Get "waves" of sound frequency or music

    • 01.12.2016 / 20:49
    1

    So you can pause the animation use the snipet tool, to make your js because external links can 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><divid="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>
        
    01.12.2016 / 19:32
    How to use factory, Angular, with firebase? Control 'ContentPlaceHolder1_Name' of type 'TextBox' should be inserted in a format tag with runat = server