Вот полный код
<!DOCTYPE html>
<html>
<head>
<title>My drums</title>
<style>
.container {
background-color: green;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.button {
background-color: aqua;
border: 5px solid black;
padding: 1rem 3rem;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.button.selected {
transform: scale(1.2);
border-color: yellow;
}
</style>
</head>
<body>
<div class='container'>
</div>
<script>
const buttons = [
{ letter: 'A', effect: 'CLAP', key:'KeyA', audio: 'clap' },
{ letter: 'S', effect: 'HIHAT', key:'KeyS', audio: 'hihat' },
{ letter: 'D', effect: 'KICK', key:'KeyD', audio: 'boom'},
{ letter: 'F', effect: 'OPENHAT', key:'KeyF', audio: 'kick' },
{ letter: 'G', effect: 'BOOM', key:'KeyG', audio: 'openhat' },
{ letter: 'H', effect: 'RIDE', key:'KeyH', audio: 'ride' },
{ letter: 'J', effect: 'SNARE', key:'KeyJ', audio: 'snare' },
{ letter: 'K', effect: 'TOM', key:'KeyK', audio: 'tink'},
{ letter: 'L', effect: 'TIM', key:'KeyL', audio: 'tom' }
];
let container = '';
buttons.forEach(item => {
container += `
<div class="button" data-key=${item['key']}>
<h3>${item['letter']}</h3>
<p>${item['effect']}</p>
</div>
<audio src="sounds/${item['audio']}.wav" data-key=${item['key']}></audio>
`;
});
document.querySelector('.container').innerHTML = container;
window.addEventListener('keydown', e => {
const audio = document.querySelector(`div[data-key="${e.code}"]`);
if (!audio) return;
audio.className += ' selected';
playable = document.querySelector(`audio[data-key="${e.code}"]`);
if (playable) playable.play();
});
window.addEventListener('keyup', e => {
const audio = document.querySelector(`div[data-key="${e.code}"]`);
if (!audio) return;
audio.className = 'button';
})
</script>
</body>
</html>
Каждый раз, когда я нажимаю клавишу, воспроизводится соответствующий звук. Пока все хорошо, но когда я снова нажимаю другую клавишу или ту же клавишу, этот звук не включается, пока не закончится предыдущий. Я хочу, чтобы он воспроизводил звук с самого начала, когда я снова нажимаю кнопку или другую кнопку. Только когда я нажимаю другую кнопку, предыдущий звук должен остановиться, и начнется новый звук, соответствующий нажатию клавиши. Как мне это реализовать?
Я пробовал делать sound.pause() на keyup, но он немедленно отключает звук, когда я отпускаю клавишу. Я не хочу этого.