Virtual Piano Keyboard | Online Piano at Apronus.com (2024)

"; var popup = window.open('','','width='+width+',height='+height); popup.document.write(doc);}function playsfromga(){ var i = octaveselector.selectedIndex + 1; var label = 'C'+i+'-C'+(i+2); galog( 'Plays-from', label);}function meloga(){ var label, i = melochords.selectedIndex; switch(i) { case 0 : label = 'single'; break; case 1 : label = 'major'; break; case 2 : label = 'minor'; break; default: label = ''; } galog( 'Melochords', label);}function labelboxstyle(){var st = 'label:hover { background: #f7f7f7; }\n';st += 'label { background: #efefef; } \n';st += 'label:hover { cursor: pointer; }\n';st += 'label { display: inline-block; padding: 0.25em; margin: 0.25em; border: 1px solid #888; border-radius: 0.5em; }\n';st += '@keyframes redblink-frames { 0% { box-shadow: 0 0 0 0px rgba(255, 0, 0, 1); } 100% { box-shadow: 0 0 0 0.1em rgba(255, 0, 0, 0.2); } } \n';st += '.redblink { animation: redblink-frames 1s infinite; } \n';var style = newel('style');style.appendChild(document.createTextNode(st));return style;}function sustainbox(){ var ss = document.createElement('input'); ss.id = 'susbox'; ss.setAttribute("type", "checkbox"); ss.checked = true; ss.setAttribute('checked','checked'); ss.setAttribute('onchange','galog("sustain","sustain");'); var aa = document.createElement('label'); aa.appendChild(ss); aa.innerHTML += 'sustain'; return aa;}// there is a more recent belowpanel() functionfunction advancedpanel(a,b){ var chordpanel = document.createElement('fieldset'); chordpanel.style.display = 'inline-block'; chordpanel.style.border = 'none'; chordpanel.style.margin = '0.5em'; chordpanel.style.padding = '0'; var rechord = document.createElement('input'); rechord.type = 'checkbox'; rechord.id = 'rechord'; rechord.setAttribute('onchange','rechordonchange();'); chordpanel.appendChild(rechord); var CHORD = document.createElement('span'); CHORD.id = 'CHORDtext'; CHORD.innerHTML = 'CHORD'; chordpanel.appendChild(CHORD); var memorybuttons = document.createElement('div'); memorybuttons.style.display = 'none'; memorybuttons.id = 'memorybuttons'; memorybuttons.style.marginTop = '0.5em'; memorybuttons.style.position = 'relative'; memorybuttons.style.resize = 'both'; memorybuttons.style.overflow = 'auto'; memorybuttons.style.border = '1px dotted darkgray'; memorybuttons.style.minHeight = '7em'; memorybuttons.innerHTML = 'tick the CHORD and RECORD checkboxes on and off
to create chord buttons and playback buttons here'; memorybuttons.setAttribute('ondrop',"drop(event)"); memorybuttons.setAttribute('ondragover',"allowDrop(event)"); memorybuttons.setAttribute('ontouchstart','preventZoom(event);'); memorybuttons.setAttribute('ontouchmove', 'event.preventDefault();'); var recordedsounds = document.createElement('textarea'); recordedsounds.id = 'recordedsounds'; recordedsounds.style.display = 'none'; var advbuttons = document.createElement('div'); advbuttons.style.textAlign = 'center'; advbuttons.appendChild(chordpanel); advbuttons.appendChild(recordpanel()); advbuttons.appendChild(savechordsform()); advbuttons.appendChild(loadchordsbutton()); advbuttons.appendChild(popupbutton()); var adv = document.createElement('div'); adv.id = 'advanced'; adv.style.display = 'none'; adv.appendChild(advbuttons); adv.appendChild(memorybuttons); adv.appendChild(recordedsounds); applynoselect(adv); return adv; }function triggerbutton(button,onaction){ var obaton = document.createElement('div'); obaton.appendChild(button.cloneNode()); var buttonhtml = obaton.innerHTML; var rex = new RegExp(onaction+'="[^"]+'); var r = rex.exec(buttonhtml)[0]; r = r.substr(onaction.length+2); r = r.replace(/"/g,'"'); r = r.replace('-click','-keypress'); eval(r);}function userkeydownup(k,downup){ var keysensors = document.querySelectorAll(".ks"); if (keysensors.length == 0) return true; for (var i=0; i 0) el('octaveselector').selectedIndex = i-1;octaves_selector_onchange();return false;}if (e.code === 'ArrowRight'){const i = el('octaveselector').selectedIndex;if (i < 5) el('octaveselector').selectedIndex = i+1;octaves_selector_onchange();return false;}gakeypress(e.code);const sounds = uiget_layout()?.[e.code] ?? [];for (const sound of sounds) press(sound);return false;}function keyup(e){if (document.activeElement.nodeName === 'TEXTAREA') return;if (document.activeElement.nodeName === 'INPUT'){if (document.activeElement.type !== 'checkbox') return;document.activeElement.blur(); }if (!userkeydownup(e.keyCode,'up')) return false;const sounds = uiget_layout()?.[e.code] ?? [];for (const sound of sounds) unpress(sound);return false;}var keyCodes = { 3 : "break", 8 : "backspace", 9 : "tab", 12 : 'clear', 13 : "enter", 16 : "shift", 17 : "ctrl", 18 : "alt", 19 : "pause/break", 20 : "caps lock", 27 : "escape", 32 : "spacebar", 33 : "page up", 34 : "page down", 35 : "end", 36 : "home", 37 : "left arrow", 38 : "up arrow", 39 : "right arrow", 40 : "down arrow", 41 : "select", 42 : "print", 43 : "execute", 44 : "Print Screen", 45 : "insert", 46 : "delete", 48 : "0", 49 : "1", 50 : "2", 51 : "3", 52 : "4", 53 : "5", 54 : "6", 55 : "7", 56 : "8", 57 : "9", 58 : ":", 59 : "semicolon (firefox), equals", 60 : "<", 61 : "equals (firefox)", 63 : "ß", 64 : "@ (firefox)", 65 : "a", 66 : "b", 67 : "c", 68 : "d", 69 : "e", 70 : "f", 71 : "g", 72 : "h", 73 : "i", 74 : "j", 75 : "k", 76 : "l", 77 : "m", 78 : "n", 79 : "o", 80 : "p", 81 : "q", 82 : "r", 83 : "s", 84 : "t", 85 : "u", 86 : "v", 87 : "w", 88 : "x", 89 : "y", 90 : "z", 91 : "Windows Key / Left ? / Chromebook Search key", 92 : "right window key ", 93 : "Windows Menu / Right ?", 96 : "numpad 0", 97 : "numpad 1", 98 : "numpad 2", 99 : "numpad 3", 100 : "numpad 4", 101 : "numpad 5", 102 : "numpad 6", 103 : "numpad 7", 104 : "numpad 8", 105 : "numpad 9", 106 : "multiply", 107 : "add", 108 : "numpad period (firefox)", 109 : "subtract ", 110 : "decimal point", 111 : "divide ", 112 : "F1", 113 : "F2", 114 : "F3", 115 : "F4", 116 : "F5", 117 : "F6", 118 : "F7", 119 : "F8", 120 : "F9", 121 : "F10", 122 : "F11", 123 : "F12", 124 : "F13", 125 : "F14", 126 : "F15", 127 : "F16", 128 : "F17", 129 : "F18", 130 : "F19", 131 : "F20", 132 : "F21", 133 : "F22", 134 : "F23", 135 : "F24", 144 : "num lock", 145 : "scroll lock", 160 : "^", 161: '!', 163 : "#", 164: '$', 165: 'u', 166 : "page backward", 167 : "page forward", 169 : "closing paren (AZERTY)", 170: '*', 171 : "~ + * key", 173 : "minus (firefox), mute/unmute", 174 : "decrease volume level", 175 : "increase volume level", 176 : "next", 177 : "previous", 178 : "stop", 179 : "play/pause", 180 : "e-mail", 181 : "mute/unmute (firefox)", 182 : "decrease volume level (firefox)", 183 : "increase volume level (firefox)", 186 : "semi-colon", 187 : "equal sign", 188 : "comma", 189 : "dash", 190 : "period", 191 : "forward slash", 192 : "grave accent", 193 : "?, / or °", 194 : "numpad period (chrome)", 219 : "open bracket", 220 : "back slash", 221 : "close bracket", 222 : "single quote", 223 : "`", 224 : "left or right ? key (firefox)", 225 : "altgr", 226 : "><|", 230 : "GNOME Compose Key", 231 : "ç", 233 : "XF86Forward", 234 : "XF86Back", 255 : "toggle touchpad"};function savechordsform(){ var form = document.createElement('form'); form.action = urlprefix + 'download.php'; form.method = 'post'; form.target = '_blank'; form.style.display = 'inline-block'; var txt = document.createElement('textarea'); txt.id = 'chordstextarea'; txt.name = 'outputarea'; txt.style.display = 'none'; form.appendChild(txt); var button = document.createElement('button'); button.id = 'savebutton'; button.className = 'przycisk'; button.innerHTML = 'save'; button.disabled = true; button.setAttribute('onclick','galog("save","save");document.getElementById("chordstextarea").value=document.getElementById("memorybuttons").innerHTML;return true;'); form.appendChild(button); return form;}function loadchordsbutton(){ var loadspan = document.createElement('span'); loadspan.id = 'loadtext'; loadspan.innerHTML = 'load'; var labaton = document.createElement('label'); labaton.for = 'loadchordsinput'; labaton.appendChild(loadspan); labaton.className = 'przycisk'; var load = document.createElement('input'); load.id = 'loadchordsinput'; load.type = 'file'; load.size = '1'; load.style.display = 'none'; load.addEventListener('change', readChordsFile, false); labaton.appendChild(load); return labaton;}function readChordsFile(evt){ var f = evt.target.files[0]; if (f) { var r = new FileReader(); r.onload = function(e) { document.getElementById('memorybuttons').innerHTML = e.target.result; el('memorybuttons').style.display = 'block'; logload(); } r.readAsText(f); } else { galog('load','failed'); alert("Failed to load file"); }}function logload(){ galog("load","load"); }function allowDrop(ev) { ev.preventDefault(); }function drag(ev){ ev.dataTransfer.setData("text", ev.target.id);}function drop(ev){ ev.preventDefault(); var data = ev.dataTransfer.getData("text"); var co = document.getElementById(data); var viewportOffset = memorybuttons.getBoundingClientRect(); var top = viewportOffset.top; var left = viewportOffset.left; var width = co.clientWidth; var height = co.clientHeight; co.style.position = 'absolute'; co.style.left = ev.clientX - width/2 - left + 'px'; co.style.top = ev.clientY - height/2 - top + 'px'; var a = co.id; a = a.substr(0,a.length-7); if (a.charAt(a.length-1)=='c') // chord button { a = document.getElementById(a+'button'); triggerbutton(a,'mouseup'); } gadrop();}var iledrop = 0;function gadrop(){ if (threshold(++iledrop)) galog( 'Dragdrop', 'dragdrop-'+iledrop );}var singlenote = 0;var Arow = 0;var Zrow = 0;function gakeypress(k){ if ((k==9) || (k==49) || (k==81) || (k==50) || (k==87) || (k==69) || (k==52) || (k==82) || (k==53) || (k==84) || (k==54) || (k==89) || (k==85) || (k==56) || (k==73) || (k==57) || (k==79) || (k==80) || (k==189 || k==173) || (k==219) || (k==187 || k==61) || (k==221) || (k==8) || (k==13) || (k==220)) { if (threshold(++singlenote)) galog( 'Keypress', 'keypress-single-'+singlenote ); return; } if ((k==20) || (k==65) || (k==83) || (k==68) || (k==70) || (k==71) || (k==72) || (k==74) || (k==75) || (k==76) || (k==186 || k==59) || (k==222)) { if (threshold(++Arow)) galog( 'Keypress', 'keypress-Arow-'+Arow); return; } if ((k==16 || k==226) || (k==90) || (k==88) || (k==67) || (k==86) || (k==66) || (k==78) || (k==77) || (k==188) || (k==190) || (k==191)) { if (threshold(++Zrow)) galog( 'Keypress', 'keypress-Zrow-'+Zrow); return; } }var g_touchscreen = false;function touchdevice(){ //if (touchscreen) return; g_touchscreen = true; octaveselector.style.display = 'none'; for (var i=21; i<=109; i++) { var key = document.getElementById('klawisz'+i); if (key) { key.setAttribute('onmousedown',''); key.setAttribute('onmouseup',''); } }}function preventZoom(e) { var t2 = e.timeStamp; var t1 = e.currentTarget.dataset.lastTouch || t2; var dt = t2 - t1; var fingers = e.touches.length; e.currentTarget.dataset.lastTouch = t2; if (!dt || dt > 500 || fingers > 1) return; // not double-tap e.preventDefault(); //e.target.click();}function applynoselect(element){ var aaa = document.getElementById('noselectstyle'); if (!aaa) { var style = document.createElement('style'); style.id = 'noselectstyle'; var text = '.noselect { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }'; style.appendChild(document.createTextNode(text)); document.head.appendChild(style); } var all = element.getElementsByTagName("*"); for (var i=0; i"); svgs.push(""); svgs.push(""); svgs.push(""); svgs.push(""); svgs.push(""); svgs.push(""); svgs.push(""); svgs.push(""); svgs.push(""); svgs.push(""); svgs.push(""); svgs.push(""); svgs.push(""); svgs.push(""); svgs.push(""); svgs.push(""); svgs.push(""); svgs.push(""); svgs.push(""); svgs.push(""); svgs.push(""); for (var i=0; i < svgs.length; i++) if (ks[i]) ks[i].appendChild(kiki(svgs[i]));}function soundbuttondown(n){document.title = '('+n+') ' + soundname(n,true).replace('','').replace('','');if (!piano7sounds[n]){ console.log('Sound not loaded yet. Loading all sounds now.'); piano7loadall();}playpiano7sound(n);galog('FirstLesson',document.title);}function place_soundbuttons_in_div(div,small){function soundbutton_class(){ var style = document.createElement('style'); var text = '\n'; text += '.soundbutton {'; text += ' font-family: Arial; '; text += ' outline: none; '; text += ' width: 32px; '; text += ' height: 32px; '; // 2.5em text += ' padding: 0; '; text += ' cursor: pointer; '; text += ' border: 1px solid gray; '; text += ' margin: 0; '; text += '}\n'; text += '.soundbutton:hover { outline: 1px solid gray; }\n'; text += '.soundbutton:active { transform: translateY(2px); }\n'; text += '.soundbutton .Hz { font-size: smaller; margin-left: 1em; }\n'; text += '.soundtable { margin-left: auto; margin-right: auto; margin-top: 1em; margin-bottom: 1em; border-collapse: separate; border-spacing: 4px; }\n'; text += '.soundtable td { padding: 0; }\n'; style.appendChild(document.createTextNode(text)); return style;}function soundbuttonstable(small){function soundbutton(n,sharp,fr){function soundname(n,sharp,fr){function isblackkey(n) { var i = n % 12; return (i==1 || i==3 || i==6 || i==8 || i==10); }function freq(n) { var f = 440*Math.pow(2,(n-69)/12); return f.toFixed(1); }function soundletter(n,sharp){ if (n<21 || n>109) { alert('wrong number for sound'); return '?'; } var names = ['C','Db','D','Eb','E','F','Gb','G','Ab','A','Bb','B','Cb']; if (sharp) names = ['C','C#','D','D#','E','F','F#','G','G#','A','A#','B','B#']; return names[n%12];}function soundnumber(n,sharp){ if (n<21 || n>109) { alert('wrong number for sound'); return '?'; } return Math.floor(n/12)-1;}var hz = (fr) ? (''+freq(n)+'Hz') : '';return soundletter(n,sharp)+''+soundnumber(n,sharp)+''+hz;}var button = document.createElement('button');button.setAttribute('onmousedown', "soundbuttondown("+n+")");button.setAttribute('ontouchstart', "event.preventDefault();soundbuttondown("+n+")");button.innerHTML = soundname(n,sharp,fr);button.className = 'soundbutton';if (fr) button.style.width = '6.5em';if (isblackkey(n)) { button.style.backgroundColor = 'black'; button.style.color = 'white'; }else { button.style.backgroundColor = 'white'; button.style.color = 'black'; }return button;}function soundbuttonsrow(a,b,fr){var tr = document.createElement('tr');for (var i=a; i<=b; i++){var td = document.createElement('td');var sharp = (i=1; x--) table.appendChild(soundbuttonsrow(x*12+12,x*12+12+ile));table.setAttribute('ontouchstart','preventZoom(event);');table.setAttribute('ontouchmove', 'event.preventDefault();'); applynoselect(table);return table;}document.head.appendChild( soundbutton_class() );div.appendChild( soundbuttonstable(small) );}function klawisz_Russian(n,extraC){ function notenote(svg) { var div = document.createElement('div'); div.innerHTML = svg; div.style.position = 'absolute'; div.style.bottom = '10%'; return div; } var viewbox = "viewBox='0 0 50 16'"; var Do = ""; var Re = ""; var Mi = ""; var Fa = ""; var Sol = ""; var La = ""; var Si = ""; var button = document.createElement('button'); button.id = 'klawisz'+n; button.setAttribute('onmousedown', "presspianokey("+n+");"); button.setAttribute('ontouchstart', "presspianokey("+n+");"); button.setAttribute('onmouseup', "releasepianokey("+n+");"); button.setAttribute('ontouchend', "releasepianokey("+n+");"); button.setAttribute('onmouseleave', "releasepianokey("+n+");"); button.style.width = extraC ? '100%' : keywidth(n); button.style.userSelect = 'none'; button.style.outline = 'none'; if (!isblackkey(n)) { button.className = 'whitekeybutton'; button.style.height = '100%'; button.style.position = 'relative'; button.style.margin = '0'; button.style.padding = '0'; button.style.border = 'none'; button.style.borderRadius = '0 0 4px 4px'; button.style.cursor = 'pointer'; var napis = keywrite(n); napis.style.position = 'absolute'; napis.style.bottom = '0'; napis.style.left = '25%'; napis.style.width = '50%'; button.appendChild(napis); switch (n%12) { case 0 : button.appendChild(notenote(Do)); break;case 2 : button.appendChild(notenote(Re)); break;case 4 : button.appendChild(notenote(Mi)); break;case 5 : button.appendChild(notenote(Fa)); break;case 7 : button.appendChild(notenote(Sol)); break;case 9 : button.appendChild(notenote(La)); break;case 11 : button.appendChild(notenote(Si)); break; } return button; } button.className = 'blackkeybutton'; button.style.height = 2/3*100+'%'; button.style.margin = '0'; button.style.padding = '0'; button.style.outline = 'none'; button.style.border = 'none'; button.style.cursor = 'pointer'; button.style.position = 'absolute'; button.style.top = '0'; button.style.borderRadius = '0 0 3px 3px'; var inkey = document.createElement('fieldset'); inkey.className = 'blackinkey'; inkey.style.height = '88%'; inkey.style.margin = '0'; inkey.style.marginLeft = '8%'; inkey.style.marginRight = '8%'; inkey.style.padding = '0'; inkey.style.border = 'none'; inkey.style.outline = 'none'; inkey.style.background = 'inherit'; inkey.style.boxShadow = '0px 2px 1px 0px #777'; button.appendChild(inkey); return button;}function updatepianoessencewidth(){ var a=3,b=4; if (document.getElementById('klawisz96')) a = 7; if (document.getElementById('klawisz84')) a = 6; if (document.getElementById('klawisz72')) a = 5; if (document.getElementById('klawisz60')) a = 4; if (document.getElementById('klawisz48')) a = 3; if (document.getElementById('klawisz36')) a = 2; if (document.getElementById('klawisz24')) a = 1; if (document.getElementById('klawisz36')) b = 2; if (document.getElementById('klawisz48')) b = 3; if (document.getElementById('klawisz60')) b = 4; if (document.getElementById('klawisz72')) b = 5; if (document.getElementById('klawisz84')) b = 6; if (document.getElementById('klawisz96')) b = 7; if (document.getElementById('klawisz108')) b = 8; var width = (b-a)*342 + 48; if (document.getElementById('pianolessadvanced')) pianolessadvanced.style.maxWidth = width + 'px';}/*function donate(){ var button = document.createElement('button'); button.id = 'donatebutton'; button.className = 'przycisk'; button.style.display = 'none'; button.innerHTML = 'donate'; var href = "htt" + "ps:/" + "/ww" + "w.paypal" + ".com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=USFQTTFZ7WYJ4"; var onclick = 'window.open("'+href+'");'; button.setAttribute('onclick',onclick); return button;}*/function donate(){ var button = document.createElement('a'); button.id = 'donatebutton'; button.className = 'przycisk'; button.style.display = 'none'; button.innerHTML = 'donate'; var href = 'htt'+'ps://ww'+'w.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=5RWRJCA7QWVQL&source=url' button.href = href; button.target = '_blank'; button.rel = "nofollow"; button.style.textDecoration = 'none'; button.style.color = 'black'; return button;}function detectad(n){ var tosave = (savebutton.disabled) ? '0' : 'membut'; galog('Ad','ad'+n+'-'+ileplayaudio+'-'+tosave);}function makeRussian(){ octavesbutton.innerHTML = 'октавы'; loweroctavebutton.innerHTML = 'добавить октаву слева'; loweroctavebutton.style.width = '14em'; higheroctavebutton.innerHTML = 'добавить октаву справа'; higheroctavebutton.style.width = '14em'; rlo.innerHTML = 'удалить октаву слева'; rlo.style.width = '14em'; rho.innerHTML = 'удалить октаву справа'; rho.style.width = '14em'; //for (i=0; i<=5; i++) octaveselector.options[i].text = 'клавиатура компьютера играет от ' + 'C'+(i+1)+' до C'+(i+3); for (i=0; i<=5; i++) octaveselector.options[i].text = 'Tab играет C'+(i+1); melochords.options[0].text = 'одиночные ноты'; melochords.options[1].text = 'мажорные трезвучия'; melochords.options[2].text = 'минорные трезвучия'; CHORDtext.innerHTML = 'АККОРД'; RECORDtext.innerHTML = 'ЗАПИСЬ'; savebutton.innerHTML = 'сохранить'; loadtext.innerHTML = 'загрузить'; popupguzik.innerHTML = 'всплывающее окно'; advanced.style.display = 'block'; memorybuttons.innerHTML = ''; g_playbackbuttontext = 'с ▶'; // (воспроизведение) g_renameprompttext = 'Новое название этой кнопки:'; g_renametext = 'переименовать'; g_keytext = 'клавиша:'; g_deletetext = 'удалить'; var suspar = susbox.parentElement; suspar.innerHTML = (suspar.innerHTML).replace('>sustain','>сустейн'); pno0x3_button.innerHTML = 'лучшее звучание';}function makeSpanish(){ octavesbutton.innerHTML = 'octavas'; loweroctavebutton.innerHTML = 'agrega una octava a la izquierda'; loweroctavebutton.style.width = '16em'; higheroctavebutton.innerHTML = 'agrega una octava a la derecha'; higheroctavebutton.style.width = '16em'; rlo.innerHTML = 'quita una octava de la izquierda'; rlo.style.width = '16em'; rho.innerHTML = 'quita una octava de la derecha'; rho.style.width = '16em'; //for (i=0; i<=5; i++) octaveselector.options[i].text = 'el teclado de la computadora reproduce los sonidos de ' + 'C'+(i+1)+' a C'+(i+3); //for (i=0; i<=5; i++) octaveselector.options[i].text = 'el teclado de la computadora toca de ' + 'C'+(i+1)+' a C'+(i+3); for (i=0; i<=5; i++) octaveselector.options[i].text = 'Tab toca C'+(i+1); melochords.options[0].text = 'notas individuales'; melochords.options[1].text = 'tríadas mayores'; melochords.options[2].text = 'tríadas menores'; CHORDtext.innerHTML = 'ACORDE'; RECORDtext.innerHTML = 'GRABAR/REC'; savebutton.innerHTML = 'guardar'; loadtext.innerHTML = 'subir'; popupguzik.innerHTML = 'ventana emergente'; //advanced.style.display = 'initial'; //advbox.style.display = 'none'; memorybuttons.innerHTML = ''; g_renameprompttext = 'Nuevo nombre para este botón:'; g_renametext = 'cambiar nombre'; g_keytext = 'tecla:'; g_deletetext = 'eliminar'; //cookies.innerHTML = 'Utilizamos cookies de acuerdo con la política de Google AdSense.'; //cookies.innerHTML = 'Utilizamos las cookies de Google para analizar el tráfico y personalizar los anuncios para los usuarios de fuera de la UE.'; //cookies.style.marginBottom = '1em'; cookies.style.fontSize = 'x-small'; advbox.innerHTML = (advbox.innerHTML).replace('>advanced','>avanzadas'); pno0x3_button.innerHTML = 'mejor sonido';}function refreshSoundbuttons(){soundbuttons.innerHTML = '';var small = (window.innerWidth < 1000) ? true : false;if (window.innerWidth >= 480) place_soundbuttons_in_div(soundbuttons,small);}function initpiano_in_div(div,a,b){var container = document.createElement('div');container.id = 'pianolessadvanced'; // this name is obsoletecontainer.appendChild(pianopanel(a,b));div.appendChild(container);markQWE();advanced.style.display = 'block';advbox.style.display = 'none';popupguzik.style.display = 'none';}function openpopup_2020_07_27(){ galog( 'popup', 'popup'); var html = pianokeyboardpanel.innerHTML; html = '

'+html+'

'; var width = pianokeyboardpanel.clientWidth + 16; var appealheight = 40; var height = pianokeyboardpanel.clientHeight + 64 + appealheight; var keys = "

"; var popup = window.open('','','width='+width+',height='+height); popup.document.write(doc);}function octaves_selector_onchange(){markQWE();playsfromga();piano7loadall();}function octaves_selector(a,b){var se = document.createElement('select');se.id = 'octaveselector';se.style.margin = '0.5em';for (var i=1; i<=6; i++){var opt = document.createElement('option');//opt.text = 'computer keyboard plays from ' + 'C'+i+' to C'+(i+2);opt.text = 'Tab plays C'+i;se.add(opt);}se.selectedIndex = (a<=3 && b>=4) ? 2 : a-1;se.setAttribute('onchange', 'octaves_selector_onchange();');return se;}function isdesktop(){return window.innerWidth >= 800;}function pianopanel(a,b){ document.head.appendChild(buttonpianostyle()); document.body.onkeydown = keydown; document.body.onkeyup = keyup; var div = document.createElement('div'); div.id = 'pianokeyboardpanel'; var melo = document.createElement('select'); melo.id = 'melochords'; melo.style.margin = '0.5em'; var opt = document.createElement('option'); opt.text = 'single notes'; melo.add(opt); opt = document.createElement('option'); opt.text = 'major chords'; melo.add(opt); opt = document.createElement('option'); opt.text = 'minor chords'; melo.add(opt); melo.setAttribute('onchange','meloga();'); melo.style.display = 'none'; var octavesbutton = document.createElement('button'); octavesbutton.id = 'octavesbutton'; octavesbutton.className = 'przycisk'; octavesbutton.innerHTML = 'octaves'; octavesbutton.setAttribute('onclick','octavesPanel.style.display="block";'); if (isdesktop()) octavesbutton.style.display = 'none'; var spot = document.createElement('div'); spot.id = 'keyboardspot'; spot.style.clear = 'both'; //spot.style.marginTop = '0.5em'; spot.appendChild(klawiatura(a,b)); var box = document.createElement('input'); box.id = 'advancedbox'; box.checked = false; box.setAttribute("type", "checkbox"); box.setAttribute('onclick','advanced.style.display=(this.checked)?"block":"none";'); var advbox = document.createElement('span'); advbox.id = 'advbox'; advbox.appendChild(box); advbox.innerHTML += 'advanced'; advbox.style.whiteSpace = 'nowrap'; var toppanel = document.createElement('div'); toppanel.appendChild(octavespanel(a,b)); toppanel.appendChild(octavesbutton); toppanel.appendChild(melo); toppanel.appendChild(advbox); toppanel.appendChild(donate()); var klawa = newel('table'); klawa.style.width = '100%'; var tr = newel('tr'); klawa.appendChild(tr); var td1 = newel('td'), td2 = newel('td'), td3 = newel('td'); td1.style.width = '1em'; td3.style.width = '1em'; if (isdesktop()) { var bu = newel('button'); bu.innerHTML = '⤢'; bu.setAttribute('onclick','openpopup_2020_07_27();'); td3.appendChild(bu); td3.style.position = 'relative'; bu.style.position = 'absolute'; bu.style.top = '0'; var bu = newel('button'); bu.innerHTML = '&plus;'; bu.setAttribute('onclick','higheroctave();markQWE();unfocus();'); td3.appendChild(bu); var bu = newel('button'); bu.innerHTML = '−'; bu.setAttribute('onclick','removehighestoctave();markQWE();unfocus();'); td3.appendChild(bu); var bu = newel('button'); bu.innerHTML = '&plus;'; bu.setAttribute('onclick','loweroctave();markQWE();unfocus();'); td1.appendChild(bu); var bu = newel('button'); bu.innerHTML = '−'; bu.setAttribute('onclick','removelowestoctave();markQWE();unfocus();'); td1.appendChild(bu); tr.appendChild(td1); tr.appendChild(td2); tr.appendChild(td3); } else tr.appendChild(td2); td2.appendChild(spot); div.appendChild(toppanel); div.appendChild(klawa); div.appendChild(belowpanel(a,b)); applynoselect(div); return div;} function clear_memorybuttons(){el('memorybuttons').innerHTML = '';savebutton.disabled = true;update_bookmark_chords_button(false);}function clear_memorybuttons_button(){var bu = newel('button');bu.className = 'przycisk';bu.innerHTML = 'clear';bu.setAttribute('onclick','clear_memorybuttons();')return bu;}function belowpanel(a,b){ var chordpanel = document.createElement('label'); chordpanel.id = 'rechorder'; var rechord = document.createElement('input'); rechord.type = 'checkbox'; rechord.id = 'rechord'; rechord.setAttribute('onchange','rechordonchange();'); chordpanel.appendChild(rechord); var CHORD = document.createElement('span'); CHORD.id = 'CHORDtext'; CHORD.innerHTML = 'CHORD'; chordpanel.appendChild(CHORD); var memorybuttons = document.createElement('div'); memorybuttons.style.display = 'none'; memorybuttons.id = 'memorybuttons'; memorybuttons.style.marginTop = '0.5em'; memorybuttons.style.position = 'relative'; memorybuttons.style.resize = 'both'; memorybuttons.style.overflow = 'auto'; memorybuttons.style.border = '1px dotted darkgray'; memorybuttons.style.minHeight = '7em'; memorybuttons.style.textAlign = 'left'; memorybuttons.innerHTML = 'tick the CHORD and RECORD checkboxes on and off
to create chord buttons and playback buttons here'; memorybuttons.setAttribute('ondrop',"drop(event)"); memorybuttons.setAttribute('ondragover',"allowDrop(event)"); memorybuttons.setAttribute('ontouchstart','preventZoom(event);'); memorybuttons.setAttribute('ontouchmove', 'event.preventDefault();'); var recordedsounds = document.createElement('textarea'); recordedsounds.id = 'recordedsounds'; recordedsounds.style.display = 'none'; var advbuttons = document.createElement('div'); advbuttons.style.textAlign = 'center'; advbuttons.appendChild(chordpanel); advbuttons.appendChild(recordpanel()); advbuttons.appendChild(savechordsform()); advbuttons.appendChild(loadchordsbutton()); advbuttons.appendChild(popupbutton()); var membupanel = newel('div'); membupanel.id = 'membupanel'; membupanel.style.display = 'none'; membupanel.appendChild(bookmark_chords_button()); membupanel.appendChild(clear_memorybuttons_button()); var adv = document.createElement('div'); adv.id = 'advanced'; adv.style.textAlign = 'center'; adv.append(volumeControlPanel()); adv.appendChild(pno0x3_bettersound_button()); var se = octaves_selector(a,b); if (!isdesktop()) se.style.display = 'none'; adv.appendChild(se); advbuttons.style.display = 'inline-block'; var sus = sustainbox(); if (!isdesktop()) sus.style.display = 'none'; adv.appendChild(sus); adv.appendChild(advbuttons); adv.appendChild(memorybuttons); adv.appendChild(recordedsounds); adv.appendChild(membupanel); applynoselect(adv); adv.style.marginTop = '0.5em'; return adv; }function initpiano_in_pianoessence(){document.head.appendChild(labelboxstyle());if (isdesktop()) initpiano_in_div(pianoessence,2,5); else initpiano_in_div(pianoessence,3,4);}function unfocus(){document.activeElement.blur();}function appeal(visible){var div = newel('div'); div.id = 'Appeal';div.style.display = visible ? 'block' : 'none';div.style.textAlign = 'center';div.style.backgroundColor = '#ffa';div.style.backgroundColor = 'rgb(255,165,0)'; // orangediv.style.backgroundColor = 'rgb(255,165,0,0.3)';div.style.borderRadius = '0.5em';var a = "This website is in financial crisis. Please consider donating regularly to keep it functional.";div.innerHTML = a;var donatebutton = donate();donatebutton.style.display = 'inline-block';div.appendChild(donatebutton);return div;}function appeal_show(){if (el('adhor')) close_adhor('nogalog');if (el('skydiv')) close_skydiv('nogalog');el('Appeal').style.display = 'block';}function add_custom_memorybutton_chord(keys){function custom_memorybutton_chord(keys){function custom_chordbutton(id,keys){// keys is an array of integersfunction include_this(n){return ('|'+keys.join('|')+'|').indexOf('|'+n+'|') > -1;} var name = ''; var chordbuttonclick = "galog('Memorybutton', 'chordbutton-click');"; var onmousedown = chordbuttonclick + id+"button.style.transform='translateY(4px)';"; var onmouseup = id+"button.style.transform='none';"; for (var n=21; n<=109; n++) { //var key = document.getElementById('klawisz'+n); //if (key && key.style.transform == 'translateY(6px)') if (include_this(n)) { name += soundname(n,true); onmousedown += 'activatepianokey('+n+');'; onmouseup += 'releasepianokey('+n+');'; } } if (name == '') return null; var button = document.createElement('button'); button.id = id+'button'; button.className = 'chord'; button.innerHTML = name; if (g_touchscreen == false) button.setAttribute('onmousedown',onmousedown); else button.setAttribute('ontouchstart',onmousedown); if (g_touchscreen == false) button.setAttribute('onmouseup',onmouseup); else button.setAttribute('ontouchend',onmouseup); return button;} var id = 'b'+Math.floor(Math.random()*100000)+Math.floor(Math.random()*100000); id += 'c'; var button = custom_chordbutton(id,keys); if (button == null) return null; var edit = settingsicon(); //size in pixels edit.style.display = 'block'; edit.style.cursor = 'pointer'; edit.setAttribute('onclick','document.getElementById("'+id+'editor").style.display="inline-block";'); edit.setAttribute('draggable','false'); var buttonedit = document.createElement('table'); buttonedit.id = id; buttonedit.style.borderCollapse = 'collapse'; buttonedit.style.display = 'inline-block'; buttonedit.style.margin = '0.5em'; var tr = document.createElement('tr'); var td = document.createElement('td'); td.style.padding = '0'; td.appendChild(button); tr.appendChild(td); td = document.createElement('td'); td.style.padding = '0'; td.appendChild(horizontaleditor(id)); td.appendChild(edit); tr.appendChild(td); buttonedit.appendChild(tr); var dragdiv = document.createElement('div'); dragdiv.id = id + 'dragdiv'; dragdiv.style.display = 'inline-block'; dragdiv.appendChild(buttonedit); dragdiv.setAttribute('draggable','true'); dragdiv.setAttribute('ondragstart',"drag(event)"); applynoselect(dragdiv); savebutton.disabled = false; return dragdiv; }if (memorybuttons.innerHTML.charAt(0)=='t') memorybuttons.innerHTML = '';var button = custom_memorybutton_chord(keys);if (button) memorybuttons.appendChild(button);if (button) el('memorybuttons').style.display = 'block';if (button) update_bookmark_chords_button(true);if (button) membupanel.style.display = 'block';return button ? true : false;}function add_custom_chordbuttons_from_query(){var something = false;var query = location.search;if (query == '') return false;try { query = new URLSearchParams(query); } catch (error) { return false; }if (!query.has('c')) return false;var chords = query.get('c');chords = chords.split('_');if (chords.length == 0) return false;for (var i=0; i < chords.length; i++){var chord = chords[i];var keys = chord.split('-');if (keys.length == 0) return something;if (add_custom_memorybutton_chord(keys)) something = true;}if (something) update_bookmark_chords_button(true);return something;}function bookmark_chords_from_memorybuttons(){function chords_from_memorybuttons(){function keys_from_chordbutton(bu){var data = bu.getAttribute('onmousedown');var keys = [];for (var n=21; n<=109; n++) if (data.indexOf('activatepianokey('+n+');') > -1) keys.push(n);return keys.join('-');}var buttons = el('memorybuttons').querySelectorAll('button.chord');if (buttons.length == 0) return '';var chords = [];for (var i=0; i < buttons.length; i++) chords.push(keys_from_chordbutton(buttons[i]));return chords.join('_');}var chords = chords_from_memorybuttons();if (chords == '') return;var url = '?c=' + chords;history.pushState('chord','',url);}function bookmark_chords_button(){var bu = newel('button');bu.id = 'bookmarkchordsbutton';bu.innerHTML = 'bookmark chords';bu.className = 'przycisk';bu.disabled = true;var ga = 'galog("bookmark_chords","-");';bu.setAttribute('onclick','bookmark_chords_from_memorybuttons();'+ga);return bu;}function update_bookmark_chords_button(how){if (how === true) bookmarkchordsbutton.disabled = false;if (how === false) bookmarkchordsbutton.disabled = true;}function add_custom_memorybuttons_from_chord_array(arr){for (var i=0; i < arr.length; i++) add_custom_memorybutton_chord(arr[i]);}function klawisz_teclado(n,extraC){ function notenote(svg) { var div = document.createElement('div'); div.innerHTML = svg; div.style.position = 'absolute'; div.style.bottom = '10%'; return div; } var viewbox = "viewBox='0 0 50 16'"; var Do = ""; var Re = ""; var Mi = ""; var Fa = ""; var Sol = ""; var La = ""; var Si = ""; var button = document.createElement('button'); button.id = 'klawisz'+n; button.setAttribute('onmousedown', "presspianokey("+n+");"); button.setAttribute('ontouchstart', "presspianokey("+n+");"); button.setAttribute('onmouseup', "releasepianokey("+n+");"); button.setAttribute('ontouchend', "releasepianokey("+n+");"); button.setAttribute('onmouseleave', "releasepianokey("+n+");"); button.style.width = extraC ? '100%' : keywidth(n); button.style.userSelect = 'none'; button.style.outline = 'none'; if (!isblackkey(n)) { button.className = 'whitekeybutton'; button.style.height = '100%'; button.style.position = 'relative'; button.style.margin = '0'; button.style.padding = '0'; button.style.border = 'none'; button.style.borderRadius = '0 0 4px 4px'; button.style.cursor = 'pointer'; var napis = keywrite(n); napis.style.position = 'absolute'; napis.style.bottom = '0'; napis.style.left = '25%'; napis.style.width = '50%'; button.appendChild(napis); switch (n%12) { case 0 : button.appendChild(notenote(Do)); break;case 2 : button.appendChild(notenote(Re)); break;case 4 : button.appendChild(notenote(Mi)); break;case 5 : button.appendChild(notenote(Fa)); break;case 7 : button.appendChild(notenote(Sol)); break;case 9 : button.appendChild(notenote(La)); break;case 11 : button.appendChild(notenote(Si)); break; } return button; } button.className = 'blackkeybutton'; button.style.height = 2/3*100+'%'; button.style.margin = '0'; button.style.padding = '0'; button.style.outline = 'none'; button.style.border = 'none'; button.style.cursor = 'pointer'; button.style.position = 'absolute'; button.style.top = '0'; button.style.borderRadius = '0 0 3px 3px'; var inkey = document.createElement('fieldset'); inkey.className = 'blackinkey'; inkey.style.height = '88%'; inkey.style.margin = '0'; inkey.style.marginLeft = '8%'; inkey.style.marginRight = '8%'; inkey.style.padding = '0'; inkey.style.border = 'none'; inkey.style.outline = 'none'; inkey.style.background = 'inherit'; inkey.style.boxShadow = '0px 2px 1px 0px #777'; button.appendChild(inkey); return button;}// chord computationfunction chord_array_from_pitch_classes(a,b,chromas){const length = chromas.length;if (length == 0) return [];if (b-a+1 < length) return [];var ret = [];for (let n=a; n<=b; n++){let index = chromas.indexOf(n%12);if (index > -1){let head = [n];if (length == 1){ret.push(head);}else{let smaller = [];for (let i=0; i < length; i++) if (i != index) smaller.push(chromas[i]);let tails = chord_array_from_pitch_classes(n+1,b,smaller);for (let i=0; i < tails.length; i++){let chord = head.concat(tails[i]);if (chord.length == length) ret.push(chord);}}}}return ret;}// end of chord computation// 2021-07-27 pno0x3 piano soundsfunction pno0x3_init(){var pno0x3_pianosounds = [];for (var i=24; i<=108; i++) pno0x3_pianosounds[i] = null;function all_sounds_loaded(){for (var n=30; n<=96; n=n+3) if (pno0x3_pianosounds[n] == null) return false;return true;}function progress_percentage(){var n_decoded = 0;for (var n=30; n<=96; n=n+3) if (pno0x3_pianosounds[n] != null) n_decoded++;return Math.floor(100*n_decoded/23);}function progressbar(){var div = document.createElement('div');div.id = 'pno0x3_progressbar';div.innerHTML = 'Loading sounds. Please wait half a minute...';if (lang == 'ru') div.innerHTML = 'Загрузка звуков. Подождите полминуты...';if (lang == 'es') div.innerHTML = 'Cargando sonidos. Espere medio minuto...';div.style.position = 'fixed';div.style.width = '60%';div.style.left = '20vw';div.style.top = '10vh';div.style.backgroundColor = 'white';div.style.fontSize = '200%';div.style.padding = '0.5em';div.style.border = '0.5em solid #777';div.style.borderRadius = '0.5em';return div;}function updateprogressbar(){var a = document.getElementById('pno0x3_progressbar');var p = progress_percentage();a.style.backgroundImage = 'linear-gradient(to right, #ddd '+p+'%, white '+p+'%)';}function pno0x3_load(n){ var url = 'https://www.apronus.com/static/pno0x3-pianosounds/pno0'+n+'.mp3'; var request = new XMLHttpRequest(); request.open("GET", url, true); request.responseType = "arraybuffer"; request.onload = function() { audiocontext.decodeAudioData( request.response, function(buffer) { if (!buffer) { alert('error decoding file data: ' + url); return; } pno0x3_pianosounds[n] = buffer; console.log('Sound pno0'+n+' is ready.'); updateprogressbar(); if (all_sounds_loaded()) {playpianosound = pno0x3_playpianosound; // global function is overwrittenplaypiano7sound = function(n,delayInSeconds){ pno0x3_playpianosound(null,n,delayInSeconds); };pno0x3_init = function(){};console.log('All pno0x3 sounds are ready.');document.getElementById('pno0x3_progressbar').style.display = 'none'; } }, function(error) { console.error('decodeAudioData error', error); }); } request.onerror = function() { alert('BufferLoader: XHR error'); } request.send();}function pno0x3_playpianosound(context,n,delayInSeconds){function sourcestart(n,rate,volume,delayInSeconds){ if (audiocontext.state == 'suspended') audiocontext.resume(); var gainNode = audiocontext.createGain(); gainNode.gain.value = volume * volumeValue(); if (!susbox.checked) // no sustain { var duration = 0.6; // in seconds var start = audiocontext.currentTime + delayInSeconds; var stop = start + duration; gainNode.gain.setValueAtTime(volume, start); gainNode.gain.linearRampToValueAtTime(1, stop); gainNode.gain.linearRampToValueAtTime(0, stop+0.1); } var source = audiocontext.createBufferSource(); source.buffer = pno0x3_pianosounds[n]; source.playbackRate.value = rate; source.connect(gainNode); gainNode.connect(audiocontext.destination); source.start(audiocontext.currentTime + delayInSeconds);} delayInSeconds = delayInSeconds || 0; if (delayInSeconds > 0) setTimeout( "recordnow("+n+");" , delayInSeconds*1000); var volume; switch (n) { case 56: case 57: case 58: volume = 0.6; break; case 62: case 63: case 64: volume = 0.7; break; case 65: case 66: case 67: volume = 0.5; break; case 68: case 69: case 69: volume = 0.7; break; default: volume = 1; } if (n<=45) volume = 0.6; if (n<=38) volume = 0.4; if (n==38) sourcestart(36,Math.pow(2,2/12),volume,delayInSeconds); else if (n==39) { sourcestart(42,Math.pow(2,-3/12),volume,delayInSeconds); sourcestart(36,Math.pow(2,3/12),volume,delayInSeconds); } else if (n==40) sourcestart(42,Math.pow(2,-2/12),volume,delayInSeconds); else if (n>=96) { sourcestart(96,Math.pow(2,(n-96)/12),volume,delayInSeconds); } else if (n<30) { sourcestart(30,Math.pow(2,(n-30)/12),volume,delayInSeconds); } else switch (n%3) { case 0 : sourcestart(n,1,volume,delayInSeconds); break; case 1 : sourcestart(n-1,Math.pow(2,1/12),volume,delayInSeconds); break; case 2 : sourcestart(n+1,Math.pow(2,-1/12),volume,delayInSeconds); }}document.body.appendChild(progressbar());for (var n=30; n<=96; n=n+3) pno0x3_load(n);// Note that sound files for 24 and 27 exist but they are not loaded.//playpianosound = pno0x3_playpianosound;// this is executed by pno0x3_load after all sounds have been loaded}function pno0x3_bettersound_button(){var bu = document.createElement('button');bu.id = 'pno0x3_button';bu.className = 'przycisk';bu.innerHTML = 'better sound';bu.setAttribute('onclick','pno0x3_bettersound_button_clicked();');return bu;}function pno0x3_bettersound_button_clicked(){pno0x3_init();//pno0x3_button.style.display="none"; //desirable but makes the button disappear in popupgalog('betterSound','-');}function volumeValue(){const vc = el('volume_control');if (vc === null) return 2;return vc.value / 2.5; // from 0 to 10 converted to from 0 to 4}function volumeControlPanel(){const panel = newel('div');panel.style.display = 'inline-block';const lower = newel('button');lower.innerHTML = '-';lower.title = 'volume down';lower.setAttribute('onclick', `const v = parseInt(el('volume_control').value);el('volume_control').value = Math.max(0, v - 1);`);const higher = newel('button');higher.innerHTML = '+';higher.title = 'volume up';higher.setAttribute('onclick', `const v = parseInt(el('volume_control').value);el('volume_control').value = Math.min(10, v + 1);`);const val = newel('input');val.id = 'volume_control';val.type = 'text';val.setAttribute('value','5');val.value = '5';val.style.width = '2em';val.style.textAlign = 'center';val.setAttribute('onchange', `let v = parseInt(this.value);if (isNaN(v)) v = 5;v = Math.max(0, v);v = Math.min(v, 10);this.value = v;`);panel.append(lower, val, higher);return panel;}function uiget_pressedkey_list(){const keys = [];for (let n=21; n<=109; n++){const key = el('klawisz'+n);if (key && key.style.transform == 'translateY(6px)'){keys.push(n);}}return keys;}function areSetsEqual(set1, set2){ if (set1.size !== set2.size) return false; for (const element of set1) { if (!set2.has(element)) return false; } return true;}function recognize_chord(keys){const abstract_chord = new Set();for (const key of keys){abstract_chord.add(key % 12);}for (let root = 0; root <= 11; root++){const major = new Set( [root, (root+4)%12, (root+7)%12] );if (areSetsEqual(major, abstract_chord)){const chord = {};chord.structure = '' + root + '+4+3';chord.type = 'major';chord.nick = '';return chord;}const minor = new Set( [root, (root+3)%12, (root+7)%12] );if (areSetsEqual(minor, abstract_chord)){const chord = {};chord.structure = '' + root + '+3+4';chord.type = 'minor';chord.nick = 'm';return chord;}const diminished = new Set( [root, (root+3)%12, (root+6)%12] );if (areSetsEqual(diminished, abstract_chord)){const chord = {};chord.structure = '' + root + '+3+3';chord.type = 'diminished';chord.nick = 'dim';return chord;} const augmented = new Set([root, (root + 4) % 12, (root + 8) % 12]); if (areSetsEqual(augmented, abstract_chord)){ const chord = {}; chord.structure = '' + root + '+4+4'; chord.type = 'augmented'; chord.nick = 'aug'; return chord; } const dominant = new Set([root, (root + 4) % 12, (root + 7) % 12, (root + 10) % 12]); if (areSetsEqual(dominant, abstract_chord)) { const chord = {}; chord.structure = '' + root + '+4+3+3'; chord.type = 'dominant seventh'; chord.nick = '7'; return chord; }const major7Chord = new Set([root, (root + 4) % 12, (root + 7) % 12, (root + 11) % 12]);if (areSetsEqual(major7Chord, abstract_chord)) {const chord = {};chord.structure = '' + root + '+4+3+4';chord.type = 'major seventh';chord.nick = 'maj7';return chord;}const minor7Chord = new Set([root, (root + 3) % 12, (root + 7) % 12, (root + 10) % 12]);if (areSetsEqual(minor7Chord, abstract_chord)) {const chord = {};chord.structure = '' + root + '+3+4+3';chord.type = 'minor seventh';chord.nick = 'm7';return chord;}const augmented7Chord = new Set([root, (root + 4) % 12, (root + 8) % 12, (root + 10) % 12]);if (areSetsEqual(augmented7Chord, abstract_chord)) {const chord = {};chord.structure = '' + root + '+4+4+2';chord.type = 'augmented seventh';chord.nick = 'aug7';return chord;}const diminished7Chord = new Set([root, (root + 3) % 12, (root + 6) % 12, (root + 9) % 12]);if (areSetsEqual(diminished7Chord, abstract_chord)) {const chord = {};chord.structure = '' + root + '+3+3+3';chord.type = 'diminished seventh';chord.nick = 'o7';return chord;}const sus2Chord = new Set([root, (root + 2) % 12, (root + 7) % 12]);if (areSetsEqual(sus2Chord, abstract_chord)) {const chord = {};chord.structure = '' + root + '+2+5';chord.type = 'suspended second';chord.nick = 'sus2';return chord;}const sus4Chord = new Set([root, (root + 5) % 12, (root + 7) % 12]);if (areSetsEqual(sus4Chord, abstract_chord)) {const chord = {};chord.structure = '' + root + '+5+2';chord.type = 'suspended fourth';chord.nick = 'sus4';return chord;}const powerChord = new Set([root, (root + 7) % 12]);if (areSetsEqual(powerChord, abstract_chord)) {const chord = {};chord.structure = '' + root + '+7';chord.type = 'power chord';chord.nick = '5';return chord;}}const chord = {};chord.structure = Array.from(abstract_chord).join(',');chord.type = null;chord.nick = null;return chord;}function chord_name(chord){if (chord.type === null) return null;const root = parseInt(chord.structure.split('+')[0]);const type = chord.type;if (isblackkey(root)){const name1 = soundletter(root, 'sharp');const name2 = soundletter(root, null);return name1 + ' ' + type + ', ' + name2 + ' ' + type;}return soundletter(root) + ' ' + type;}function chord_nick(chord){if (chord.type === null) return null;const root = parseInt(chord.structure.split('+')[0]);const letter = soundletter(root, 'sharp');return letter + chord.nick;}function update_chord_info(){if (el('chordinfo') === null){const container = el('pianokeyboardpanel');const chordinfo = newel('div');chordinfo.id = 'chordinfo';container.prepend(chordinfo);container.style.position = 'relative';chordinfo.style.position = 'absolute';}el('chordinfo').innerHTML = '';const name = (chord_name(recognize_chord(uiget_pressedkey_list())));if (name === null) return;const outer = newel('div');const inner = newel('div');outer.style.textAlign = 'center';inner.style.display = 'inline-block';inner.innerHTML = name;inner.style.padding = '0.5em 1em 0.5em 1em';inner.style.borderRadius = '0.5em';inner.style.background = '#888';inner.style.color = 'white';outer.append(inner);el('chordinfo').append(outer);el('chordinfo').style.width = '100%';el('chordinfo').style.zIndex = '17';}function update_pressed_keys_markings(){const pressed_keys = uiget_pressedkey_list();for (let n = 21; n <= 109; n++){const key = el('klawisz'+n);if (key){if (pressed_keys.includes(n)){key.classList.add('marked_key');}else{key.classList.remove('marked_key');}}}}function el(a) { return document.getElementById(a); }function newel(a) { return document.createElement(a); }function number_button(type,n,numberit,sharp){var bu = newel('button');bu.id = type+'_button'+n;bu.setAttribute('onmousedown', type+"_button_down("+n+")");bu.setAttribute('ontouchstart', "event.preventDefault();"+type+"_button_down("+n+")");bu.innerHTML = soundname(n,sharp);var number = newel('div'); number.className = 'soundnumber';number.innerHTML = n;number.style.color = isblackkey(n) ? 'lightgray' : 'gray';number.style.marginTop = '7px';number.style.fontSize = 'smaller';if (numberit) bu.appendChild(number);bu.style.fontFamily = 'Arial';bu.style.outline = 'none'; bu.style.padding = '0'; bu.style.margin = '0';bu.style.width = '32px';bu.style.height = (numberit) ? '48px' : '32px';bu.style.cursor = 'pointer'; bu.style.border = '1px solid gray';if (isblackkey(n)) { bu.style.backgroundColor = 'black'; bu.style.color = 'white'; }else { bu.style.backgroundColor = 'white'; bu.style.color = 'black'; }return bu;}function number_buttons_row(type,number,a,b){var tr = newel('tr');for (var i=a; i<=b; i++){var td = newel('td'); td.style.padding = '0'; td.style.border = '0';var sharp = (i 60) return;var delayInSeconds = 0.3, delay = 100;for (var i=0; i= 78) return;playpiano7sound(n);playpiano7sound(n+4);playpiano7sound(n+7);el('major_triad_button'+(n+0)).style.transform = 'translateY(6px)';el('major_triad_button'+(n+4)).style.transform = 'translateY(6px)';el('major_triad_button'+(n+7)).style.transform = 'translateY(6px)';var delay = 100;setTimeout('major_triad_button'+(n+0)+'.style.transform = "none";',delay);setTimeout('major_triad_button'+(n+4)+'.style.transform = "none";',delay);setTimeout('major_triad_button'+(n+7)+'.style.transform = "none";',delay);}function minor_triad_button_down(n){if (n >= 78) return;playpiano7sound(n);playpiano7sound(n+3);playpiano7sound(n+7);el('minor_triad_button'+(n+0)).style.transform = 'translateY(6px)';el('minor_triad_button'+(n+3)).style.transform = 'translateY(6px)';el('minor_triad_button'+(n+7)).style.transform = 'translateY(6px)';var delay = 100;setTimeout('minor_triad_button'+(n+0)+'.style.transform = "none";',delay);setTimeout('minor_triad_button'+(n+3)+'.style.transform = "none";',delay);setTimeout('minor_triad_button'+(n+7)+'.style.transform = "none";',delay);}function major_scale_button_down(n){var scale = [0,2,4,5,7,9,11,12];scale_button_down('major_scale',scale,n);}function major_scale_buttons(){return number_buttons_row('major_scale',false,3*12+12,3*12+12+24);}function natural_minor_scale_button_down(n){var scale = [0,2,3,5,7,8,10,12];scale_button_down('natural_minor_scale',scale,n);}function minor_scale_buttons(){return number_buttons_row('natural_minor_scale',false,3*12+12,3*12+12+24);}if (location.href.indexOf('solfege=1')>-1) klawisz = function(n,extraC) { return klawisz_teclado(n,extraC); }if (lang == 'es') klawisz = function(n,extraC) { return klawisz_teclado(n,extraC); }piano7loadbasic();

play single notes or chords with keyboard, mouse or touchscreen (sevenoctaves)

Our online piano can be played like a physical piano because we match the piano keyboard layout:white keys to the second row and black keys to the first row on the computer's keyboard.

Minor triads demo

with a definition and demonstration

Major scales demo

with a definition and demonstration

Natural minor scales demo

with a definition and demonstration

This virtual piano can be played in three ways:
  • use the mouse to click on the piano keys
  • use your fingers to touch the piano keys on a touch screen
  • use your fingers to press the computer keyboard keys

Use the computer keyboard to play the virtual piano

  • C3 to C5 on every laptop keyboard

    Every physical computer keyboard allows you to play notes from two octaves between C3 to C5.The white keys are mapped to the second row of keys: Tab, Q, ..., [, ] and Backslash.The black keys are mapped to the first row of keys: 1, 2, ..., =, Backspace.For example, C3 is played by pressing Tab while C#3 is played by pressing 1 and D3 is played by pressing Q and so on.Note that B4 is played by pressing the backslash key, while the Enter key plays C5.

  • C3 to G5 with a numeric keypad

    If your laptop has a numeric keypad then the row of white keys is extended with new white keys after Backlash: 7, 8, 9, +, Enter.The new black keys on the first row will be /, * and -.

  • C3 to C6 on an external keyboard

    If you have an external keyboard with a navigation cluster and a numeric keypad,then you can play three octaves from C3 to C6.The Delete key will play C5, Home - C#5, End - D5 and so on to 7 on the numpad being F5 and so on.

By default, the main part of the computer keyboard plays from C3 to C5 but you can change it to any other two octaves between C and C.You can use the selector below the piano keyboard or you can press the Left and Right arrows on the computer keyboard.

Play any chords with the computer keyboard

The keys from the row A,S,D and the row Z,X,C are programmed to play white key chords for rich melodies.Moreover, with advanced options you can assign any user-defined chord or single note to any key of the computer keyboard.Tick the CHORD checkbox to indicate a chord on the piano keyboard and then check it off to create a custom-made chord button.This button will play your chord but it can also be configured to be associated with a computer keyboard key.

Record and playback

You can record anything played by this virtual piano keyboard and play it back at will.To start and stop recording check and uncheck the box RECORD. A playback button will appear automatically.You can have many playback buttons: each with its own recording. You can even play back more than one recording at the same time while making another recording to combine them.

Download audio files for your recordings

Each recording can be downloaded as a MIDI file.Such a file can be played by Windows Media Player directly orit can be converted online for free to an mp3 file.

First make a recording and then locate the button which plays this recording.Next click the settings icon beside the button.Then click the download audio button.

Please donate if you find this feature useful.I had to buy a more expensive hosting service to be able to run the script which generates MIDI files.And generally I struggle to find the time to work on my virtual pianobecause the website brings so little money that I need to focus all my efforts on my job just to survive financially.

Save your work

Your recordings and your custom chords are stored as buttons which can be dragged around to shift position.You can save all your buttons as a text file to your hard drive and then load this file later.Each button can be renamed and configured to be triggered by any key from the computer keyboard.You can program your computer keyboard so that each key plays a custom chord or a playback recording and then save the layout for later.

Bookmark your chords

You can generate a link that encodes all the chords from your buttons.For example, this link encodes all the possible three-note C major chords between C3 and C5:https://www.apronus.com/music/flashpiano.htm?c=48-52-55_48-52-67_48-55-64_48-64-67_52-55-60_52-55-72_52-60-67_52-67-72_55-60-64_55-64-72_60-64-67_64-67-72The online piano will be able to play all these chords after an appropriate button is clicked.

This online piano is available offline

This is an online piano in the sense that it needs a live Internet connection to work.But there is an offline version available as a single HTML file that you can open in your browser without being connected to the Internet.Note that the offline version does not have certain features which require a connection.It won't save your work and you can't download audio files of your recordings.The better sound quality option is not available.You can use it offline for private personal use including in a school classroom or in a private class.Contact me directly if you are interested.

Solfège is optional

You can load this online piano from the linkhttps://www.apronus.com/music/flashpiano.htm?solfege=1.

Better sound quality

The default sound files are optimized for speed of loading so that you can start playing the piano immediately without waiting for the sounds to load.However, this comes at the cost of reduced quality, which may be an issue when using external loudspeakers or headphones.Fortunately, you can optionally load better sounds if you need higher sound quality.

Chord recognition

You can check the CHORD checkbox to form any chord. This piano will recognize the following types of chords and display the full name:
  • major chords
  • minor chords
  • diminished chords
  • augmented chords
  • dominant seventh chords
  • major seventh chords
  • minor seventh chords
  • diminished seventh chords
  • augmented seventh chords
  • suspended second chords
  • suspended fourth chords
  • power chords

Virtual guitar

You might also be interested in my virtual guitarthat plays all the major chords, minor chords, and dominant sevenths chords. In fact, it can play any chords at all.But more importantly, the notes on the fretboard are visualized on a separate virtual piano keyboard which serves to explain how the guitar worksto those who already understand the piano.

Feedback is welcome

I have the ambition to make it the most useful virtual piano online simulator in the world so I need to know what exactly my users expect when they play it.Please feel free to write any comments and remarks by using the email address displayed on theApronus.com homepage.

Privacy Policy

Virtual Piano Keyboard | Online Piano at Apronus.com (2024)
Top Articles
Latest Posts
Recommended Articles
Article information

Author: Aracelis Kilback

Last Updated:

Views: 6458

Rating: 4.3 / 5 (64 voted)

Reviews: 95% of readers found this page helpful

Author information

Name: Aracelis Kilback

Birthday: 1994-11-22

Address: Apt. 895 30151 Green Plain, Lake Mariela, RI 98141

Phone: +5992291857476

Job: Legal Officer

Hobby: LARPing, role-playing games, Slacklining, Reading, Inline skating, Brazilian jiu-jitsu, Dance

Introduction: My name is Aracelis Kilback, I am a nice, gentle, agreeable, joyous, attractive, combative, gifted person who loves writing and wants to share my knowledge and understanding with you.