{"id":220,"date":"2026-02-23T10:25:42","date_gmt":"2026-02-23T10:25:42","guid":{"rendered":"https:\/\/georgesilvio.ro\/index.php\/metronom\/"},"modified":"2026-02-23T10:25:42","modified_gmt":"2026-02-23T10:25:42","slug":"metronom","status":"publish","type":"page","link":"https:\/\/georgesilvio.ro\/index.php\/metronom\/","title":{"rendered":"Metronom"},"content":{"rendered":"<div class=\"gs-toy-inline\" data-gs-toy-id=\"219\">\n  <main class=\"wrap\">\n    <section class=\"card\">\n      <header class=\"head\">\n        <div class=\"titleRow\">\n          <div class=\"icon\" aria-hidden=\"true\">\n            <svg viewBox=\"0 0 64 64\" width=\"34\" height=\"34\" role=\"img\" aria-label=\"Metronom\">\n              <path d=\"M26 8h12l10 46H16L26 8z\" fill=\"rgba(124,58,237,.10)\" stroke=\"rgba(15,23,42,.18)\" stroke-width=\"2\" \/>\n              <path d=\"M31 14h2v18l12 10-1.3 1.6L33 34.6V14z\" fill=\"rgba(76,29,149,1)\"\/>\n              <path d=\"M20 54h24\" stroke=\"rgba(15,23,42,.22)\" stroke-width=\"3\" stroke-linecap=\"round\"\/>\n              <circle cx=\"33\" cy=\"34\" r=\"2.5\" fill=\"rgba(76,29,149,1)\"\/>\n            <\/svg>\n          <\/div>\n          <div>\n            <h1>Metronom<\/h1>\n            <p class=\"sub\">Mod STUDENT (simplu) + Mod PROF (set\u0103ri avansate).<\/p>\n          <\/div>\n        <\/div>\n\n        <div class=\"right\">\n          <button class=\"btn smallBtn\" id=\"modeBtn\" type=\"button\" title=\"Comut\u0103 \u00eentre STUDENT \u0219i PROF\">PROF<\/button>\n          <span class=\"pill\" id=\"statusPill\" aria-live=\"polite\">STOP<\/span>\n        <\/div>\n      <\/header>\n\n      <div class=\"grid\" id=\"studentPanel\">\n        <div class=\"block\">\n          <label class=\"label\" for=\"bpm\">BPM<\/label>\n          <div class=\"bpmRow\">\n            <input id=\"bpm\" class=\"range\" type=\"range\" min=\"30\" max=\"240\" step=\"1\" value=\"90\" \/>\n            <input id=\"bpmNum\" class=\"num\" type=\"number\" min=\"30\" max=\"240\" step=\"1\" value=\"90\" inputmode=\"numeric\" \/>\n          <\/div>\n          <div class=\"hint\">Po\u021bi scrie orice valoare \u00eentre 30\u2013240 (Enter \/ click \u00een afar\u0103).<\/div>\n        <\/div>\n\n        <div class=\"block\">\n          <label class=\"label\" for=\"sigTop\">M\u0103sur\u0103<\/label>\n          <div class=\"sigRow\">\n            <select id=\"sigTop\" class=\"select\" aria-label=\"Num\u0103r\u0103tor m\u0103sur\u0103\">\n              <option>2<\/option><option>3<\/option><option selected>4<\/option><option>5<\/option><option>6<\/option><option>7<\/option><option>8<\/option><option>9<\/option><option>10<\/option><option>12<\/option>\n            <\/select>\n            <span class=\"slash\">\/<\/span>\n            <select id=\"sigBottom\" class=\"select\" aria-label=\"Numitor m\u0103sur\u0103\">\n              <option selected>4<\/option><option>8<\/option><option>2<\/option>\n            <\/select>\n          <\/div>\n          <div class=\"hint\">Accent pe beat 1 (implicit).<\/div>\n        <\/div>\n\n        <div class=\"block\">\n          <label class=\"label\">Accent<\/label>\n          <div class=\"toggles\">\n            <label class=\"toggle\">\n              <input id=\"accent\" type=\"checkbox\" checked \/>\n              <span>Accent pe prima b\u0103taie<\/span>\n            <\/label>\n            <label class=\"toggle\">\n              <input id=\"subdiv\" type=\"checkbox\" \/>\n              <span>Subdiviziune (8imi)<\/span>\n            <\/label>\n          <\/div>\n          <div class=\"hint\">PROF: ai \u0219i triole \/ 16imi \/ swing.<\/div>\n        <\/div>\n\n        <div class=\"block\">\n          <label class=\"label\" for=\"volume\">Volum<\/label>\n          <div class=\"bpmRow\">\n            <input id=\"volume\" class=\"range\" type=\"range\" min=\"0\" max=\"1\" step=\"0.01\" value=\"0.7\" \/>\n            <span class=\"volVal\" id=\"volVal\">70%<\/span>\n          <\/div>\n          <div class=\"hint\">Dac\u0103 nu se aude: apas\u0103 Start (permite audio).<\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"proWrap\" id=\"proWrap\" hidden>\n        <div class=\"proHead\">\n          <div class=\"proTitle\">Set\u0103ri PROF<\/div>\n          <div class=\"proHint\">Apare doar c\u00e2nd comu\u021bi pe PROF.<\/div>\n        <\/div>\n\n        <div class=\"proGrid\">\n          <div class=\"block\">\n            <label class=\"label\" for=\"accentMode\">Accent (pattern)<\/label>\n            <select id=\"accentMode\" class=\"select\">\n              <option value=\"first\">Doar 1<\/option>\n              <option value=\"none\">F\u0103r\u0103 accent<\/option>\n              <option value=\"one_three\">1 & 3<\/option>\n              <option value=\"two_four\">2 & 4<\/option>\n              <option value=\"custom\">Custom<\/option>\n            <\/select>\n            <div class=\"customAccents\" id=\"customAccents\" hidden><\/div>\n            <div class=\"hint\">Custom = bifezi ce b\u0103t\u0103i sunt accentuate (\u00een m\u0103sura curent\u0103).<\/div>\n          <\/div>\n\n          <div class=\"block\">\n            <label class=\"label\" for=\"subdivMode\">Subdiviziuni<\/label>\n            <select id=\"subdivMode\" class=\"select\">\n              <option value=\"off\">Off<\/option>\n              <option value=\"8\">8imi<\/option>\n              <option value=\"triplet\">Triole<\/option>\n              <option value=\"16\">16imi<\/option>\n              <option value=\"swing\">Swing (shuffle)<\/option>\n            <\/select>\n            <div class=\"hint\">Swing = al doilea \u201eoptime\u201d e mai t\u00e2rziu (feel de shuffle).<\/div>\n          <\/div>\n\n          <div class=\"block\">\n            <label class=\"label\" for=\"countIn\">Count-in<\/label>\n            <div class=\"row\">\n              <select id=\"countIn\" class=\"select\">\n                <option value=\"0\" selected>0 m\u0103suri<\/option>\n                <option value=\"1\">1 m\u0103sur\u0103<\/option>\n                <option value=\"2\">2 m\u0103suri<\/option>\n                <option value=\"3\">3 m\u0103suri<\/option>\n                <option value=\"4\">4 m\u0103suri<\/option>\n              <\/select>\n              <label class=\"toggle inline\">\n                <input id=\"countInSub\" type=\"checkbox\" \/>\n                <span>cu subdiviziuni<\/span>\n              <\/label>\n            <\/div>\n            <div class=\"hint\">Num\u0103r\u0103 \u00eenainte s\u0103 porneasc\u0103.<\/div>\n          <\/div>\n\n          <div class=\"block\">\n            <label class=\"label\">Training: silent measures<\/label>\n            <label class=\"toggle\">\n              <input id=\"silentOn\" type=\"checkbox\" \/>\n              <span>Activeaz\u0103 (ex: 3 m\u0103suri ON \/ 1 OFF)<\/span>\n            <\/label>\n            <div class=\"row\">\n              <input id=\"silentPlay\" class=\"num small\" type=\"number\" min=\"1\" max=\"16\" value=\"3\" \/>\n              <span class=\"mini\">ON<\/span>\n              <input id=\"silentMute\" class=\"num small\" type=\"number\" min=\"1\" max=\"16\" value=\"1\" \/>\n              <span class=\"mini\">OFF<\/span>\n            <\/div>\n          <\/div>\n\n          <div class=\"block\">\n            <label class=\"label\">Progressive BPM<\/label>\n            <label class=\"toggle\">\n              <input id=\"progOn\" type=\"checkbox\" \/>\n              <span>Cre\u0219te\/scade BPM treptat<\/span>\n            <\/label>\n            <div class=\"row\">\n              <span class=\"mini\">\u021aint\u0103<\/span>\n              <input id=\"progTarget\" class=\"num small\" type=\"number\" min=\"30\" max=\"240\" value=\"120\" \/>\n              <span class=\"mini\">Pas<\/span>\n              <input id=\"progStep\" class=\"num small\" type=\"number\" min=\"1\" max=\"20\" value=\"2\" \/>\n              <span class=\"mini\">la<\/span>\n              <input id=\"progEvery\" class=\"num small\" type=\"number\" min=\"1\" max=\"16\" value=\"4\" \/>\n              <span class=\"mini\">m\u0103suri<\/span>\n            <\/div>\n          <\/div>\n\n          <div class=\"block\">\n            <label class=\"label\" for=\"sound\">Sunet<\/label>\n            <select id=\"sound\" class=\"select\">\n              <option value=\"click\" selected>Click (digital)<\/option>\n              <option value=\"wood\">Wood block<\/option>\n              <option value=\"hat\">Hi-hat<\/option>\n              <option value=\"rim\">Rimshot<\/option>\n            <\/select>\n          <\/div>\n\n          <div class=\"block\">\n            <label class=\"label\">Tap (auto-start)<\/label>\n            <label class=\"toggle\">\n              <input id=\"tapAuto\" type=\"checkbox\" checked \/>\n              <span>Dup\u0103 4 tap-uri, porne\u0219te automat<\/span>\n            <\/label>\n          <\/div>\n\n          <div class=\"block\">\n            <label class=\"label\">Presets<\/label>\n            <div class=\"row\">\n              <select id=\"presetSel\" class=\"select grow\"><\/select>\n              <button class=\"btn\" id=\"presetLoad\" type=\"button\">Load<\/button>\n            <\/div>\n            <div class=\"row\">\n              <input id=\"presetName\" class=\"num grow\" type=\"text\" placeholder=\"Nume preset\" \/>\n              <button class=\"btn primary\" id=\"presetSave\" type=\"button\">Save<\/button>\n              <button class=\"btn danger\" id=\"presetDelete\" type=\"button\">Delete<\/button>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"viz\">\n        <div class=\"meter\" role=\"img\" aria-label=\"Indicator vizual metronom\">\n          <div class=\"pulse\" id=\"pulse\"><\/div>\n          <div class=\"ring\"><\/div>\n        <\/div>\n        <div class=\"beatInfo\">\n          <div class=\"beatLine\">\n            <span class=\"k\">Beat<\/span>\n            <span class=\"v\" id=\"beatText\">\u2014<\/span>\n          <\/div>\n          <div class=\"beatLine\">\n            <span class=\"k\">BPM<\/span>\n            <span class=\"v\" id=\"bpmText\">90<\/span>\n          <\/div>\n          <div class=\"beatLine\">\n            <span class=\"k\">M\u0103sur\u0103<\/span>\n            <span class=\"v\" id=\"sigText\">4\/4<\/span>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <footer class=\"foot\">\n        <button class=\"btn primary\" id=\"startBtn\" type=\"button\">Start<\/button>\n        <button class=\"btn\" id=\"tapBtn\" type=\"button\">Tap<\/button>\n        <button class=\"btn danger\" id=\"stopBtn\" type=\"button\" disabled>Stop<\/button>\n        <div class=\"small\">Tip: <kbd>Space<\/kbd> Start\/Stop, <kbd>T<\/kbd> Tap.<\/div>\n      <\/footer>\n    <\/section>\n  <\/main>\n\n  <\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-220","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/georgesilvio.ro\/index.php\/wp-json\/wp\/v2\/pages\/220","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/georgesilvio.ro\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/georgesilvio.ro\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/georgesilvio.ro\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/georgesilvio.ro\/index.php\/wp-json\/wp\/v2\/comments?post=220"}],"version-history":[{"count":0,"href":"https:\/\/georgesilvio.ro\/index.php\/wp-json\/wp\/v2\/pages\/220\/revisions"}],"wp:attachment":[{"href":"https:\/\/georgesilvio.ro\/index.php\/wp-json\/wp\/v2\/media?parent=220"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}