Всем привет! Опять проблемы с пианино :( Пишу приложение онлайн-пианино, вроде все сделала, кроме одного требования - при зажатии клавиши мыши на клавише, перемещаешь курсор на другие клавиши - играют другие ноты. Проблема с этим такая - перебор по клавишам работает, но не работает звук на той клавише, которую первой зажимаю. Если у кого-то есть минутка, можете глянь код? Понимаю, что где-то что-то лишнее написала, но не могу найти, что именно.
Вот js:
window.addEventListener("keydown", function (event) {
playSound(event.keyCode);
});
const piano = document.querySelector('.piano');
const pianoKeys = document.querySelectorAll('.piano-key');
const playSound = function (keyNumber) {
const audio = document.querySelector(`audio[data-key="${keyNumber}"]`);
const key = document.querySelector(`.piano-key[data-key="${keyNumber}"]`);
if (!audio) {
return;
}
audio.currentTime = 0;
audio.play();
key.classList.add('piano-key-active');
};
let removeTransition = function (event) {
if (event.propertyName !== 'transform') {
return;
}
this.classList.remove('piano-key-active');
};
pianoKeys.forEach(key => key.addEventListener('transitionend', removeTransition));
const clickPlaySound = function (event) {
const keyNumber = this.getAttribute("data-key");
playSound(keyNumber);
};
const buttons = document.querySelectorAll('.btn');
for (let button of buttons) {
button.addEventListener('click', function () {
if (this.classList.contains('btn-active')) return;
buttons.forEach(i => i.classList.remove('btn-active'));
this.classList.toggle('btn-active');
piano.classList.toggle('change-style');
});
}
const startCorrespondOver = (event) => {
event.target.classList.add('piano-key-active');
pianoKeys.forEach((key) => {
key.addEventListener('mouseover', clickPlaySound);
key.addEventListener('mouseout', removeTransition);
});
};
const stopCorrecpondOver = () => {
pianoKeys.forEach((key) => {
key.classList.remove('piano-key-active');
key.removeEventListener('mouseover', clickPlaySound);
key.removeEventListener('mouseout', removeTransition);
});
};
for (let i = 0; i < pianoKeys.length; i++) {
pianoKeys[i].addEventListener('mousedown', startCorrespondOver);
pianoKeys[i].addEventListener('mouseup', stopCorrecpondOver);
}