UPD - лучше блокиратор букв на клавиатуре!
Чем во втором случае - Piano Keys. Там при нажатии на букву на клавише - просто не реагирует и не играет.
В сети слегка подтормаживают оба с реакцией на нажатие.
Тестилось на компах и на Андроиде.
Код блокирующий буквы наклавиатуре в Javascript Piano работает корректно. Надо будет обратить внимание.
UPD
1 - внесла изменения в CSS:
убрала блок кода, претендовавший блокировать от возможности выбрать буквы на клавишах, а по сути - это блокировало не только букву, но и клавишу вообще.
вот этот кусок говна, делающий объект не выбираемым, но при этом и НЕ кликабельным :
.disable-select {
cursor: pointer;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}Нашла классы, относящиеся к буквам на черных и белых клавищах в CSS.
Они были представлены как блоки, что и громоздило вокруг них лишнее невидимое пространство, на которое натыкалась мышь, и большая область вокруг буквы становилась не кликабельной, благодаря коду (удаленному), указанному выше.
Другой способ блокировки был прописан каждому классу включающих буквы клавиш:
.keynote, .black-keynote{
pointer-events: none; // чтоб не реагировал на события клика мыши например
//на себе самом. То есть буква не выбирается.
//Но клавиша на которой буква написана - да!
//в то время как верхний код блокировал все и клавишу под буквой тоже
position: absolute; // так как буквы более не блочные элементы, абсолютная аозиция убирает лишнее пространство вокруг буквы.. Хотя думаю теперь, при новом коде pointer-events: none -- вообще не имеет значения были буквы блоками или нет. Но раз взялась убирать лишнее...
(это код урока, то есть базовый код, для упражнения с событиями DOM JS. Звука у пиано не было изначально. Поэтому код был таким как был. Не в нем суть, он просто создавал нам пример.. с которым мы работали дальше.
}
2 - в index.html
убрала класс disable-select на <section class="piano">
Так как более он в CSS файле не используется.
Теперь можно вносить изменения в файлы проекта на GitHub!!
