Virtual piano project 🎹

Описание:

• при клике по клавише пианино мышкой проигрывается соответствующая этой клавише нота;
• при клике по клавише пианино мышкой клавиша переходит в активное состояние;
• при клике по клавише клавиатуры, которая соответствует клавише пианино, проигрывается нота;
• при клике по клавише клавиатуры, которая соответствует клавише пианино, клавиша пианино переходит в активное состояние;
• можно провести курсором мышки с зажатой левой кнопкой по клавишам пианино, при этом будут проигрываться соответствующие данным клавишам ноты;
• можно провести курсором мышки с зажатой левой кнопкой по клавишам пианино, при этом клавиши, над которыми в данный момент находится курсор, переходят в активное состояние;
• активное состояние клавиш пианино и соответствующих им букв или нот по стилю отличается от и неактивного состояния и состояния при наведении;
• при клике по переключателю Notes/Letters сменяется отображение возле клавиш пианино названий соответствующих этим клавишам нот или букв;
• активное и неактивное состояние кнопок переключателя отличаются по стилю;
• реализована функциональность кнопки Fullscreen, которая позволяет развернуть приложение во весь экран, выйти из полноэкранного режима, в полноэкранном режиме взаимодействует с клавишей Esc клавиатуры;
• имеется возможность смены типа звучания пианино.

Ссылки

• 📌 Demo: https://daniel-ki-virtual-piano.netlify.app/
• 📌 Video review: https://www.youtube.com/watch?v=8muLcpnzAH4