<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="author" content="The Online Metronome" />
    <meta name="description" content="Free online metronome, instrument tuner, piano drone, chord progressions, and more music tools to help musicians practice and improve their skills." />
    <meta property="og:title" content="The Online Metronome | Free Music Tools for Musicians" />
    <meta property="og:description" content="Free online metronome, instrument tuner, piano drone, chord progressions, and more music tools to help musicians practice and improve their skills." />
    <meta property="og:image" content="https://theonlinemetronome.com/images/hero-illustration.png" />
    <meta property="og:type" content="website" />
    <meta property="og:site_name" content="The Online Metronome" />
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="The Online Metronome | Free Music Tools for Musicians" />
    <meta name="twitter:description" content="Free online metronome, instrument tuner, piano drone, chord progressions, and more music tools to help musicians practice and improve their skills." />
    <meta name="twitter:image" content="https://theonlinemetronome.com/images/hero-illustration.png" />
    <meta name="ezoic-site-verification" content="SH8vzMZD2zcL33vCjQWUUHhMRxdsJ6" />

    <!-- Ezoic Privacy/Consent (must load before ad script) -->
    <script data-cfasync="false" src="https://cmp.gatekeeperconsent.com/min.js"></script>
    <script data-cfasync="false" src="https://the.gatekeeperconsent.com/cmp.min.js"></script>

    <script src="https://accounts.google.com/gsi/client" async defer></script>
    <link rel="icon" type="image/png" href="/favicon.png" />
    
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preconnect" href="https://emadpsjptwnrbfmywijw.supabase.co" crossorigin>
    
    <!-- Preload LCP image -->
    <link rel="preload" as="image" type="image/png" href="/images/hero-illustration.png" fetchpriority="high">
    
    <!-- Non-render-blocking font loading -->
    <link rel="preload" href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600;700;800;900&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600;700;800;900&display=swap"></noscript>
    
    <!-- Ezoic (conditionally loaded — skipped for premium users) -->
    <script>
      (function() {
        try {
          var keys = Object.keys(localStorage);
          for (var i = 0; i < keys.length; i++) {
            if (keys[i].indexOf('sb-') === 0 && keys[i].indexOf('-auth-token') > -1) {
              var raw = localStorage.getItem(keys[i]);
              if (raw) {
                var parsed = JSON.parse(raw);
                var userId = parsed && parsed.user && parsed.user.id;
                if (userId && localStorage.getItem('premium_' + userId) === 'true') return;
              }
              break;
            }
          }
        } catch(e) {}
        var s = document.createElement('script');
        s.src = '//www.ezojs.com/ezoic/sa.min.js';
        s.async = true;
        document.head.appendChild(s);
      })();
    </script>
    <script>
      window.ezstandalone = window.ezstandalone || {};
      ezstandalone.cmd = ezstandalone.cmd || [];
    </script>

    <!-- Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-ZXGERBD9RL"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'G-ZXGERBD9RL');
    </script>
    <script type="module" crossorigin src="/assets/index-BNg4Om8g.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-BHmuTF0X.css">
  </head>

  <body>
    <!-- v1.0.1 -->
    <div id="root"></div>
  </body>
</html>
