{"id":2898,"date":"2026-05-04T21:33:20","date_gmt":"2026-05-04T14:33:20","guid":{"rendered":"https:\/\/nlguitar.com\/?page_id=2898"},"modified":"2026-05-09T20:53:13","modified_gmt":"2026-05-09T13:53:13","slug":"metronome-online","status":"publish","type":"page","link":"https:\/\/nlguitar.com\/en\/metronome-online\/","title":{"rendered":"Metronome Online"},"content":{"rendered":"    <div class=\"nlg-v29-wrap\">\n        <div class=\"nlg-v29-container\">\n            <!-- C\u1ed8T TR\u00c1I: HI\u1ec2N TH\u1eca CH\u00cdNH -->\n            <div class=\"nlg-panel nlg-main-col\">\n                <div class=\"nlg-visual-header\">\n                    <div id=\"nlg_visual_dots\" class=\"nlg-dots-container\"><\/div>\n                <\/div>\n\n                <div class=\"nlg-main-content\">\n                    <div class=\"nlg-bpm-display\" id=\"nlg_bpm_val\">120<\/div>\n                    <div class=\"nlg-bpm-label\">BPM<\/div>\n                    \n                    <div class=\"nlg-slider-container-full\">\n                        <button class=\"nlg-step-btn\" id=\"nlg_bpm_minus\">\u2212<\/button>\n                        <input type=\"range\" id=\"nlg_bpm_slider\" min=\"20\" max=\"400\" value=\"120\">\n                        <button class=\"nlg-step-btn\" id=\"nlg_bpm_plus\">+<\/button>\n                    <\/div>\n                    \n                    <div class=\"nlg-controls-mini\">\n                        <button id=\"nlg_start_btn\" class=\"nlg-start-btn-mini\"><span id=\"nlg_btn_text\">START<\/span><\/button>\n                        <button id=\"nlg_tap_btn\" class=\"nlg-tap-btn-mini\">TAP<\/button>\n                    <\/div>\n                    \n                    <div class=\"nlg-section-title\">TIME SIGNATURE<\/div>\n                    <div class=\"nlg-ts-grid\" id=\"nlg_ts_group\">\n                        <button class=\"nlg-btn-box\" data-val=\"1\">1\/4<\/button>\n                        <button class=\"nlg-btn-box\" data-val=\"2\">2\/4<\/button>\n                        <button class=\"nlg-btn-box\" data-val=\"3\">3\/4<\/button>\n                        <button class=\"nlg-btn-box active\" data-val=\"4\">4\/4<\/button>\n                        <button class=\"nlg-btn-box\" data-val=\"5\">5\/4<\/button>\n                        <button class=\"nlg-btn-box\" data-val=\"6\">6\/4<\/button>\n                        <button class=\"nlg-btn-box\" data-val=\"3\">3\/8<\/button>\n                        <button class=\"nlg-btn-box\" data-val=\"6\">6\/8<\/button>\n                        <button class=\"nlg-btn-box\" data-val=\"7\">7\/8<\/button>\n                        <button class=\"nlg-btn-box\" data-val=\"9\">9\/8<\/button>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- C\u1ed8T PH\u1ea2I: T\u00d9Y CH\u1eccN -->\n            <div class=\"nlg-options-col\">\n                <div class=\"nlg-panel nlg-scroll-panel\" id=\"nlg_right_panel\">\n                    <div class=\"nlg-row-title\">Subdivision<\/div>\n                    <div class=\"nlg-flex-wrap\" id=\"nlg_subdiv_group\">\n                        <button class=\"nlg-btn-pill active\" data-val=\"1\">Quarter<\/button>\n                        <button class=\"nlg-btn-pill\" data-val=\"2\">8th<\/button>\n                        <button class=\"nlg-btn-pill\" data-val=\"4\">16th<\/button>\n                        <button class=\"nlg-btn-pill\" data-val=\"3\">Triplet<\/button>\n                        <button class=\"nlg-btn-pill\" data-val=\"shuffle\">Shuffle<\/button>\n                    <\/div>\n\n                    <div class=\"nlg-row-title\">Click sound<\/div>\n                    <div class=\"nlg-flex-wrap\" id=\"nlg_sound_group\">\n                        <button class=\"nlg-btn-pill active\" data-val=\"triangle\">Triangle<\/button>\n                        <button class=\"nlg-btn-pill\" data-val=\"square\">Square<\/button>\n                        <button class=\"nlg-btn-pill\" data-val=\"sine\">Sine<\/button>\n                        <button class=\"nlg-btn-pill\" data-val=\"click\">Click<\/button>\n                        <button class=\"nlg-btn-pill\" data-val=\"hihat\">Hi-hat<\/button>\n                    <\/div>\n\n                    <div class=\"nlg-row-title\">Volume: <span id=\"nlg_vol_num\" style=\"color:var(--nlg-primary)\">75%<\/span><\/div>\n                    <div class=\"nlg-vol-row-new\">\n                        <div id=\"nlg_mute_btn\" class=\"nlg-mute-icon\">\n                            <svg viewBox=\"0 0 24 24\" id=\"nlg_svg_vol\" width=\"24\" height=\"24\"><path fill=\"currentColor\" d=\"M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z\"\/><\/svg>\n                        <\/div>\n                        <span class=\"nlg-vol-edge\">0%<\/span>\n                        <div class=\"nlg-slider-wrapper\">\n                            <input type=\"range\" id=\"nlg_vol_slider\" min=\"0\" max=\"100\" value=\"75\">\n                        <\/div>\n                        <span class=\"nlg-vol-edge\">100%<\/span>\n                    <\/div>\n\n                    <div class=\"nlg-training-header\" style=\"margin-top:20px;\">Training Mode<\/div>\n                    <div class=\"nlg-row-title\">Silent bars<\/div>\n                    <div class=\"nlg-flex-wrap\" id=\"nlg_silent_group\">\n                        <button class=\"nlg-btn-pill active\" data-val=\"off\">Off<\/button>\n                        <button class=\"nlg-btn-pill\" data-val=\"every\">Every other bar<\/button>\n                        <button class=\"nlg-btn-pill\" data-val=\"2on1off\">2 bars on, 1 off<\/button>\n                    <\/div>\n\n                    <div class=\"nlg-row-title\">Stop after N bars<\/div>\n                    <div class=\"nlg-flex-wrap\" id=\"nlg_stop_bars_group\">\n                        <button class=\"nlg-btn-pill active\" data-val=\"off\">Off<\/button>\n                        <button class=\"nlg-btn-pill\" data-val=\"8\">8<\/button>\n                        <button class=\"nlg-btn-pill\" data-val=\"16\">16<\/button>\n                        <button class=\"nlg-btn-pill\" data-val=\"32\">32<\/button>\n                        <button class=\"nlg-btn-pill\" data-val=\"64\">64<\/button>\n                        <button class=\"nlg-btn-pill\" id=\"nlg_custom_trigger\">Custom...<\/button>\n                    <\/div>\n                <\/div>\n\n                <div id=\"nlg_popover_custom\" class=\"nlg-popover\">\n                    <div class=\"nlg-popover-body\">\n                        <input type=\"number\" id=\"nlg_custom_input\" placeholder=\"Bars...\">\n                        <div class=\"nlg-popover-footer\">\n                            <button id=\"nlg_modal_set\" class=\"nlg-modal-btn primary\">Set<\/button>\n                            <button id=\"nlg_modal_cancel\" class=\"nlg-modal-btn\">X<\/button>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <style>\n        :root { \n            --nlg-primary: #0d86f8; \n            --nlg-active: #0a5bf2;\n        }\n        .nlg-v29-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 10px; box-sizing: border-box; }\n        .nlg-v29-container { display: flex; align-items: stretch; gap: 20px; width: 100%; color: #fff; flex-wrap: wrap; font-family: sans-serif; }\n        .nlg-panel { background: #1a1b1e; border-radius: 28px; border: 1px solid #2c2e33; overflow: hidden; display: flex; flex-direction: column; width: 100%; height: 100%; }\n        .nlg-main-col { flex: 1.2; min-width: 300px; }\n        .nlg-options-col { flex: 1; min-width: 300px; position: relative; }\n        .nlg-visual-header { background: #000; height: 180px; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid #2c2e33; }\n        .nlg-dots-container { display: flex; gap: 22px; align-items: center; justify-content: center; }\n        .nlg-dot { width: 48px; height: 48px; border-radius: 50%; transition: all 0.05s linear; background: rgba(13, 134, 248, 0.4); }\n        \n        \/* C\u1eacP NH\u1eacT M\u00c0U KHI NH\u00c1Y *\/\n        .nlg-dot.active, .nlg-dot.active-first { \n            background: var(--nlg-active) !important; \n            transform: scale(1.25); \n            box-shadow: 0 0 30px rgba(10, 91, 242, 0.8); \n        }\n\n        .nlg-main-content { padding: 30px 20px; display: flex; flex-direction: column; align-items: center; flex: 1; justify-content: center; }\n        .nlg-bpm-display { font-size: 90px; font-weight: 800; line-height: 1; }\n        .nlg-bpm-label { color: #555; font-size: 14px; letter-spacing: 2px; margin-bottom: 20px; }\n        .nlg-slider-container-full { width: 100%; display: flex; align-items: center; gap: 15px; margin-bottom: 25px; }\n        input[type=range] { flex: 1; accent-color: var(--nlg-primary); cursor: pointer; }\n        .nlg-step-btn { background: #25262b; border: 1px solid #333; color: #fff; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; font-size: 20px; }\n        .nlg-controls-mini { display: flex; gap: 12px; margin-bottom: 30px; width: 100%; justify-content: center; }\n        .nlg-start-btn-mini { background: #fff; color: #000; flex: 1; max-width: 200px; height: 64px; border-radius: 50px; font-weight: 800; border: none; cursor: pointer; }\n        .nlg-tap-btn-mini { background: #25262b; color: #fff; border: 1px solid #333; width: 90px; height: 64px; border-radius: 50px; font-weight: 700; cursor: pointer; touch-action: manipulation; user-select: none; }\n        .nlg-ts-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; width: 100%; }\n        .nlg-btn-box { padding: 12px 2px; border-radius: 12px; font-size: 14px; background: #25262b; border: 1px solid #333; color: #777; cursor: pointer; font-weight: 700; }\n        .nlg-scroll-panel { padding: 25px 20px; flex: 1; }\n        .nlg-btn-pill { padding: 10px 16px; border-radius: 50px; font-size: 13px; background: #25262b; border: 1px solid #333; color: #777; cursor: pointer; font-weight: 700; }\n        \n        .active { border-color: var(--nlg-primary) !important; color: #fff !important; background: rgba(13,134,248,0.1) !important; }\n        \n        .nlg-row-title { font-size: 12px; color: #666; margin: 15px 0 8px; font-weight: 700; text-transform: uppercase; }\n        .nlg-section-title { font-size: 12px; color: #666; margin: 15px 0 12px; font-weight: 700; text-transform: uppercase; width: 100%; text-align: center; }\n        .nlg-flex-wrap { display: flex; flex-wrap: wrap; gap: 8px; }\n        .nlg-training-header { font-size: 18px; font-weight: 700; color: #fff; border-bottom: 1px solid #333; padding-bottom: 10px; }\n        .nlg-vol-row-new { display: flex; align-items: center; gap: 10px; margin-top: 10px; background: #25262b; padding: 10px 15px; border-radius: 15px; border: 1px solid #333; }\n        .nlg-mute-icon { width: 24px; height: 24px; cursor: pointer; color: #aaa; transition: color 0.2s; flex-shrink: 0; }\n        .nlg-mute-icon:hover { color: #fff; }\n        .nlg-mute-icon.muted { color: #ff4d4d; }\n        .nlg-vol-edge { font-size: 10px; color: #555; font-weight: 700; flex-shrink: 0; min-width: 25px; }\n        .nlg-slider-wrapper { flex: 1; display: flex; align-items: center; }\n        #nlg_vol_slider { width: 100%; margin: 0; height: 6px; }\n        .nlg-popover { position: absolute; display: none; background: #25262b; border: 1px solid var(--nlg-primary); border-radius: 12px; padding: 12px; z-index: 100; width: 140px; box-shadow: 0 8px 24px rgba(0,0,0,0.5); }\n        #nlg_custom_input { background: #1a1b1e; border: 1px solid #444; color: #fff; font-size: 16px; padding: 6px; border-radius: 6px; width: 100%; text-align: center; margin-bottom: 8px; outline: none; }\n        .nlg-popover-footer { display: flex; gap: 5px; }\n        .nlg-modal-btn { flex: 1; padding: 6px; font-size: 12px; border-radius: 4px; border: 1px solid #333; background: #333; color: #fff; cursor: pointer; }\n        .nlg-modal-btn.primary { background: var(--nlg-primary); border: none; font-weight: bold; }\n        @media (max-width: 800px) { .nlg-v29-container { flex-direction: column; } .nlg-panel { height: auto; } .nlg-popover { left: 50% !important; transform: translateX(-50%); bottom: 80px !important; top: auto !important; } }\n    <\/style>\n\n    <script>\n    document.addEventListener('DOMContentLoaded', () => {\n        const metronome = {\n            audioCtx: null, isPlaying: false, timerID: null,\n            bpm: 120, beatsPerBar: 4, currentBeat: 0, nextNoteTime: 0.0,\n            soundType: 'triangle', vol: 0.75, lastVol: 0.75, currentBar: 0,\n            trainingMode: 'off', stopBars: 'off', totalBarsPlayed: 0,\n            tapTimes: [],\n            subdivision: 1, \n            subCount: 0,\n\n            init() { this.renderDots(); this.setupInputs(); this.setupPopover(); },\n\n            renderDots() {\n                const container = document.getElementById('nlg_visual_dots');\n                container.innerHTML = '';\n                for(let i=0; i<this.beatsPerBar; i++) {\n                    const d = document.createElement('div'); d.className = 'nlg-dot';\n                    container.appendChild(d);\n                }\n            },\n\n            updateBpm(val) {\n                this.bpm = Math.min(Math.max(val, 20), 400);\n                document.getElementById('nlg_bpm_val').innerText = this.bpm;\n                document.getElementById('nlg_bpm_slider').value = this.bpm;\n            },\n\n            playClick(time, isMainBeat, isFirstBeat) {\n                let isSilent = (this.trainingMode === 'every' && this.currentBar % 2 !== 0) || \n                               (this.trainingMode === '2on1off' && this.currentBar % 3 === 2);\n                if (isSilent || this.vol === 0) return;\n\n                const g = this.audioCtx.createGain();\n                g.connect(this.audioCtx.destination);\n                \n                let freq = isFirstBeat ? 1200 : (isMainBeat ? 800 : 450);\n                let volumeScale = isFirstBeat ? 1.0 : (isMainBeat ? 0.7 : 0.35);\n\n                if (this.soundType === 'click' || this.soundType === 'hihat') {\n                    const bufferSize = this.audioCtx.sampleRate * 0.05;\n                    const buffer = this.audioCtx.createBuffer(1, bufferSize, this.audioCtx.sampleRate);\n                    const data = buffer.getChannelData(0);\n                    for (let i = 0; i < bufferSize; i++) data[i] = Math.random() * 2 - 1;\n                    const noise = this.audioCtx.createBufferSource();\n                    noise.buffer = buffer;\n                    const filter = this.audioCtx.createBiquadFilter();\n                    filter.type = (this.soundType === 'hihat') ? 'bandpass' : 'highpass';\n                    filter.frequency.setValueAtTime(isFirstBeat ? 10000 : 6000, time);\n                    g.gain.setValueAtTime(this.vol * volumeScale, time);\n                    g.gain.exponentialRampToValueAtTime(0.01, time + 0.03);\n                    noise.connect(filter); filter.connect(g); noise.start(time); noise.stop(time + 0.05);\n                } else {\n                    const osc = this.audioCtx.createOscillator();\n                    osc.type = this.soundType;\n                    osc.frequency.setValueAtTime(freq, time);\n                    osc.connect(g);\n                    g.gain.setValueAtTime(this.vol * volumeScale, time);\n                    g.gain.exponentialRampToValueAtTime(0.001, time + 0.05);\n                    osc.start(time); osc.stop(time + 0.05);\n                }\n            },\n\n            scheduler() {\n                while (this.nextNoteTime < this.audioCtx.currentTime + 0.1) {\n                    const scheduleTime = this.nextNoteTime;\n                    const isMainBeat = (this.subCount === 0);\n                    const isFirstBeat = (isMainBeat && this.currentBeat === 0);\n\n                    this.playClick(scheduleTime, isMainBeat, isFirstBeat);\n\n                    if (isMainBeat) {\n                        const beatToLight = this.currentBeat;\n                        let secondsPerBeat = 60.0 \/ this.bpm;\n                        let flashDuration = (this.beatsPerBar === 1) ? (secondsPerBeat * 500) : 100;\n\n                        setTimeout(() => {\n                            if(!this.isPlaying) return;\n                            const ds = document.querySelectorAll('.nlg-dot');\n                            ds.forEach(d => d.classList.remove('active', 'active-first'));\n                            if(ds[beatToLight]) {\n                                ds[beatToLight].classList.add(beatToLight === 0 ? 'active-first' : 'active');\n                                setTimeout(() => {\n                                    if(ds[beatToLight]) ds[beatToLight].classList.remove('active', 'active-first');\n                                }, flashDuration);\n                            }\n                        }, (scheduleTime - this.audioCtx.currentTime) * 1000);\n                    }\n\n                    let secondsPerBeat = 60.0 \/ this.bpm;\n                    let noteLength;\n\n                    if (this.subdivision === 'shuffle') {\n                        noteLength = (this.subCount === 0) ? secondsPerBeat * (2\/3) : secondsPerBeat * (1\/3);\n                        this.subCount = (this.subCount + 1) % 2;\n                    } else {\n                        noteLength = secondsPerBeat \/ this.subdivision;\n                        this.subCount = (this.subCount + 1) % this.subdivision;\n                    }\n\n                    this.nextNoteTime += noteLength;\n\n                    if (this.subCount === 0) {\n                        this.currentBeat++;\n                        if(this.currentBeat >= this.beatsPerBar) { \n                            this.currentBeat = 0; this.currentBar++; this.totalBarsPlayed++;\n                            if(this.stopBars !== 'off' && this.totalBarsPlayed >= this.stopBars) { \n                                setTimeout(() => this.stop(), 100); return; \n                            }\n                        }\n                    }\n                }\n                this.timerID = setTimeout(() => this.scheduler(), 25);\n            },\n\n            stop() { \n                this.isPlaying = false; \n                clearTimeout(this.timerID); \n                document.getElementById('nlg_btn_text').innerText = 'START'; \n                document.querySelectorAll('.nlg-dot').forEach(d => d.classList.remove('active', 'active-first')); \n                this.subCount = 0;\n            },\n\n            setupInputs() {\n                document.getElementById('nlg_start_btn').onclick = () => {\n                    if (!this.audioCtx) this.audioCtx = new (window.AudioContext || window.webkitAudioContext)();\n                    this.isPlaying = !this.isPlaying;\n                    if (this.isPlaying) {\n                        this.currentBeat = 0; this.currentBar = 0; this.totalBarsPlayed = 0; this.subCount = 0;\n                        this.nextNoteTime = this.audioCtx.currentTime + 0.05;\n                        document.getElementById('nlg_btn_text').innerText = 'STOP';\n                        this.scheduler();\n                    } else { this.stop(); }\n                };\n\n                const volSlider = document.getElementById('nlg_vol_slider');\n                const volNum = document.getElementById('nlg_vol_num');\n                const muteBtn = document.getElementById('nlg_mute_btn');\n                const svgVol = document.getElementById('nlg_svg_vol');\n\n                const updateVolumeUI = (v) => {\n                    volNum.innerText = Math.round(v * 100) + '%';\n                    if(v === 0) {\n                        muteBtn.classList.add('muted');\n                        svgVol.innerHTML = '<path fill=\"currentColor\" d=\"M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z\"\/>';\n                    } else {\n                        muteBtn.classList.remove('muted');\n                        svgVol.innerHTML = '<path fill=\"currentColor\" d=\"M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z\"\/>';\n                    }\n                };\n\n                volSlider.oninput = (e) => {\n                    this.vol = e.target.value \/ 100;\n                    if(this.vol > 0) this.lastVol = this.vol;\n                    updateVolumeUI(this.vol);\n                };\n\n                muteBtn.onclick = () => {\n                    this.vol = (this.vol > 0) ? 0 : (this.lastVol || 0.75);\n                    volSlider.value = this.vol * 100;\n                    updateVolumeUI(this.vol);\n                };\n\n                document.getElementById('nlg_bpm_minus').onclick = () => this.updateBpm(this.bpm - 1);\n                document.getElementById('nlg_bpm_plus').onclick = () => this.updateBpm(this.bpm + 1);\n                document.getElementById('nlg_bpm_slider').oninput = (e) => this.updateBpm(parseInt(e.target.value));\n\n                const tapBtn = document.getElementById('nlg_tap_btn');\n                tapBtn.addEventListener('pointerdown', (e) => {\n                    e.preventDefault();\n                    const now = performance.now(); this.tapTimes.push(now);\n                    if (this.tapTimes.length > 4) this.tapTimes.shift();\n                    if (this.tapTimes.length > 1) {\n                        let intervals = [];\n                        for (let i = 1; i < this.tapTimes.length; i++) intervals.push(this.tapTimes[i] - this.tapTimes[i-1]);\n                        this.updateBpm(Math.round(60000 \/ (intervals.reduce((a, b) => a + b) \/ intervals.length)));\n                    }\n                    tapBtn.style.opacity = '0.5'; setTimeout(() => tapBtn.style.opacity = '1', 100);\n                });\n\n                const setupBtnGroup = (id, prop) => {\n                    document.querySelectorAll(`#${id} button`).forEach(btn => {\n                        if(btn.id === 'nlg_custom_trigger') return;\n                        btn.onclick = () => {\n                            document.querySelectorAll(`#${id} button`).forEach(b => b.classList.remove('active'));\n                            btn.classList.add('active');\n                            let val = btn.dataset.val;\n                            this[prop] = (val === 'shuffle' || isNaN(val)) ? val : parseInt(val);\n                            if(id === 'nlg_ts_group') {\n                                this.renderDots();\n                                if(this.isPlaying) this.currentBeat = 0; \n                            }\n                        };\n                    });\n                };\n                setupBtnGroup('nlg_ts_group', 'beatsPerBar');\n                setupBtnGroup('nlg_sound_group', 'soundType');\n                setupBtnGroup('nlg_silent_group', 'trainingMode');\n                setupBtnGroup('nlg_stop_bars_group', 'stopBars');\n                setupBtnGroup('nlg_subdiv_group', 'subdivision');\n            },\n\n            setupPopover() {\n                const popover = document.getElementById('nlg_popover_custom');\n                const trigger = document.getElementById('nlg_custom_trigger');\n                const rightPanel = document.getElementById('nlg_right_panel');\n                \n                trigger.onclick = (e) => {\n                    e.stopPropagation();\n                    const isOpen = popover.style.display === 'block';\n                    if(isOpen) { popover.style.display = 'none'; return; }\n                    popover.style.display = 'block';\n                    const triggerRect = trigger.getBoundingClientRect();\n                    const panelRect = rightPanel.getBoundingClientRect();\n                    popover.style.top = (triggerRect.top - panelRect.top - 80) + 'px';\n                    popover.style.left = (triggerRect.left - panelRect.left - 20) + 'px';\n                };\n\n                document.getElementById('nlg_modal_set').onclick = () => {\n                    let val = parseInt(document.getElementById('nlg_custom_input').value);\n                    if(val > 0) {\n                        this.stopBars = val; trigger.innerText = val + ' bars';\n                        document.querySelectorAll('#nlg_stop_bars_group button').forEach(b => b.classList.remove('active'));\n                        trigger.classList.add('active'); popover.style.display = 'none';\n                    }\n                };\n                document.getElementById('nlg_modal_cancel').onclick = () => popover.style.display = 'none';\n                document.addEventListener('click', (e) => { if (!popover.contains(e.target) && e.target !== trigger) popover.style.display = 'none'; });\n            }\n        };\n        metronome.init();\n    });\n    <\/script>\n    \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-2898","page","type-page","status-publish","hentry"],"blocksy_meta":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.5 (Yoast SEO v27.5) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Metronome Online - NL Guitar<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/nlguitar.com\/en\/metronome-online\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Metronome Online\" \/>\n<meta property=\"og:url\" content=\"https:\/\/nlguitar.com\/en\/metronome-online\/\" \/>\n<meta property=\"og:site_name\" content=\"NL Guitar\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/nlguitarclass\/\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-09T13:53:13+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/nlguitar.com\\\/metronome-online\\\/\",\"url\":\"https:\\\/\\\/nlguitar.com\\\/metronome-online\\\/\",\"name\":\"Metronome Online - NL Guitar\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/nlguitar.com\\\/#website\"},\"datePublished\":\"2026-05-04T14:33:20+00:00\",\"dateModified\":\"2026-05-09T13:53:13+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/nlguitar.com\\\/metronome-online\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/nlguitar.com\\\/metronome-online\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/nlguitar.com\\\/metronome-online\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/nlguitar.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Metronome Online\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/nlguitar.com\\\/#website\",\"url\":\"https:\\\/\\\/nlguitar.com\\\/\",\"name\":\"NL Guitar\",\"description\":\"Kh\u00f3a h\u1ecdc Guitar Online, Tabs &amp; S\u00e1ch Guitar Chuy\u00ean s\u00e2u\",\"publisher\":{\"@id\":\"https:\\\/\\\/nlguitar.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/nlguitar.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Organization\",\"Place\"],\"@id\":\"https:\\\/\\\/nlguitar.com\\\/#organization\",\"name\":\"NL Guitar\",\"alternateName\":\"NL Guitar Class\",\"url\":\"https:\\\/\\\/nlguitar.com\\\/\",\"logo\":{\"@id\":\"https:\\\/\\\/nlguitar.com\\\/metronome-online\\\/#local-main-organization-logo\"},\"image\":{\"@id\":\"https:\\\/\\\/nlguitar.com\\\/metronome-online\\\/#local-main-organization-logo\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/nlguitarclass\\\/\"],\"description\":\"Chuy\u00ean cung c\u1ea5p c\u00e1c kho\u00e1 h\u1ecdc Guitar chuy\u00ean nghi\u1ec7p, Guitar Tabs, S\u00e1ch v\u00e0 Gi\u00e1o Tr\u00ecnh\",\"telephone\":[],\"openingHoursSpecification\":[{\"@type\":\"OpeningHoursSpecification\",\"dayOfWeek\":[\"Monday\",\"Tuesday\",\"Wednesday\",\"Thursday\",\"Friday\",\"Saturday\",\"Sunday\"],\"opens\":\"09:00\",\"closes\":\"17:00\"}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/nlguitar.com\\\/metronome-online\\\/#local-main-organization-logo\",\"url\":\"https:\\\/\\\/nlguitar.com\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/cropped-Logo-26-2.png\",\"contentUrl\":\"https:\\\/\\\/nlguitar.com\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/cropped-Logo-26-2.png\",\"width\":512,\"height\":512,\"caption\":\"NL Guitar\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Metronome Online - NL Guitar","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/nlguitar.com\/en\/metronome-online\/","og_locale":"en_US","og_type":"article","og_title":"Metronome Online","og_url":"https:\/\/nlguitar.com\/en\/metronome-online\/","og_site_name":"NL Guitar","article_publisher":"https:\/\/www.facebook.com\/nlguitarclass\/","article_modified_time":"2026-05-09T13:53:13+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/nlguitar.com\/metronome-online\/","url":"https:\/\/nlguitar.com\/metronome-online\/","name":"Metronome Online - NL Guitar","isPartOf":{"@id":"https:\/\/nlguitar.com\/#website"},"datePublished":"2026-05-04T14:33:20+00:00","dateModified":"2026-05-09T13:53:13+00:00","breadcrumb":{"@id":"https:\/\/nlguitar.com\/metronome-online\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/nlguitar.com\/metronome-online\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/nlguitar.com\/metronome-online\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/nlguitar.com\/"},{"@type":"ListItem","position":2,"name":"Metronome Online"}]},{"@type":"WebSite","@id":"https:\/\/nlguitar.com\/#website","url":"https:\/\/nlguitar.com\/","name":"NL Guitar","description":"Kh\u00f3a h\u1ecdc Guitar Online, Tabs &amp; S\u00e1ch Guitar Chuy\u00ean s\u00e2u","publisher":{"@id":"https:\/\/nlguitar.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/nlguitar.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Organization","Place"],"@id":"https:\/\/nlguitar.com\/#organization","name":"NL Guitar","alternateName":"NL Guitar Class","url":"https:\/\/nlguitar.com\/","logo":{"@id":"https:\/\/nlguitar.com\/metronome-online\/#local-main-organization-logo"},"image":{"@id":"https:\/\/nlguitar.com\/metronome-online\/#local-main-organization-logo"},"sameAs":["https:\/\/www.facebook.com\/nlguitarclass\/"],"description":"Chuy\u00ean cung c\u1ea5p c\u00e1c kho\u00e1 h\u1ecdc Guitar chuy\u00ean nghi\u1ec7p, Guitar Tabs, S\u00e1ch v\u00e0 Gi\u00e1o Tr\u00ecnh","telephone":[],"openingHoursSpecification":[{"@type":"OpeningHoursSpecification","dayOfWeek":["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"],"opens":"09:00","closes":"17:00"}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/nlguitar.com\/metronome-online\/#local-main-organization-logo","url":"https:\/\/nlguitar.com\/wp-content\/uploads\/2026\/04\/cropped-Logo-26-2.png","contentUrl":"https:\/\/nlguitar.com\/wp-content\/uploads\/2026\/04\/cropped-Logo-26-2.png","width":512,"height":512,"caption":"NL Guitar"}]}},"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/nlguitar.com\/en\/wp-json\/wp\/v2\/pages\/2898","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nlguitar.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nlguitar.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nlguitar.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nlguitar.com\/en\/wp-json\/wp\/v2\/comments?post=2898"}],"version-history":[{"count":4,"href":"https:\/\/nlguitar.com\/en\/wp-json\/wp\/v2\/pages\/2898\/revisions"}],"predecessor-version":[{"id":3003,"href":"https:\/\/nlguitar.com\/en\/wp-json\/wp\/v2\/pages\/2898\/revisions\/3003"}],"wp:attachment":[{"href":"https:\/\/nlguitar.com\/en\/wp-json\/wp\/v2\/media?parent=2898"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}