Question

我正在创建一个备用调音Web应用程序，该应用程序支持键盘的其他调音！无论如何，我正在尝试在音频播放完毕后更改CSS。我正在尝试创建一个检查音频是否正在播放的函数，如果没有，则将CSS更改为没有阴影。理想情况下，在30秒后，音频将停止并且琴键恢复为“未按下”风格。

使用键灯功能，我已经尝试过...

if（audio1.currentTime == 29）{

if（audio1.currentTime == 30）{

如果（audio1.currentTime == 0）{

if（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>

Answer 1

您可以使用 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>

Answer 2

只需添加一个.onpause事件：

以下功能可在音乐暂停或播放完毕后删除阴影。

   
   var audio = document.getElementById('audioA');
   var key = document.getElementById("play432");
   
   
   function 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)";
            }
        }
     
     
     audio.onpause = function() {
        key.style.boxShadow = "inset 0px 0px 0px rgba(0,0,0,0)";
            key.style.textShadow = "0px 0px 0px rgba(0,0,0,.5)";
     };

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;
}

<!DOCTYPE html>
<html>
<head>
</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>

播放完音频后更改CSS属性

2 个答案: