Virtuele piano

Een piano in je browser

Deze virtuele piano geeft je een bespeelbaar klavier van twee octaven en een terts — 29 toetsen van C tot E — rechtstreeks in je browser. Je kunt hem bespelen met een muis, met een of meer vingers op een touchscreen of met je computertoetsenbord, waarbij elke toets op het scherm het bijbehorende sneltoetslabel toont. Handig om een melodie uit je hoofd te controleren, de beginnoot van een liedje te vinden, akkoorden uit te zoeken, eenvoudige stukjes te oefenen als je geen echt instrument bij de hand hebt, of gewoon voor de lol.

De octaafknoppen verschuiven het hele klavier twaalf halve tonen omhoog of omlaag, zodat het totale bereik loopt van C1 tot E7. Het huidige bereik staat tussen de knoppen, en de C-toetsen zijn gelabeld met hun octaafnummer (de centrale C is C4). De sustain-schakelaar werkt als het rechterpedaal van een akoestische piano, zodat noten doorklinken en elkaar overlappen, en met de volumeschuif stel je het algemene niveau in.

Hoe het geluid wordt gemaakt

Er wordt niets gedownload of gestreamd: elke noot wordt ter plekke gesynthetiseerd met de Web Audio API. Een driehoeksgolf-oscillator vormt de kern van de klank en een zachtere sinusgolf een octaaf hoger voegt helderheid toe. Een volume-envelop geeft elke noot een snelle aanslag gevolgd door een geleidelijk uitsterven, vergelijkbaar met een aangeslagen snaar, en een compressor op de uitgang voorkomt dat grote akkoorden vervormen. Omdat de geluidsengine pas wordt aangemaakt wanneer je de eerste toets indrukt, blijft de pagina licht en voldoet ze aan de autoplay-regels van browsers.

Spelen met het computertoetsenbord

De indeling volgt die van een piano: de onderste letterrij (Z tot M) vormt de witte toetsen van het lagere octaaf en de rij daarboven (S, D, G, H, J) levert de zwarte toetsen. De bovenste letterrij van Q tot U is het volgende octaaf, met de cijfertoetsen 2, 3, 5, 6 en 7 als kruisen en mollen, terwijl I, 9, O, 0 en P tot de top van het klavier reiken. Toetsen worden herkend aan hun fysieke positie, dus de indeling werkt hetzelfde op QWERTY-, AZERTY- en QWERTZ-toetsenborden. Houd meerdere toetsen tegelijk ingedrukt om akkoorden te spelen.