И добавляется, и удаляется...
<style>
body {
background-image: url(https://javascript.ru/forum/images/ca_serenity/misc/logo.gif);
background-size: cover;
background-repeat: no-repeat;
}
.main-background {
height: 100vh;
position: relative;
}
.key-box {
height: 60px;
position: absolute;
top: 50%;
width: 100%;
text-align: center;
margin-top: -30px;
}
.key {
width: 75px;
height: 60px;
display: inline-block;
margin-left: 20px;
border: 2px solid rgba(#000, .8);
border-radius: 3px;
box-shadow: 1px 1px 1px rgba(0,0,0,0.5);
background-color: rgba(#0E202C, .5);
cursor: pointer;
}
.active {
border-color: #ffc668;
-ms-transform:scale(1.2));
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
-moz-transform: scale(1.2);
transform: scale(1.2);
transition: all .25s ease;
-webkit-transition: all .25s ease;
-o-transition: all .25s ease;
-moz-transition: all .25s ease;
box-shadow: 0 0 8px #ffc668;
}
kbd {
padding-top: 12px
line-height: 18px
font-size: 18px
color: #fff
display: block
margin: 0 auto
text-align: center
}
span {
margin: 0 auto
color: #F9BB3B
}
&:first-child {
margin-left: 0
}
.section-overlay::before {
content: ""
position: absolute
top: 0
left: 0
width: 100%
height: 100%
background-color: #0E202C
opacity: .4
}
</style>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="main-background section-overlay">
<div class="key-box">
<div data-key="65" class="key">
<kbd>A</kbd><span>clap</span>
</div>
<div data-key="83" class="key">
<kbd>S</kbd><span>hihat</span>
</div>
<div data-key="68" class="key">
<kbd>D</kbd><span>kick</span>
</div>
<div data-key="70" class="key">
<kbd>F</kbd><span>openhat</span>
</div>
<div data-key="71" class="key">
<kbd>G</kbd><span>boom</span>
</div>
<div data-key="72" class="key">
<kbd>H</kbd><span>ride</span>
</div>
<div data-key="74" class="key">
<kbd>J</kbd><span>snare</span>
</div>
<div data-key="75" class="key">
<kbd>K</kbd><span>tom</span>
</div>
<div data-key="76" class="key">
<kbd>L</kbd><span>tink</span>
</div>
</div>
</div>
</div>
</div>
</div>
<audio data-key = "65" src="sounds/Kit 18 - Acoustic/CYCdh_K6-ClHat.wav"></audio>
<audio data-key = "83" src="sounds/Kit 18 - Acoustic/CYCdh_K6-Kick01.wav"></audio>
<audio data-key = "68" src="sounds/Kit 18 - Acoustic/CYCdh_K6-OpHat01.wav"></audio>
<audio data-key = "70" src="sounds/Kit 18 - Acoustic/CYCdh_K6-OpHat02.wav"></audio>
<audio data-key = "71" src="sounds/Kit 18 - Acoustic/CYCdh_K6-Snr01.wav"></audio>
<audio data-key = "72" src="sounds/Kit 18 - Acoustic/CYCdh_K6-Snr02.wav"></audio>
<audio data-key = "74" src="sounds/Kit 18 - Acoustic/CYCdh_K6-Snr03.wav"></audio>
<audio data-key = "75" src="sounds/Kit 18 - Acoustic/CYCdh_K6-Snr04.wav"></audio>
<audio data-key = "76" src="sounds/Kit 18 - Acoustic/CYCdh_K6-SnrBuzz.wav"></audio>
</div>
<script>
function makeSound(e) {
var code = e.keyCode ? e.keyCode : this.getAttribute("data-key");
var activeKey = document.querySelector('.key[data-key="'+code+'"]');
// var activeAudio = document.querySelector('audio[data-key="'+code+'"]');
// if (!activeAudio) return;
// activeAudio.currentTime = 0;
// activeAudio.play();
activeKey.classList.add('active');
}
window.addEventListener('keydown', makeSound); //(1)
var allKeys = document.querySelectorAll(".key");
allKeys.forEach(function (key) {
key.addEventListener('click', makeSound);
})
allKeys.forEach(function (key) { //(2)
key.addEventListener('transitionend', function (e) {
if(e.propertyName !== 'transform') return;
this.classList.remove("active");
});
});
</script>
</body>