Изменить свойство CSS после завершения воспроизведения звука - PullRequest
Новая
       0

Изменить свойство CSS после завершения воспроизведения звука

0 голосов
/ 08 октября 2018

Я нахожусь в процессе создания альтернативного веб-приложения для настройки, которое поддерживает альтернативные настройки для клавиатуры!В любом случае, я пытаюсь заставить CSS измениться, когда закончится воспроизведение звука.Я пытаюсь создать функцию, которая проверяет, воспроизводится ли звук, и если нет, измените CSS, чтобы не было тени.В идеале, через 30 секунд звук останавливается, и клавиша возвращается в стиль «без нажатия».

с функцией подсветки клавиш, я попробовал ...

if (audio1.currentTime == 29) {

if (audio1.currentTime == 30) {

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

Ответы [ 2 ]

0 голосов
/ 08 октября 2018

Просто добавьте событие .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>
0 голосов
/ 08 октября 2018

Вы можете использовать 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...