Question

我正在制作一个在按下“播放”按钮时播放我们学校颂歌的网站，并在按下“暂停”时暂停。旁边还有歌词的突出动画“每行”。但是，我无法全局暂停动画。我想暂停音频和CSS动画，但是只有音频才是实际暂停的音频，因此当我单击“播放”按钮时，歌词高亮显示和音频不再同步。

我尝试过在CSS中使用animation-play-state进行播放，但是都没有效果很好

如果代码很长，很抱歉，因为我做了“每行”歌词，但是我想做的是暂停任何动画，以便每当我恢复它时它仍与音频保持同步。

.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>

Answer 1

首先，您需要使用 getElementsByClassName 而不是 getElementByClassName

第二个注意事项是，当通过类选择器选择元素时，必须遍历元素。所以我在类“ 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>

Answer 2

使用循环遍历类名称为an的所有元素，并将.style.animationPlayState设置为每个还使用getElementsByClassName()获取所有具有类名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>

如何暂停所有CSS动画并在需要时继续播放

2 个答案: