@theoryofnekomata/piano-keyboard/build/piano-keyboard.min.js

Simple piano keyboard in JavaScript

!function(t,e,a,i){var d=function(a){return t[e]=i.apply(null,a)};return"function"==typeof define&&define.amd?void define(a,function(){return new d(Array.prototype.slice.call(arguments))}):"object"==typeof module&&module.exports?void(module.exports=new d(a.map(function(t){return require(t)}))):new d(a.map(function(e){return t[e]}))}(this,"PianoKeyboard",[],function(){var t={GSharp:0,A:1,ASharp:2,B:3,C:4,CSharp:5,D:6,DSharp:7,E:8,F:9,FSharp:10,G:11},e=Object.keys(t).length,a=Object.keys(t).filter(function(t){return t.indexOf("Sharp")<0}).length,i=1,d=88,n=100,r=127,o=.015,c={standard:{81:40,50:41,87:42,51:43,69:44,82:45,53:46,84:47,54:48,89:49,55:50,85:51,73:52,57:53,79:54,48:55,80:56,219:57,187:58,221:59,90:28,83:29,88:30,68:31,67:32,86:33,71:34,66:35,72:36,78:37,74:38,77:39,188:40,76:41,190:42,186:43,191:44},janko:{}};return function(y){function s(t){return Math.floor((t+e-4)/e)}function u(t){for(;t<0;)t+=e;return t%e}function h(t){var i=[8/e+o/2,5/a,10/e,6/a,0,1/e,1/a,3/e+o,2/a,3/a,6/e+o,4/a];return i[u(t)]}function k(t){var e=["G"+x,"A","A"+x,"B","C","C"+x,"D","D"+x,"E","F","F"+x,"G"];return e[u(t)]}function p(){var t=parseFloat(G.whiteKeyWidth);if(isNaN(t))switch(G.whiteKeyWidth){case"auto":return"%"}return"px"}function l(){var t=f()*a/e;return"balanced"===G.keyProportion?f():"px"===p()?Math.ceil(t):t}function f(){var t=parseFloat(G.whiteKeyWidth),e=G.startKey,a=G.endKey;if(isNaN(t))switch(G.whiteKeyWidth){case"auto":return"balanced"===G.keyProportion?100/(G.endKey-G.startKey+1):100/v(e,a)}return t}function b(){var t=f(),e=h(G.startKey),i=s(G.startKey);return"balanced"===G.keyProportion?(G.startKey-1)*t:t*a*e+i*t*a}function v(e,a){var i,d=0;for(i=e;i<=a;i++)!function(e){switch(u(e)){case t.GSharp:case t.ASharp:case t.CSharp:case t.DSharp:case t.FSharp:return}++d}(i);return d}function w(e){var i=f(),d=h(e),n=s(e);if("balanced"===G.keyProportion){switch(u(e)){case t.A:case t.B:case t.D:case t.E:case t.G:return(e-1)*i-i/2-b()}return(e-1)*i-b()}return i*a*d+n*i*a-b()}function K(){var t,e="",a=f(),i=p();for(t=G.startKey;t<=G.endKey;t++)!function(t){var a;a=w(t),e+='.piano-keyboard[data-kbd-id="'+G.id+'"]>.key[data-key="'+t+'"]{left:'+a+i+"}"}(t);return e+='.piano-keyboard[data-kbd-id="'+G.id+'"]>.white.key{width:'+a+i+"}","%"!==i&&(e+="balanced"===G.keyProportion?'.piano-keyboard[data-kbd-id="'+G.id+'"]{width:'+(G.endKey-G.startKey+1)*a+i+"}":'.piano-keyboard[data-kbd-id="'+G.id+'"]{width:'+v(G.startKey,G.endKey)*a+i+"}"),"balanced"===G.keyProportion&&(e+='.piano-keyboard[data-kbd-id="'+G.id+'"]>.white.key[data-pitch="C"],.piano-keyboard[data-kbd-id="'+G.id+'"]>.white.key[data-pitch="E"],.piano-keyboard[data-kbd-id="'+G.id+'"]>.white.key[data-pitch="F"],.piano-keyboard[data-kbd-id="'+G.id+'"]>.white.key[data-pitch="B"]{width:'+1.5*a+i+"}",e+='.piano-keyboard[data-kbd-id="'+G.id+'"]>.white.key[data-pitch="D"],.piano-keyboard[data-kbd-id="'+G.id+'"]>.white.key[data-pitch="G"],.piano-keyboard[data-kbd-id="'+G.id+'"]>.white.key[data-pitch="A"]{width:'+2*a+i+"}",e+='.piano-keyboard[data-kbd-id="'+G.id+'"]>.white.key[data-pitch="C"]:last-child{width:'+a+i+"}",e+='.piano-keyboard[data-kbd-id="'+G.id+'"]>.white.key[data-pitch="D"]:last-child{width:'+1.5*a+i+"}",e+='.piano-keyboard[data-kbd-id="'+G.id+'"]>.white.key[data-pitch="F"]:last-child{width:'+a+i+"}",e+='.piano-keyboard[data-kbd-id="'+G.id+'"]>.white.key[data-pitch="G"]:last-child{width:'+1.5*a+i+"}",e+='.piano-keyboard[data-kbd-id="'+G.id+'"]>.white.key[data-pitch="A"]:last-child{width:'+1.5*a+i+"}",e+='.piano-keyboard[data-kbd-id="'+G.id+'"]>.white.key:first-child{left:0}',e+='.piano-keyboard[data-kbd-id="'+G.id+'"]>.white.key[data-pitch="D"]:first-child{width:'+1.5*a+i+"}",e+='.piano-keyboard[data-kbd-id="'+G.id+'"]>.white.key[data-pitch="E"]:first-child{width:'+a+i+"}",e+='.piano-keyboard[data-kbd-id="'+G.id+'"]>.white.key[data-pitch="G"]:first-child{width:'+1.5*a+i+"}",e+='.piano-keyboard[data-kbd-id="'+G.id+'"]>.white.key[data-pitch="A"]:first-child{width:'+1.5*a+i+"}",e+='.piano-keyboard[data-kbd-id="'+G.id+'"]>.white.key[data-pitch="B"]:first-child{width:'+a+i+"}"),e}function m(){var t="",e=l(),a=p();return t+='.piano-keyboard[data-kbd-id="'+G.id+'"]>.black.key{width:'+e+a+"}"}function L(){var t="";return t+=K(),t+=m()}function g(){var t;for(t=G.startKey;t<=G.endKey;t++)!function(t){var e=document.createElement("button"),a=k(t),i=s(t);e.dataset.key=t,e.dataset.octave=i,e.classList.add(a.indexOf(x)>-1?"black":"white"),e.dataset.pitch=a,e.classList.add("key"),e.setAttribute("tabindex",-1),y.appendChild(e)}(t)}function S(t){t.classList.add("-active")}function E(t){t.classList.remove("-active")}function C(t,e){var a=new CustomEvent(t);switch(a.eventName=t,t){case"noteon":case"noteoff":a.key=parseInt(e.key.dataset.key),a.velocity=parseInt(e.velocity),a.octave=parseInt(e.key.dataset.octave),a.pitch=e.key.dataset.pitch}return y.dispatchEvent(a),a}function D(){function t(t){var e;if(t.preventDefault(),1===t.buttons&&!t.target.classList.contains("-active")&&t.target.classList.contains("key")){if(0===y.tabIndex&&y.focus(),e=C("noteon",{key:t.target,velocity:t.velocity}),e.defaultPrevented)return;S(t.target)}}function e(t){var e;if(t.preventDefault(),t.target.classList.contains("-active")&&t.target.classList.contains("key")){if(e=C("noteoff",{key:t.target,velocity:t.velocity}),e.defaultPrevented)return;E(t.target)}}function a(t){var e,a,i,d;t.shiftKey||t.ctrlKey||t.altKey||t.metaKey||(e=G.bindingsMap.toLowerCase(),"undefined"!=typeof e&&(a=c[e][t.which],"undefined"!=typeof a&&(i=y.querySelector('[data-key="'+a+'"]'),i&&!i.classList.contains("-active")&&(d=C("noteon",{key:i,velocity:G.keyboardVelocity}),d.defaultPrevented||(t.preventDefault(),S(i))))))}function i(t){var e,a,i,d;t.shiftKey||t.ctrlKey||t.altKey||t.metaKey||(e=G.bindingsMap.toLowerCase(),"undefined"!=typeof e&&(a=c[e][t.which],"undefined"!=typeof a&&(i=y.querySelector('[data-key="'+a+'"]'),i&&i.classList.contains("-active")&&(d=C("noteoff",{key:i,velocity:G.keyboardVelocity}),d.defaultPrevented||(t.preventDefault(),E(i))))))}function d(e){var a=parseFloat(window.getComputedStyle(e.target).height),i=e.offsetY+parseFloat(getComputedStyle(e.target).borderTopWidth);u=Math.floor(r*(i/a)),e.velocity=u,t(e)}function n(t){t.velocity=u,e(t)}function o(e){e.velocity=u,t(e)}function s(t){t.velocity=u,e(t)}var u=0;y.addEventListener("keydown",a),y.addEventListener("keyup",i),y.addEventListener("mousedown",d,!0),y.addEventListener("mouseenter",o,!0),y.addEventListener("mouseup",n,!0),y.addEventListener("mouseleave",s,!0)}function A(){var t;G.id=y.dataset.kbdId=y.dataset.kbdId||Date.now(),G.startKey=parseInt(y.dataset.startKey)||i,G.endKey=parseInt(y.dataset.endKey)||d,G.whiteKeyWidth=y.dataset.whiteKeyWidth||"auto",G.keyboardVelocity=parseInt(y.dataset.keyboardVelocity)||n,G.keyProportion=y.dataset.keyProportion,isNaN(G.startKey)&&(G.startKey=i),isNaN(G.endKey)&&(G.endKey=d),G.startKey>G.endKey&&(t=G.startKey,G.startKey=G.endKey,G.endKey=t),G.bindingsMap="standard"}function P(){y.hasAttribute("tabindex")||y.setAttribute("tabindex",0)}function N(){var t=document.querySelector('style[data-kbd-id="'+G.id+'"]'),e=document.getElementsByTagName("head")[0]||document.body;t||(t=document.createElement("style"),t.dataset.kbdId=G.id,e.appendChild(t)),t.innerHTML=L(G),y.classList.contains(I)||y.classList.add(I)}function F(){y.playNote=function(t){var e,a=y.querySelector('[data-key="'+t.key+'"]');return!a||a.classList.contains("-active")?y:(e={key:a},e.velocity=t.velocity,e.pan=t.pan,C("noteon",e),S(a),y)},y.stopNote=function(t){var e,a=y.querySelector('[data-key="'+t.key+'"]');return!a||a.classList.contains("-active")?y:(e={key:a},e.velocity=t.velocity,e.pan=t.pan,C("noteoff",e),S(a),y)}}var x="#",I="piano-keyboard",G={};A(),N(),g(),D(),P(),F()}});