Я сделал клавиши фортепиано в SVG, и к каждому <rect>
подвязал событие oncklick()
, и при нажатии на определённую клавишу на клавиатруе меняется заполнение fill
на orange
вместо белого или чёрного цвета. Вся клавиатура работает но именно 6-ая клавиша не перекрашивается в оранжевый цвет, но звук воспроизвоит. При клике на другие клавиши со всех остальных клавиш снимается эффект нажатия (просто перекрашиваются в белый цвет).
Так при нажатии клавиши (не клике мышкой), JS мне постоянно выводит ошибку Cannot read property 'style' of undefined
хотя все стили применяются и функции работают!
var whiteNotes = document.querySelectorAll(".white"),
blackNotes = document.querySelectorAll(".black");
var audio = new Audio();
// White sounds
function Do() {
console.log("Do is pressed");
audio.src = "https://zvukipro.com/uploads/files/2019-05/1558418994_noty-do.mp3";
audio.currentTime += 0.4;
audio.autoplay = true;
}
function Re() {
console.log("Re is pressed");
audio.src = "https://zvukipro.com/uploads/files/2019-05/1558419037_re.mp3";
audio.currentTime += 0.7;
audio.autoplay = true;
}
function Mi() {
console.log("Mi is pressed");
audio.src = "https://zvukipro.com/uploads/files/2019-05/1558419435_mi.mp3";
audio.currentTime += 0.4;
audio.autoplay = true;
}
function Fa() {
console.log("Fa is pressed");
audio.src = "https://zvukipro.com/uploads/files/2019-05/1558419697_fa.mp3";
audio.currentTime += 0.45;
audio.autoplay = true;
}
function Sol() {
console.log("Sol is pressed");
audio.src = "https://zvukipro.com/uploads/files/2019-05/1558419752_sol.mp3";
audio.currentTime += 0.4;
audio.autoplay = true;
}
function La() {
console.log("La is pressed");
audio.src = "https://zvukipro.com/uploads/files/2019-05/1558419731_lja.mp3";
audio.currentTime += 0.5;
audio.autoplay = true;
}
function Si() {
console.log("Si is pressed");
audio.src = "https://zvukipro.com/uploads/files/2019-05/1558419778_si.mp3";
audio.currentTime += 0.45;
audio.autoplay = true;
}
// Black sounds
function DoSharp() {
console.log("Do(#), Re(♭) is pressed");
}
function ReSharp() {
console.log("Re#, Mi(♭) is pressed");
}
function FaSharp() {
console.log("Fa#, Sol(♭) is pressed");
}
function SolSharp() {
console.log("Sol#, La(♭) is pressed");
}
function LaSharp() {
console.log("La#, Si(♭) is pressed");
}
document.onkeydown = function (event) {
if (event.key == "a" || event.key == "A") {
Do();
for (let i = 0; i <= whiteNotes.length; i++) {
whiteNotes[i].style.cssText = "fill: white;";
blackNotes[i].style.cssText = "fill: black;";
whiteNotes[0].style.cssText = "fill: orange;";
}
} else if (event.key == "s" || event.key == "S") {
Re();
for (let i = 0; i <= whiteNotes.length; i++) {
whiteNotes[i].style.cssText = "fill: white;";
blackNotes[i].style.cssText = "fill: black;";
whiteNotes[1].style.cssText = "fill: orange;";
}
} else if (event.key == "d" || event.key == "D") {
Mi();
for (let i = 0; i <= whiteNotes.length; i++) {
whiteNotes[i].style.cssText = "fill: white;";
blackNotes[i].style.cssText = "fill: black;";
whiteNotes[2].style.cssText = "fill: orange;";
}
} else if (event.key == "f" || event.key == "F") {
Fa();
for (let i = 0; i <= whiteNotes.length; i++) {
whiteNotes[i].style.cssText = "fill: white;";
blackNotes[i].style.cssText = "fill: black;";
whiteNotes[3].style.cssText = "fill: orange;";
}
} else if (event.key == "g" || event.key == "G") {
Sol();
for (let i = 0; i <= whiteNotes.length; i++) {
whiteNotes[i].style.cssText = "fill: white;";
blackNotes[i].style.cssText = "fill: black;";
whiteNotes[4].style.cssText = "fill: orange;";
}
} else if (event.key == "h" || event.key == "H") {
La();
for (let i = 0; i <= whiteNotes.length; i++) {
whiteNotes[i].style.cssText = "fill: white;";
blackNotes[i].style.cssText = "fill: black;";
whiteNotes[5].style.cssText = "fill: orange;";
}
} else if (event.key == "j" || event.key == "J") {
Si();
for (let i = 0; i <= whiteNotes.length; i++) {
whiteNotes[i].style.cssText = "fill: white;";
blackNotes[i].style.cssText = "fill: black;";
whiteNotes[6].style.cssText = "fill: orange;";
}
} else if (event.key == "w" || event.key == "W") {
DoSharp();
for (let i = 0; i <= blackNotes.length; i++) {
blackNotes[i].style.cssText = "fill: black;";
blackNotes[0].style.cssText = "fill: orange;";
for(let i = 0; i <= whiteNotes.length; i++) {
whiteNotes[i].style.cssText = "fill: white;";
}
}
} else if (event.key == "e" || event.key == "E") {
ReSharp();
for (let i = 0; i <= blackNotes.length; i++) {
blackNotes[i].style.cssText = "fill: black;";
blackNotes[1].style.cssText = "fill: orange;";
for(let i = 0; i <= whiteNotes.length; i++) {
whiteNotes[i].style.cssText = "fill: white;";
}
}
} else if (event.key == "t" || event.key == "T") {
FaSharp();
for (let i = 0; i <= blackNotes.length; i++) {
blackNotes[i].style.cssText = "fill: black;";
blackNotes[2].style.cssText = "fill: orange;";
for(let i = 0; i <= whiteNotes.length; i++) {
whiteNotes[i].style.cssText = "fill: white;";
}
}
} else if (event.key == "y" || event.key == "Y") {
SolSharp();
for (let i = 0; i <= blackNotes.length; i++) {
blackNotes[i].style.cssText = "fill: black;";
blackNotes[3].style.cssText = "fill: orange;";
for(let i = 0; i <= whiteNotes.length; i++) {
whiteNotes[i].style.cssText = "fill: white;";
}
}
} else if (event.key == "u" || event.key == "U") {
LaSharp();
for (let i = 0; i <= blackNotes.length; i++) {
blackNotes[i].style.cssText = "fill: black;";
blackNotes[4].style.cssText = "fill: orange;";
for(let i = 0; i <= whiteNotes.length; i++) {
whiteNotes[i].style.cssText = "fill: white;";
}
}
} else {
for (let i = 0; i <= whiteNotes.length; i++) {
whiteNotes[i].style.cssText = "fill: white;";
}
for (let i = 0; i <= blackNotes.length; i++) {
blackNotes[i].style.cssText = "fill: black;";
}
}
}
.white {
fill: white;
stroke: black;
}
rect:active {
fill: orange !important;
stroke: black;
}
.small {
color: gray;
fill: gray;
font-size: 14px;
}
text {
pointer-events: none;
}
<svg width="1000px" height="120">
<!-- Белые клавиши -->
<rect id="Do" onclick="Do();" class="white" x="0" y="0" width="23" height="120"/>
<text x="5" y="105">A</text>
<rect id="Re" onclick="Re();" class="white" x="23" y="0" width="23" height="120"/>
<text x="30" y="105">S</text>
<rect id="Mi" onclick="Mi();" class="white" x="46" y="0" width="23" height="120"/>
<text x="52" y="105">D</text>
<rect id="Fa" onclick="Fa();" class="white" x="69" y="0" width="23" height="120"/>
<text x="76" y="105">F</text>
<rect id="Sol" onclick="Sol();" class="white" x="92" y="0" width="23" height="120"/>
<text x="99" y="105">G</text>
<rect id="La" onclick="La();" class="white" x="115" y="0" width="23" height="120"/>
<text x="122" y="105">H</text>
<rect id="Si" onclick="Si();" class="white" x="138" y="0" width="23" height="120"/>
<text x="145" y="105">J</text>
<!-- Чёрные клавиши (с наслойкой на белые) -->
<rect class="black" x="14.33333" y="0" width="13" height="80"/>
<text x="15" y="70" class="small">W</text>
<rect class="black" x="41.66666" y="0" width="13" height="80"/>
<text x="44" y="70" class="small">E</text>
<rect class="black" x="82.25" y="0" width="13" height="80"/>
<text x="84.5" y="70" class="small">T</text>
<rect class="black" x="108.25" y="0" width="13" height="80"/>
<text x="109.5" y="70" class="small">Y</text>
<rect class="black" x="134.75" y="0" width="13" height="80"/>
<text x="136" y="70" class="small">U</text>
</svg>
Можете посмотреть на Codepen