我正在创建一个备用调音Web应用程序，该应用程序支持键盘的其他调音!无论如何，我正在尝试在音频播放完毕后更改CSS。我正在尝试创建一个检查音频是否正在播放的函数，如果没有，请更改CSS以使其没有阴影。理想情况下，在30秒钟后，音频将停止并且琴键恢复为“未按下”风格。
使用按键功能，我尝试过...
如果(audio1.currentTime == 29){
如果(audio1.currentTime == 30){
如果(audio1.currentTime == 0){
如果(audio1.playing){
在完整的代码中，我有十二个键，但这是其中之一:
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:black;}
#play432 {
background-color:#ff4b00;
}
.key {
color:white;
border-radius: 5px;
border:1px solid white;
padding: 15px;
margin: -1px 75% 0% 0%;
text-align: center;
transition: all .1s;
}
</style>
<script>
function play432() {
var audio = document.getElementById('audioA');
var key = document.getElementById("play432");
if (audio.paused) {
audio.play();
key.style.boxShadow = "inset 3px 3px 5px rgba(0,0,0,.5)";
key.style.textShadow = "3px 3px 5px rgba(0,0,0,.5)";
}
else {
audio.pause();
audio.currentTime = 0;
key.style.boxShadow = "inset 0px 0px 0px rgba(0,0,0,0)";
key.style.textShadow = "0px 0px 0px rgba(0,0,0,.5)";
}
}
function keylight () {
var audio1 = document.getElementById('audioA');
var key8 = document.getElementById('play432');
if (audio1.currentTime == 0) {
key8.style.boxShadow = "inset 0px 0px 0px rgba(0,0,0,0)";
key8.style.textShadow = "0px 0px 0px rgba(0,0,0,.5)";
}
else{
key8.style.boxShadow = "inset 3px 3px 5px rgba(0,0,0,.5)";
key8.style.textShadow = "3px 3px 5px rgba(0,0,0,.5)";
}
}
</script>
</head>
<body onload="setInterval(keylight(),1000)">
<h3 style="color:white;">Perfect 5th Interval Scale</h3>
<audio src="https://webdevgeometrics.com/wp-content/uploads/2018/09/432hz.ogg" id="audioA"></audio>
<div id="play432" onclick="play432()" class="key">A 432 Hz</div>
</body>
</html>最佳答案
您可以使用 HTMLMediaElement.paused 属性来检查媒体是否已暂停
if (audio1.paused) {
key8.style.boxShadow = "inset 0px 0px 0px rgba(0,0,0,0)";
key8.style.textShadow = "0px 0px 0px rgba(0,0,0,.5)";
}
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:black;}
#play432 {
background-color:#ff4b00;
}
.key {
color:white;
border-radius: 5px;
border:1px solid white;
padding: 15px;
margin: -1px 75% 0% 0%;
text-align: center;
transition: all .1s;
}
</style>
<script>
function play432() {
var audio = document.getElementById('audioA');
var key = document.getElementById("play432");
if (audio.paused) {
audio.play();
key.style.boxShadow = "inset 3px 3px 5px rgba(0,0,0,.5)";
key.style.textShadow = "3px 3px 5px rgba(0,0,0,.5)";
}
else {
audio.pause();
audio.currentTime = 0;
key.style.boxShadow = "inset 0px 0px 0px rgba(0,0,0,0)";
key.style.textShadow = "0px 0px 0px rgba(0,0,0,.5)";
}
}
function keylight () {
var audio1 = document.getElementById('audioA');
var key8 = document.getElementById('play432');
if (audio1.paused) {
key8.style.boxShadow = "inset 0px 0px 0px rgba(0,0,0,0)";
key8.style.textShadow = "0px 0px 0px rgba(0,0,0,.5)";
}
else{
key8.style.boxShadow = "inset 3px 3px 5px rgba(0,0,0,.5)";
key8.style.textShadow = "3px 3px 5px rgba(0,0,0,.5)";
}
}
</script>
</head>
<body onload="setInterval(keylight,1000)">
<h3 style="color:white;">Perfect 5th Interval Scale</h3>
<audio src="https://webdevgeometrics.com/wp-content/uploads/2018/09/432hz.ogg" id="audioA"></audio>
<div id="play432" onclick="play432()" class="key">A 432 Hz</div>
</body>
</html>关于javascript - 播放完音频后更改CSS属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52706854/