Пианино онлайн на клавиатуре

html { background: #000; font-family: 'Noto Serif', serif; -webkit-font-smoothing: antialiased; }

video#bgvid { position: fixed; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; transform: translateX(-50%) translateY(-50%); background-size: cover; } header { position: relative; margin: 30px 0; }

header:after { content: ''; width: 460px; height: 15px; display: inline-block; text-align: center; background-size: 70%; }

h1 { color: #fff; font-size: 50px; font-weight: 400; letter-spacing: 0.18em; margin: 0; } .key { text-align: center; } h2 { color: #fff; font-size: 24px; font-style: italic; font-weight: 400; margin: 0 0 30px; }

.nowplaying { font-size: 120px; line-height: 1; color: #000; text-shadow: 0 0 5rem #ffd224; transition: all .07s ease; text-align:center; /*min-height: 120px;*/ }

.keys { display: block; width: 100%; height: 350px; max-width: 880px; position: relative; margin: 40px auto 0; cursor: none; }

.key { position: relative; border: 4px solid black; border-radius: .5rem; transition: all .07s ease; display: block; box-sizing: border-box; z-index: 2; }

.key:not(.sharp) { float: left; width: 10%; height: 100%; background: rgba(255, 255, 255, .8); }

.key.sharp { position: absolute; width: 6%; height: 60%; background: #000; color: #eee; top: 0; z-index: 3; }

.key[data-key="87"] { left: 7%; }

.key[data-key="69"] { left: 17%; }

.key[data-key="84"] { left: 37%; }

.key[data-key="89"] { left: 47%; }

.key[data-key="85"] { left: 57%; }

.key[data-key="79"] { left: 77%; }

.key[data-key="80"] { left: 87%; }

.playing { transform: scale(.95); border-color: #028ae9; box-shadow: 0 0 1rem #028ae9; }

.hints { display: block; width: 100%; opacity: 0; position: absolute; bottom: 7px; transition: opacity .3s ease-out; font-size: 20px; }

.keys:hover .hints { opacity: 1; } A W S E D F T G Y H U J K O L P ;

const keys = document.querySelectorAll(".key"), note = document.querySelector(".nowplaying"), hints = document.querySelectorAll(".hints");

function playNote(e) { const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`), key = document.querySelector(`.key[data-key="${e.keyCode}"]`);

if (!key) return;

const keyNote = key.getAttribute("data-note");

key.classList.add("playing"); note.innerHTML = keyNote; audio.currentTime = 0; audio.play(); }

function removeTransition(e) { if (e.propertyName !== "transform") return; this.classList.remove("playing"); }

function hintsOn(e, index) { e.setAttribute("style", "transition-delay:" + index * 50 + "ms"); }

hints.forEach(hintsOn);

keys.forEach(key => key.addEventListener("transitionend", removeTransition));

window.addEventListener("keydown", playNote);

Это простое но удобное пианино онлайн на клавиатуре. Играть на нем можно с помощью обычной клавиатуры. Наведите мышку на область пианино и вы узнаете, какие клавиши можно использовать при игре, а также название нот.

Пианино онлайн может быть полезно для наглядной демонстрации клавиатуры фортепиано в условиях отсутствия инструмента, для интонирования нот, настройки музыкальных инструментов, и просто для музицирования.