{"id":1946,"date":"2019-11-20T21:35:51","date_gmt":"2019-11-20T20:35:51","guid":{"rendered":"https:\/\/www.benton.si\/?page_id=1946"},"modified":"2019-11-20T21:45:10","modified_gmt":"2019-11-20T20:45:10","slug":"gallery","status":"publish","type":"page","link":"https:\/\/benton.si\/en\/gallery\/","title":{"rendered":"Gallery"},"content":{"rendered":"<div id=\"pl-gb1946-69ef30367089c\"  class=\"panel-layout\" ><div id=\"pg-gb1946-69ef30367089c-0\"  class=\"panel-grid panel-no-style\" ><div id=\"pgc-gb1946-69ef30367089c-0-0\"  class=\"panel-grid-cell\" ><div id=\"panel-gb1946-69ef30367089c-0-0-0\" class=\"widget_text so-panel widget widget_custom_html panel-first-child panel-last-child\" data-index=\"0\" ><div class=\"textwidget custom-html-widget\"><style>\r\n@media (max-width: 754px) {\r\n    #main-keyboard{ display: none; }\r\n}\r\n\r\nbutton\r\n{\r\n    cursor: pointer;\r\n}\r\n.hidden\r\n{\r\n    display: none;\r\n}\r\n\r\n\/****************************************************************************\/\r\n\/* App *\/\r\n\/****************************************************************************\/\r\n #app\r\n{\r\n    position: absolute;\r\n    top: 0;\r\n    bottom: 0;\r\n    left: 0;\r\n    right: 0;\r\n    margin: 4px;\r\n    background-color: #77A;\r\n    background: -webkit-linear-gradient(top, white, #003);\r\n    background: -moz-linear-gradient(top, white, #003);\r\n    background: -ms-linear-gradient(top, white, #003);\r\n    background: linear-gradient(top, white, #003);\r\n}\r\n\r\n#app>header\r\n{\r\n    margin: 0;\r\n    padding: 0 0.5em;\r\n    font-size: 1.5em;\r\n    color: WhiteSmoke;\r\n    background-color: #006;\r\n}\r\n\r\n#app>footer\r\n{\r\n    position: absolute;\r\n    bottom: 0;\r\n    padding: 0.25em;\r\n    color: WhiteSmoke;\r\n}\r\n\r\n#main-keyboard\r\n{\r\n    \/*padding: 4px;*\/\r\n    text-align: center;\r\n    min-width:240px;\r\n}\r\n\r\n.keyboard\r\n{\r\n    padding-bottom: 6px;\r\n    background-color: #000;\r\n    background: -webkit-linear-gradient(top, #ccc, #000);\r\n    background: -moz-linear-gradient(top, #ccc, #000);\r\n    background: -ms-linear-gradient(top, #ccc, #000);\r\n    background: linear-gradient(top, #ccc, #000);\r\n    box-shadow: 3px 3px 4px 1px rgba(0, 0, 0, 0.9);\r\n}\r\n \r\n.backboard\r\n{\r\n    position: relative;\r\n    height: 1px;\r\n    background-color: #1B2786;\r\n    border-bottom: 2px solid black;\r\n    box-shadow: 3px 3px 4px 1px rgba(0, 0, 0, 0.9);\r\n}\r\n\r\n\r\n.keyboard .piano-key\r\n{\r\n    display: inline-block;\r\n    border-bottom-right-radius: 4px;\r\n    border-bottom-left-radius: 4px;\r\n    cursor: pointer;\r\n}\r\n\r\n.keyboard .piano-key.white\r\n{\r\n    width: 4.8%;\r\n    height: 250px;\r\n    background-color: Ivory;\r\n    box-shadow: 3px 3px 4px 1px rgba(0, 0, 0, 0.7);\r\n    z-index: 1;\r\n}\r\n.keyboard .piano-key.white.down\r\n{\r\n    background-color: #F1F1F0;\r\n    \/*\r\n    background: -webkit-linear-gradient(top, Ivory, #D5D5D0);\r\n    background: -moz-linear-gradient(top, Ivory, #D5D5D0);\r\n    background: -ms-linear-gradient(top, Ivory, #D5D5D0);\r\n    background: linear-gradient(top, Ivory, #D5D5D0);*\/\r\n    box-shadow: 2px 2px 3px 1px rgba(0, 0, 0, 0.6);\r\n}\r\n\r\n.keyboard .piano-key.black\r\n{\r\n    position: relative;\r\n    width: 3.7%;\r\n    height: 150px;\r\n    left: -2%;\r\n    margin-right: -4%;\r\n    vertical-align: top;\r\n    background-color: black;\r\n    box-shadow: 2px 2px 3px 1px rgba(0, 0, 0, 0.6);\r\n    z-index: 2;\r\n}\r\n.keyboard .piano-key.black.down\r\n{\r\n    background-color: #111;\r\n    background: -webkit-linear-gradient(top, Black, #222);\r\n    background: -moz-linear-gradient(top, Black, #222);\r\n    background: -ms-linear-gradient(top, Black, #222);\r\n    background: linear-gradient(top, Black, #222);\r\n    box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.6);\r\n}\r\n\r\n<\/style>\r\n\r\n<style>\r\nbody {\r\n  font-family: Arial, sans-serif;\r\n  background: url(http:\/\/www.shukatsu-note.com\/wp-content\/uploads\/2014\/12\/computer-564136_1280.jpg) no-repeat;\r\n  background-size: cover;\r\n  height: 100vh;\r\n}\r\n\r\n.box {\r\n  width: 40%;\r\n  margin: 0 auto;\r\n  background: rgba(255,255,255,0.2);\r\n  padding: 35px;\r\n  border: 2px solid #fff;\r\n  border-radius: 20px\/50px;\r\n  background-clip: padding-box;\r\n  text-align: center;\r\n}\r\n\r\n.button {\r\n  font-size: 1em;\r\n  padding: 10px;\r\n  color: #fff;\r\n  border: 2px solid #06D85F;\r\n  border-radius: 20px\/50px;\r\n  text-decoration: none;\r\n  cursor: pointer;\r\n  transition: all 0.3s ease-out;\r\n}\r\n.button:hover {\r\n  background: #06D85F;\r\n}\r\n\r\n.overlay {\r\n  position: fixed;\r\n  top: 0;\r\n  bottom: 0;\r\n  left: 0;\r\n  right: 0;\r\n  background: rgba(0, 0, 0, 0.7);\r\n  transition: opacity 500ms;\r\n  visibility: hidden;\r\n  opacity: 0;\r\nz-index: 10000;\r\n}\r\n.overlay:target {\r\n  visibility: visible;\r\n  opacity: 1;\r\n}\r\n\r\n.popup {\r\n  margin: 70px auto;\r\n  padding: 20px;\r\n  background: #fff;\r\n  border-radius: 5px;\r\n  width: 30%;\r\n  position: relative;\r\n  transition: all 5s ease-in-out;\r\n}\r\n\r\n.popup h2 {\r\n  margin-top: 0;\r\n  color: #333;\r\n  font-family: Tahoma, Arial, sans-serif;\r\n}\r\n.popup .close {\r\n  position: absolute;\r\n  top: 20px;\r\n  right: 30px;\r\n  transition: all 200ms;\r\n  font-size: 30px;\r\n  font-weight: bold;\r\n  text-decoration: none;\r\n  color: #333;\r\n}\r\n.popup .close:hover {\r\n  color: #06D85F;\r\n}\r\n.popup .content {\r\n  max-height: 30%;\r\n  overflow: auto;\r\n}\r\n\r\n@media screen and (max-width: 700px){\r\n  .box{\r\n    width: 70%;\r\n  }\r\n  .popup{\r\n    width: 70%;\r\n  }\r\n}\r\n<\/style>\r\n\r\n\r\n\r\n<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.8.2\/jquery.min.js\"><\/script>\r\n<script type=\"text\/javascript\">\r\n\r\n\/\/ Extends jQuery with some touch event binders\r\n(function($)\r\n{\r\n    $.fn.touchstart = function(handler)\r\n    {\r\n        this.each(function(i, e) { e.addEventListener(\"touchstart\", handler); });\r\n        return this;\r\n    };\r\n\r\n    $.fn.touchmove = function(handler)\r\n    {\r\n        this.each(function(i, e) { e.addEventListener(\"touchmove\", handler); });\r\n        return this;\r\n    };\r\n\r\n    $.fn.touchend = function(handler)\r\n    {\r\n        this.each(function(i, e) { e.addEventListener(\"touchend\", handler); });\r\n        return this;\r\n    };\r\n\r\n    $.isTouchSupported = (\"ontouchstart\" in document.documentElement);\r\n\r\n})(jQuery);\r\n\r\nkeyCodes =\r\n{\r\n    TAB: 9,\r\n    ENTER: 13,\r\n    SHIFT: 16,\r\n    CONTROL: 17,\r\n    ESCAPE: 27,\r\n    SPACE: 32,\r\n    HOME: 36,\r\n    LEFT: 37,\r\n    UP: 38,\r\n    RIGHT: 39,\r\n    DOWN: 40,\r\n    DELETE: 46,\r\n    NUM0: 48,\r\n    NUM1: 49,\r\n    NUM2: 50,\r\n    NUM3: 51,\r\n    NUM4: 52,\r\n    NUM5: 53,\r\n    NUM6: 54,\r\n    NUM7: 55,\r\n    NUM8: 56,\r\n    NUM9: 57,\r\n    A: 65,\r\n    B: 66,\r\n    C: 67,\r\n    D: 68,\r\n    E: 69,\r\n    F: 70,\r\n    G: 71,\r\n    H: 72,\r\n    I: 73,\r\n    J: 74,\r\n    K: 75,\r\n    L: 76,\r\n    M: 77,\r\n    N: 78,\r\n    O: 79,\r\n    P: 80,\r\n    Q: 81,\r\n    R: 82,\r\n    S: 83,\r\n    T: 84,\r\n    U: 85,\r\n    V: 86,\r\n    W: 87,\r\n    X: 88,\r\n    Y: 89,\r\n    Z: 90,\r\n    KEY4: 52,\r\n    COMMA: 188,\r\n    PERIOD: 190,\r\n    NUL: 0\r\n};\r\n\r\n\r\n\"use strict\";\r\n\r\n\/**\r\n* The audio manager provides support for loading audio files.\r\n* @param audioPath The default path to look for audio files\r\n*\/\r\nfunction AudioManager(audioPath)\r\n{\r\n    audioPath = audioPath || \"\";\r\n    var audios = {},\r\n        audioExt = getSupportedFileTypeExt();\r\n\r\n    this.getAudio = function(name, onLoaded, onError)\r\n    {\r\n        var audio = audios[name];\r\n        if (!audio)\r\n        {\r\n            audio = createAudio(name, onLoaded, onError);\r\n            \/\/ Add to cache\r\n            audios[name] = audio;\r\n        }\r\n        else if (onLoaded)\r\n        {\r\n            onLoaded(audio);\r\n        }\r\n        return audio;\r\n    };\r\n\r\n    function createAudio(name, onLoaded, onError)\r\n    {\r\n        \/\/console.log(\"Loading audio: \" + name);\r\n        var audio = $(\"<audio>\")[0];\r\n        audio.addEventListener(\"canplaythrough\", function()\r\n        {\r\n            \/\/console.log(\"Audio loaded: \" + name);\r\n            if (onLoaded) onLoaded(audio);\r\n            \/\/ In firefox we keep getting these events if it's not removed\r\n            audio.removeEventListener(\"canplaythrough\", arguments.callee);\r\n        });\r\n        audio.onerror = function()\r\n        {\r\n            \/\/console.log(\"Error loading audio: \" + audio.src);\r\n            if (onError) onError(audio);\r\n        };\r\n        audio.src = audioPath + \"\" + name + audioExt;\r\n        return audio;\r\n    }\r\n\r\n    function getSupportedFileTypeExt()\r\n    {\r\n        var audio = $(\"<audio>\")[0];\r\n        if (audio.canPlayType(\"audio\/ogg\")) return \".ogg\";\r\n        if (audio.canPlayType(\"audio\/mpeg\")) return \".mp3\";\r\n        if (audio.canPlayType(\"audio\/wav\")) return \".wav\";\r\n        return \"\";\r\n    };\r\n    \r\n    this.each = function(callback)\r\n    {\r\n        for (var i in audios)\r\n        {\r\n            callback(audios[i]);\r\n        }\r\n    };\r\n}\r\n\r\n\r\n\"use strict\";\r\n\r\nfunction PianoApp()\r\n{\r\n    var version = \"6.2\",\r\n        audioManager = new AudioManager(\"\/audio\/\"),\r\n        keyCodesToNotes = {};\r\n\r\n    function setStatus(message)\r\n    {\r\n        $(\"#app footer\").text(message);\r\n    }\r\n    \r\n    function loadAudio()\r\n    {\r\n        var count = 0,\r\n            loaded = 0,\r\n            error = false;\r\n        \r\n        $(\".keyboard .piano-key\").each(function()\r\n        {\r\n            count++;\r\n            var noteName = escape($(this).data(\"note\"));\r\n            audioManager.getAudio(noteName,\r\n                function()\r\n                {\r\n                    if (error) return;\r\n                    if (++loaded == count) setStatus(\"Ready.\");\r\n                    else setStatus(\"Loading \" + Math.floor(100 * loaded \/ count) + \"%\");\r\n                },\r\n                function(audio)\r\n                {\r\n                    error = true;\r\n                    setStatus(\"Error loading: \" + audio.src);\r\n                }\r\n            );\r\n        });\r\n    }\r\n    \r\n    function initKeyboard()\r\n    {\r\n        if (keyCodesToNotes) {\r\n            keyCodesToNotes = {};\r\n        }\r\n        var $keys = $(\".keyboard .piano-key\");\r\n        if ($.isTouchSupported)\r\n        {\r\n            $keys.touchstart(function(e) {\r\n                e.stopPropagation();\r\n                e.preventDefault();\r\n                keyDown($(this));\r\n            })\r\n            .touchend(function() { keyUp($(this)); })\r\n        }\r\n        else\r\n        {\r\n            $keys.mousedown(function() {\r\n                keyDown($(this));\r\n                return false;\r\n            })\r\n            .mouseup(function() { keyUp($(this)); })\r\n            .mouseleave(function() { keyUp($(this)); });\r\n        }\r\n\r\n        \/\/ Create mapping of key codes to notes\r\n        $keys.each(function() {\r\n            var $key = $(this);\r\n\r\n            \r\n\r\n            \/\/if (($key.data(\"keycode\")=='Y')) {\r\n                \/\/console.log($key.data(\"keycode\").charCodeAt(0));\r\n            \/\/}\r\n\r\n            \/*\r\n            if (typeof(keyboardLanguage)==='undefined') {\r\n                \/\/alert('undefined');\r\n                var keyCode = keyCodesSI[$key.data(\"keycode\")];\r\n            } else if (keyboardLanguage=='EN') {\r\n                \/\/alert('EN');\r\n                var keyCode = keyCodesEN[$key.data(\"keycode\")];\r\n            } else if (keyboardLanguage=='SI') {\r\n                \/\/alert('SI');\r\n                var keyCode = keyCodesSI[$key.data(\"keycode\")];\r\n            }\r\n            *\/\r\n\r\n            var keyCode = keyCodes[$key.data(\"keycode\")];\r\n            \r\n            keyCodesToNotes[keyCode] = $key.data(\"note\");\r\n\r\n        });\r\n    }\r\n    \r\n    function keyDown($key)\r\n    {\r\n        \/\/ Make sure it's not already pressed\r\n        if (!$key.hasClass(\"down\"))\r\n        {   \r\n            if (!$(\"#searchBtn\").hasClass(\"active\")) {\r\n\r\n                \/\/if ($(\"input:focus\")) {\r\n                    \/\/console.log($(document.activeElement));\r\n                \/\/}\r\n                var focus = 0;\r\n                $(\":focus\").each(function() {\r\n                    if  ((this.id=='ContactFormSendEmailFrom') || \r\n                        (this.id=='ContactFormSendName') || \r\n                        (this.id=='ContactFormSendData2')) {\r\n                        focus = 1;\r\n                    }\r\n                });\r\n\r\n                if (focus==0) {\r\n\r\n                    $key.addClass(\"down\");\r\n                    var noteName = $key.data(\"note\");\r\n                    var audio = audioManager.getAudio(escape(noteName));\r\n                    audio.currentTime = 0;\r\n                    audio.play();\r\n                }\r\n\r\n                \r\n            }         \r\n           \r\n        }\r\n    }\r\n    \r\n    function keyUp($key)\r\n    {\r\n        $key.removeClass(\"down\");\r\n    }\r\n    \r\n    function onKeyDown(e)\r\n    {\r\n        var note = keyCodesToNotes[e.which];\r\n        if (note)\r\n        {\r\n            pressPianoKey(note);\r\n        }\r\n    }\r\n    \r\n    function onKeyUp(e)\r\n    {\r\n        var note = keyCodesToNotes[e.which];\r\n        if (note)\r\n        {\r\n            releasePianoKey(note);\r\n        }\r\n    }\r\n    \r\n    function pressPianoKey(note)\r\n    {\r\n        var $key = getPianoKeyElement(note);\r\n        keyDown($key);\r\n    }\r\n    \r\n    function releasePianoKey(note)\r\n    {\r\n        var $key = getPianoKeyElement(note);\r\n        keyUp($key);\r\n    }\r\n\r\n    function getPianoKeyElement(note)\r\n    {\r\n        return $(\".keyboard .piano-key[data-note=\" + note + \"]\");\r\n    }\r\n    \r\n    this.start = function()\r\n    {\r\n        $(\"#app header\").append(version);\r\n        setStatus(\"Loading...\");\r\n        \r\n        loadAudio();\r\n        initKeyboard();\r\n\r\n        $(document).keydown(onKeyDown)\r\n                   .keyup(onKeyUp);\r\n    };\r\n}\r\n\r\n$(function()\r\n{\r\n    window.app = new PianoApp();\r\n    window.app.start();\r\n});\r\n\r\n\r\n\r\n<\/script>\r\n\r\n\r\n\r\n<div id=\"keyboardShortcut\" class=\"overlay\">\r\n<div class=\"popup\">\r\n<h2>Keyboard instructions<\/h2>\r\n\t\t<a class=\"close\" href=\"#\">\u00d7<\/a>\r\n\t\t<div class=\"content\">\r\n                <table class=\"table table-condensed\">\r\n                    <thead>\r\n                        <tr>\r\n                            <th>Key on keyboard<\/th>\r\n                            <th>Sound<\/th>\r\n                        <\/tr>\r\n                    <\/thead>\r\n                    <tbody>\r\n                        <tr>\r\n                            <td>Q<\/td>\r\n                            <td>C2<\/td>\r\n                        <\/tr>\r\n                        <tr>\r\n                            <td>2<\/td>\r\n                            <td>C#2<\/td>\r\n                        <\/tr>\r\n                        <tr>\r\n                            <td>W<\/td>\r\n                            <td>D2<\/td>\r\n                        <\/tr>\r\n                        <tr>\r\n                            <td>3<\/td>\r\n                            <td>D#2<\/td>\r\n                        <\/tr>\r\n                        <tr>\r\n                            <td>E<\/td>\r\n                            <td>E2<\/td>\r\n                        <\/tr> \r\n                        <tr>\r\n                            <td>R<\/td>\r\n                            <td>F2<\/td>\r\n                        <\/tr>\r\n                        <tr>\r\n                            <td>5<\/td>\r\n                            <td>F#2<\/td>\r\n                        <\/tr> \r\n                        <tr>\r\n                            <td>T<\/td>\r\n                            <td>G2<\/td>\r\n                        <\/tr>\r\n                        <tr>\r\n                            <td>6<\/td>\r\n                            <td>G#2<\/td>\r\n                        <\/tr>\r\n                        <tr>\r\n                            <td>Z<\/td>\r\n                            <td>A2<\/td>\r\n                        <\/tr>\r\n                        <tr>\r\n                            <td>7<\/td>\r\n                            <td>A#2<\/td>\r\n                        <\/tr>\r\n                        <tr>\r\n                            <td>U<\/td>\r\n                            <td>B2<\/td>\r\n                        <\/tr>\r\n                        <tr>\r\n                            <td>Y<\/td>\r\n                            <td>C3<\/td>\r\n                        <\/tr>\r\n                        <tr>\r\n                            <td>S<\/td>\r\n                            <td>C#3<\/td>\r\n                        <\/tr>\r\n                        <tr>\r\n                            <td>X<\/td>\r\n                            <td>D3<\/td>\r\n                        <\/tr>\r\n                        <tr>\r\n                            <td>D<\/td>\r\n                            <td>D#3<\/td>\r\n                        <\/tr>\r\n                        <tr>\r\n                            <td>C<\/td>\r\n                            <td>E3<\/td>\r\n                        <\/tr>\r\n                        <tr>\r\n                            <td>V<\/td>\r\n                            <td>F3<\/td>\r\n                        <\/tr>\r\n                        <tr>\r\n                            <td>G<\/td>\r\n                            <td>F#3<\/td>\r\n                        <\/tr>\r\n                        <tr>\r\n                            <td>B<\/td>\r\n                            <td>G3<\/td>\r\n                        <\/tr>\r\n                        <tr>\r\n                            <td>H<\/td>\r\n                            <td>G#3<\/td>\r\n                        <\/tr>\r\n                        <tr>\r\n                            <td>N<\/td>\r\n                            <td>A3<\/td>\r\n                        <\/tr>\r\n                        <tr>\r\n                            <td>J<\/td>\r\n                            <td>A#3<\/td>\r\n                        <\/tr>\r\n                        <tr>\r\n                            <td>M<\/td>\r\n                            <td>B3<\/td>\r\n                        <\/tr>\r\n                        <tr>\r\n                            <td>,<\/td>\r\n                            <td>C4<\/td>\r\n                        <\/tr>\r\n                    <\/tbody>\r\n                <\/table>\r\n<\/div>\r\n<\/div>\r\n            <\/div>\r\n\r\n\t\t\t<div id=\"slideshow\" class=\"gradient white\">\r\n\t\t\t\t<div class=\"container\">\r\n\t\t\t\t\t<div id=\"main-keyboard\">\r\n\r\n\r\n<div style='position:absolute'>\r\n\t\t\t\t\t\t<a href=\"#keyboardShortcut\" data-rel=\"prettyPhoto\"><img decoding=\"async\" width=\"30px\" style=\"cursor:pointer;margin-top:10px;margin-left:10px;\" title=\"Play on piano\" src=\"\/images\/keyboard.png\"><\/a>\r\n\t\t\t\t\t<\/div>\r\n\r\n\t\t\t        <div class=\"keys\">\r\n\t\t\t            <div class=\"keyboard\">\r\n\t\t\t                <div class=\"backboard\"><\/div>\r\n\t\t\t                    <div data-note=\"2C\" data-keycode=\"Q\" class=\"piano-key white\" title=\"C2\"><\/div>\r\n\t\t\t                    <div data-note=\"2C_\" data-keycode=\"NUM2\" class=\"piano-key black\" title=\"C#2\"><\/div>\r\n\t\t\t                    <div data-note=\"2D\" data-keycode=\"W\" class=\"piano-key white\" title=\"D2\"><\/div>\r\n\t\t\t                    <div data-note=\"2D_\" data-keycode=\"NUM3\" class=\"piano-key black\" title=\"D#2\"><\/div>\r\n\t\t\t                    <div data-note=\"2E\" data-keycode=\"E\" class=\"piano-key white\" title=\"E2\"><\/div>\r\n\t\t\t                    <div data-note=\"2F\" data-keycode=\"R\" class=\"piano-key white\" title=\"F2\"><\/div>\r\n\t\t\t                    <div data-note=\"2F_\" data-keycode=\"NUM5\" class=\"piano-key black\" title=\"F#2\"><\/div>\r\n\t\t\t                    <div data-note=\"2G\" data-keycode=\"T\" class=\"piano-key white\" title=\"G2\"><\/div>\r\n\t\t\t                    <div data-note=\"2G_\" data-keycode=\"NUM6\" class=\"piano-key black\" title=\"G#2\"><\/div>\r\n\t\t\t                    <div data-note=\"2A\" data-keycode=\"Z\" class=\"piano-key white\" title=\"A2\"><\/div>\r\n\t\t\t                    <div data-note=\"2A_\" data-keycode=\"NUM7\" class=\"piano-key black\" title=\"A#2\"><\/div>\r\n\t\t\t                    <div data-note=\"2B\" data-keycode=\"U\" class=\"piano-key white\" title=\"B2\"><\/div>\r\n\t\t\t                    <div data-note=\"3C\" data-keycode=\"Y\" class=\"piano-key white\" title=\"C3\"><\/div>\r\n\t\t\t                    <div data-note=\"3C_\" data-keycode=\"S\" class=\"piano-key black\" title=\"C#3\"><\/div>\r\n\t\t\t                    <div data-note=\"3D\" data-keycode=\"X\" class=\"piano-key white\" title=\"D3\"><\/div>\r\n\t\t\t                    <div data-note=\"3D_\" data-keycode=\"D\" class=\"piano-key black\" title=\"D#3\"><\/div>\r\n\t\t\t                    <div data-note=\"3E\" data-keycode=\"C\" class=\"piano-key white\" title=\"E3\"><\/div>\r\n\t\t\t                    <div data-note=\"3F\" data-keycode=\"V\" class=\"piano-key white\" title=\"F3\"><\/div>\r\n\t\t\t                    <div data-note=\"3F_\" data-keycode=\"G\" class=\"piano-key black\" title=\"F#3\"><\/div>\r\n\t\t\t                    <div data-note=\"3G\" data-keycode=\"B\" class=\"piano-key white\" title=\"G3\"><\/div>\r\n\t\t\t                    <div data-note=\"3G_\" data-keycode=\"H\" class=\"piano-key black\" title=\"G#3\"><\/div>\r\n\t\t\t                    <div data-note=\"3A\" data-keycode=\"N\" class=\"piano-key white\" title=\"A3\"><\/div>\r\n\t\t\t                    <div data-note=\"3A_\" data-keycode=\"J\" class=\"piano-key black\" title=\"A#3\"><\/div>\r\n\t\t\t                    <div data-note=\"3B\" data-keycode=\"M\" class=\"piano-key white\" title=\"B3\"><\/div>\r\n\t\t\t                    <div data-note=\"4C\" data-keycode=\"COMMA\" class=\"piano-key white\" title=\"C4\"><\/div>\r\n\t\t\t                <\/div>\r\n\t\t\t            <\/div>\r\n\t\t\t        <\/div>\r\n\r\n\t\t\t      \r\n\t\t\t\t<\/div>\r\n\t\t\t<\/div>\n\n<\/div><\/div><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-1946","page","type-page","status-publish","hentry","post"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/benton.si\/en\/wp-json\/wp\/v2\/pages\/1946","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/benton.si\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/benton.si\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/benton.si\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/benton.si\/en\/wp-json\/wp\/v2\/comments?post=1946"}],"version-history":[{"count":0,"href":"https:\/\/benton.si\/en\/wp-json\/wp\/v2\/pages\/1946\/revisions"}],"wp:attachment":[{"href":"https:\/\/benton.si\/en\/wp-json\/wp\/v2\/media?parent=1946"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}