Xer007
Xer007

Reputation: 35

How do I pause ALL CSS animations and resume when needed

I'm making this site that plays our school hymn when the button "Play" is pressed and pauses when "Pause" is pressed. Alongside it the highlight animation 'per line' of the lyrics. However, I can't globally pause the animation. I wanted to pause the audio and the css animation but only the audio is the one that is actually paused so when I click the play button, the lyrics highlight and audio is not in sync anymore.

I've tried playing with animation-play-state in CSS but none of it worked great

Sorry if the code is long because I did 'per-line' lyrics but what I wanted to do is to pause any animations so that it is still in sync with the audio whenever I resume it.

.lyrics {
	font-weight: lighter;
	font-size: 1vw;
}

.l1.an {
	animation: tae 1s;
	animation-direction: alternate;
	animation-duration: 5s;
	animation-delay: 12s;
	
}

.l2.an {
	animation: tae 1s;
	animation-duration: 5s;
	animation-fill-mode: alternate;
	animation-delay: 15s;
	
}

.l3.an {
	animation: tae 1s;
	animation-duration: 8s;
	animation-fill-mode: alternate;
	animation-delay: 18s;
	
}

.l4.an {
	animation: tae 1s;
	animation-duration: 7s;
	animation-fill-mode: alternate;
	animation-delay: 24s;
	
}

.l5.an {
	animation: tae 1s;
	animation-duration: 8s;
	animation-fill-mode: alternate;
	animation-delay: 29s;
	
}


@keyframes tae {
	0% {background: initial;}
	30% {background: blue;}
	60% {background: blue;}
	100% {background: initial;}
}
<body>
<audio id="ad">
<source src = "pup.mp3" type="audio/mp3">
</audio>

<script type="text/javascript">
	var song = document.getElementById("ad");
	function togglePlay() {
	song.play();
	document.getElementByClassName("an").style.animationPlayState = "running"; //this is what I'm currently using in play button
}
	function togglePause() {
	song.pause();
	document.getElementByClassName("an").style.animationPlayState = "paused"; //this is for the pause button
}
</script>

<div class="bg"></div>
  <div class="bg-box">
    <img src="PUPLogo.png">
<p class="PUP">Polytechnic University of the Philippines</p>

<h1>PUP HYMN</h1>
<p class="lyrics">
<div class="l1 an">Sintang Paaralan</div>
<div class="l2 an">Tanglaw ka ng bayan</div>
<div class="l3 an">Pandayan ng isip ng kabataan</div>
<div class="l4 an">Kami ay dumating nang salat sa yaman<br></div>
<div class="l5 an">Hanap na dunong ay iyong alay<br></div>
<!--I cut the lyrics here to make it shorter-->

<input type="button" value="Play" onclick="togglePlay()" class="but" ></input>
<input type="button" value="Pause" onclick="togglePause()" class="but"></input>


</div>
</body>
</html>

Upvotes: 2

Views: 310

Answers (2)

לבני מלכה
לבני מלכה

Reputation: 16251

Use loop all of elemnt with class name an and set .style.animationPlayState to each one also use getElementsByClassName() to get all elements with class name an

var song = document.getElementById("ad");

	function togglePlay() {
	song.play();
	var items=document.getElementsByClassName("an");
  for (var i=0; i < items.length; i++) {
    items[i].style.animationPlayState = "running";
  }
}
	function togglePause() {
	song.pause();
  var items=document.getElementsByClassName("an");
  for (var i=0; i < items.length; i++) {
    items[i].style.animationPlayState = "paused";
  }
  }
.lyrics {
	font-weight: lighter;
	font-size: 1vw;
}

.l1.an {
	animation: tae 1s;
	animation-direction: alternate;
	animation-duration: 5s;
	animation-delay: 12s;
	
}

.l2.an {
	animation: tae 1s;
	animation-duration: 5s;
	animation-fill-mode: alternate;
	animation-delay: 15s;
	
}

.l3.an {
	animation: tae 1s;
	animation-duration: 8s;
	animation-fill-mode: alternate;
	animation-delay: 18s;
	
}

.l4.an {
	animation: tae 1s;
	animation-duration: 7s;
	animation-fill-mode: alternate;
	animation-delay: 24s;
	
}

.l5.an {
	animation: tae 1s;
	animation-duration: 8s;
	animation-fill-mode: alternate;
	animation-delay: 29s;
	
}


@keyframes tae {
	0% {background: initial;}
	30% {background: blue;}
	60% {background: blue;}
	100% {background: initial;}
}
<audio id="ad">
<source src = "pup.mp3" type="audio/mp3">
</audio>

<script type="text/javascript">

</script>

<div class="bg"></div>
  <div class="bg-box">
    <img src="PUPLogo.png">
<p class="PUP">Polytechnic University of the Philippines</p>

<h1>PUP HYMN</h1>
<p class="lyrics">
<div class="l1 an">Sintang Paaralan</div>
<div class="l2 an">Tanglaw ka ng bayan</div>
<div class="l3 an">Pandayan ng isip ng kabataan</div>
<div class="l4 an">Kami ay dumating nang salat sa yaman<br></div>
<div class="l5 an">Hanap na dunong ay iyong alay<br></div>
<!--I cut the lyrics here to make it shorter-->

<input type="button" value="Play" onclick="togglePlay()" class="but" />
<input type="button" value="Pause" onclick="togglePause()" class="but"/>


</div>

Upvotes: 1

Ali Sheikhpour
Ali Sheikhpour

Reputation: 11045

First there is type you need to use getElementsByClassName instead of getElementByClassName

The second note is that you have to loop through the elements when you select them by a class selector. So I wrote a loop on the elements with class "an":

var song = document.getElementById("ad");
	function togglePlay() {
	song.play();
	Array.from(document.getElementsByClassName("an")).forEach(
    function(element, index, array) {
       element.style.animationPlayState = "running";
    }
  )
  
  
}
function togglePause() {
	song.pause();
	Array.from(document.getElementsByClassName("an")).forEach(
   function(element, index, array) {
       element.style.animationPlayState = "paused";
    }
  )
}
.lyrics {
	font-weight: lighter;
	font-size: 1vw;
}

.l1.an {
	animation: tae 1s;
	animation-direction: alternate;
	animation-duration: 5s;
	animation-delay: 12s;
	
}

.l2.an {
	animation: tae 1s;
	animation-duration: 5s;
	animation-fill-mode: alternate;
	animation-delay: 15s;
	
}

.l3.an {
	animation: tae 1s;
	animation-duration: 8s;
	animation-fill-mode: alternate;
	animation-delay: 18s;
	
}

.l4.an {
	animation: tae 1s;
	animation-duration: 7s;
	animation-fill-mode: alternate;
	animation-delay: 24s;
	
}

.l5.an {
	animation: tae 1s;
	animation-duration: 8s;
	animation-fill-mode: alternate;
	animation-delay: 29s;
	
}


@keyframes tae {
	0% {background: initial;}
	30% {background: blue;}
	60% {background: blue;}
	100% {background: initial;}
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="css1.css">
<meta charset="utf-8" content="width=device-width, initial-scale=1.0">
<meta http-equiv="refresh" content="106">
<title>PUP HYMN</title>
</head>
<body>
<audio id="ad">
<source src = "pup.mp3" type="audio/mp3">
</audio>

<div class="bg"></div>
  <div class="bg-box">
    <img src="PUPLogo.png">
<p class="PUP">Polytechnic University of the Philippines</p>

<h1>PUP HYMN</h1>
<p class="lyrics">
<div class="l1 an">Sintang Paaralan</div>
<div class="l2 an">Tanglaw ka ng bayan</div>
<div class="l3 an">Pandayan ng isip ng kabataan</div>
<div class="l4 an">Kami ay dumating nang salat sa yaman<br></div>
<div class="l5 an">Hanap na dunong ay iyong alay<br></div>
<!--I cut the lyrics here to make it shorter-->

<input type="button" value="Play" onclick="togglePlay()" class="but" ></input>
<input type="button" value="Pause" onclick="togglePause()" class="but"></input>


</div>
</body>
</html>

Upvotes: 2

Related Questions