1<!DOCTYPE html><html lang="en" class="light"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Web Harmonium â Free Online Harmonium Keyboard Tool</title><meta name="description" content="Play harmonium online free with realistic Indian sounds. Use your laptop keyboard, touch, or MIDI with Sargam labels, transpose, reeds, and reverb. Start now."><meta name="generator" content="Astro v5.18.1"><link rel="canonical" href="https://webharmonium.com/"><meta property="og:type" content="website"><meta property="og:site_name" content="Web Harmonium"><meta property="og:title" content="Web Harmonium â Free Online Harmonium Keyboard Tool"><meta property="og:description" content="Play harmonium online free with realistic Indian sounds. Use your laptop keyboard, touch, or MIDI with Sargam labels, transpose, reeds, and reverb. Start now."><meta property="og:url" content="https://webharmonium.com/"><meta property="og:image" content="https://webharmonium.com/og-image.png"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:title" content="Web Harmonium â Free Online Harmonium Keyboard Tool"><meta name="twitter:description" content="Play harmonium online free with realistic Indian sounds. Use your laptop keyboard, touch, or MIDI with Sargam labels, transpose, reeds, and reverb. Start now."><meta name="twitter:image" content="https://webharmonium.com/og-image.png"><link rel="icon" href="/favicon.ico" sizes="any"><link rel="icon" href="/logo.svg" type="image/svg+xml"><link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32"><link rel="icon" href="/favicon-16x16.png" type="image/png" sizes="16x16"><link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180"><link rel="mask-icon" href="/safari-pinned-tab.svg" color="#7c3aed"><link rel="manifest" href="/manifest.webmanifest">
1<script type="application/ld+json">{"@context":"https://schema.org","@type":"WebApplication","name":"Web Harmonium","applicationCategory":"MusicApplication","operatingSystem":"Any","url":"https://webharmonium.com","description":"Play harmonium online free with realistic Indian sounds. Use your laptop keyboard, touch, or MIDI with Sargam labels, transpose, reeds, and reverb. Start now.","browserRequirements":"Requires JavaScript and a modern browser with Web Audio API support.","offers":{"@type":"Offer","price":"0","priceCurrency":"USD"},"featureList":["Online harmonium playable in the browser","Keyboard support","MIDI support","Transpose control","Octave control","Reverb control"]}</script>
1<script type="application/ld+json">{"@context":"https://schema.org","@graph":[{"@type":"FAQPage","mainEntity":[{"@type":"Question","name":"Is Web Harmonium really free?","acceptedAnswer":{"@type":"Answer","text":"Yes. Web Harmonium is free to use, with no sign-up, credit card, trial period, or software download."}},{"@type":"Question","name":"How do I play harmonium on my laptop keyboard?","acceptedAnswer":{"@type":"Answer","text":"Press the computer keys printed on the on-screen harmonium. Each visible key shows its keyboard shortcut and Sargam label, so the live instrument is always the authoritative map."}},{"@type":"Question","name":"Does Web Harmonium work on phones and tablets?","acceptedAnswer":{"@type":"Answer","text":"Yes. Open the page in a modern mobile browser and tap the on-screen keys. The layout scrolls horizontally on smaller screens so every key remains reachable."}},{"@type":"Question","name":"Can I connect a MIDI keyboard?","acceptedAnswer":{"@type":"Answer","text":"Yes, when your browser supports WebMIDI. Connect a USB MIDI controller, grant browser access when prompted, and choose the detected device in the MIDI control."}},{"@type":"Question","name":"Do I need to install a harmonium app?","acceptedA
1nswer":{"@type":"Answer","text":"No. The instrument runs in your browser with the Web Audio API. Bookmark this page and return whenever you want to practice."}},{"@type":"Question","name":"Which browsers are supported?","acceptedAnswer":{"@type":"Answer","text":"Web Harmonium works in current versions of Chrome, Edge, Firefox, and Safari. Chrome or Edge is recommended when you want WebMIDI support."}},{"@type":"Question","name":"What does the reverb control do?","acceptedAnswer":{"@type":"Answer","text":"Reverb adds a wider room-like tail to the harmonium sound. Leave it off for a direct practice tone or switch it on for more ambience."}}]},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Web Harmonium","item":"https://webharmonium.com/"}]}]}</script>
vendor: 63 bytes, line 1
1<script async src="https://www.googletagmanager.com/gtag/js?id=
1G-SSK8K71N67
vendor: 11 bytes, line 1
1"></script>
1<script> 2
vendor: 158 bytes, lines 2-6
2window.dataLayer = window.dataLayer || []; 3 function gtag(){dataLayer.push(arguments);} 4 gtag('js', new Date()); 5 6 gtag('config', '
6G-SSK8K71N67
vendor: 12 bytes, lines 6-7
6'); 7
7</script>
7<script async crossorigin="anonymous" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7231086451430163"></script>
7<link rel="stylesheet" href="/_astro/about.BQVDhIq3.css"></head> <body> <div class="fixed inset-0 pointer-events-none overflow-hidden z-0" aria-hidden="true"> <div class="absolute select-none animate-float" style="left:7%;top:12%;animation-delay:0s;animation-duration:14s;color:rgba(180,83,9,0.45);font-size:clamp(1.4rem,3vw,2.2rem);font-weight:700;"> ⪠</div><div class="absolute select-none animate-float" style="left:88%;top:22%;animation-delay:2.5s;animation-duration:16s;color:rgba(180,83,9,0.3);font-size:clamp(1.4rem,3vw,2.2rem);font-weight:700;"> â« </div><div class="absolute select-none animate-float" style="left:5%;top:68%;animation-delay:1.2s;animation-duration:12s;color:rgba(120,100,60,0.3);font-size:clamp(1.4rem,3vw,2.2rem);font-weight:700;"> ⬠</div><div class="absolute select-none animate-float" style="left:92%;top:72%;animation-delay:3.8s;animation-duration:18s;color:rgba(180,83,9,0.2);font-size:clamp(1.4rem,3vw,2.2rem);font-weight:700;"> ð </div> </div> <div class="min-h-screen bg-white dark:bg-[#0d1117]"> <header class="relative z-30 py-3"> <div class="px-4 sm:px-6"> <div class="mx-auto max-w-7xl"> <div class="flex items-center justify-between rounded-2xl border border-slate-200/60 bg-white/90 px-4 py-2.5 shadow-[0_2px_16px_rgba(15,23,42,0.06)] backdrop-blur-xl dark:border-white/10 dark:bg-slate-950/80"> <!-- Logo mark --> <a href="/" class="flex items-center gap-3 group"> <div class="flex h-11 w-11 items-center justify-center rounded-2xl border border-amber-200/70 bg-white shadow-[0_6px_18px_rgba(180,83,9,0.12)] transition-transform group-hover:scale-[1.03] dark:border-white/10 dark:bg-white/5"> <img src="/logo.svg" alt="Web Harmonium" class="h-7 w-7"> </div> <div> <div class="text-sm font-bold text-slate-950 dark:text-white leading-tight">Web Harmonium</div> <div class="text-[10px] text-slate-400 dark:text-slate-500 leading-tight tracking-wide">Free Online Harmonium</div> </div> </a> <!-- Actions --> <div class="flex items-center gap-5"> <nav class="hidden md:flex items-center gap-6"> <a href="/web-harmonium-notes/" class="text-[13px] font-semibold transition-colors hover:text-amber-600 dark:hover:text-amber-400 text-slate-600 dark:text-slate-300"> 8Notes 9</a> <a href="/tutorial/" class="text-[13px] font-semibold transition-colors hover:text-amber-600 dark:hover:text-amber-400 text-slate-600 dark:text-slate-300"> 10Tutorial 11</a> <a href="/blog/" class="text-[13px] font-semibold transition-colors hover:text-amber-600 dark:hover:text-amber-400 text-slate-600 dark:text-slate-300"> 12Blog 13</a> </nav> <div class="flex items-center gap-2"> <a href="/#tool" class="hidden h-9 items-center justify-center rounded-xl bg-amber-600 px-4 text-[13px] font-semibold text-white shadow-[0_2px_8px_rgba(180,83,9,0.3)] hover:bg-amber-700 transition-colors lg:inline-flex"> 14Play Now 15</a> <button type="button" data-theme-toggle aria-label="Toggle theme" class="flex h-9 w-9 items-center justify-center rounded-xl border border-slate-200 bg-white text-slate-500 hover:text-slate-900 dark:border-white/10 dark:bg-white/5 dark:text-slate-400 dark:hover:text-white transition-colors"> <svg class="h-4 w-4 block dark:hidden" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"></path></svg> <svg class="h-4 w-4 hidden dark:block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path></svg> </button> </div> </div> </div> </div> </div></header> <main> <!-- ââ Hero ââââââââââââââââââââââââââââââââââââââââââââââââ --> <section class="relative overflow-hidden bg-slate-50 px-4 py-20 sm:px-6 lg:py-28 dark:bg-[#0f1623]"> <!-- Subtle warm noise texture overlay --> <div class="pointer-events-none absolute inset-0 opacity-[0.04]" style="background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E")"></div> <!-- Amber accent glow (right) --> <div class="pointer-events-none absolute bottom-0 right-0 h-[420px] w-[420px] translate-x-1/3 translate-y-1/4 rounded-full bg-amber-600/15 blur-[120px] dark:bg-amber-600/10"></div> <div class="relative mx-auto max-w-7xl"> <div class="grid gap-12 lg:grid-cols-[1.1fr_0.9fr] lg:items-center"> <!-- Left: Copy --> <div> <div class="inline-flex items-center gap-2 rounded-full border border-amber-500/25 bg-amber-500/10 px-3.5 py-1.5 text-[12px] font-semibold uppercase tracking-[0.18em] text-amber-400"> <span class="h-1.5 w-1.5 rounded-full bg-amber-400"></span> 16Free Online Harmonium Tool 17</div> <h1 class="mt-6 text-4xl font-bold leading-[1.1] tracking-tight text-slate-950 sm:text-5xl lg:text-[3.5rem] dark:text-white"> 18Web Harmonium â Free Online 19<br>
19 <span class="text-amber-600 dark:text-amber-400">Harmonium Keyboard</span> </h1> <p class="mt-6 max-w-lg text-[15px] leading-relaxed text-slate-500 dark:text-slate-400"> 20Web Harmonium is a free online instrument with keyboard shortcuts, MIDI support, Sargam + Western labels, and controls for transpose, octave, reeds, and reverb â all on a single page. 21</p> <div class="mt-8 flex flex-wrap gap-3"> <a href="#tool" class="inline-flex h-11 items-center justify-center gap-2 rounded-xl bg-amber-600 px-6 text-sm font-semibold text-white shadow-[0_4px_20px_rgba(180,83,9,0.3)] hover:bg-amber-500 transition-colors"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-4 w-4"><path d="M8 5v14l11-7z"></path></svg> 22Play Now 23</a> <a href="/about/" class="inline-flex h-11 items-center justify-center rounded-xl border border-slate-200 px-6 text-sm font-medium text-slate-700 hover:bg-slate-100 transition-colors dark:border-white/10 dark:text-slate-300 dark:hover:bg-white/5 dark:hover:text-white"> 24Learn More 25</a> </div> <!-- Trust signals --> <div class="mt-10 flex flex-wrap items-center gap-x-6 gap-y-3"> <div class="flex items-center gap-2 text-[13px] text-slate-500"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-4 w-4 text-amber-500/80 flex-shrink-0"><path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd"></path></svg> No sign-up required </div><div class="flex items-center gap-2 text-[13px] text-slate-500"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-4 w-4 text-amber-500/80 flex-shrink-0"><path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd"></path></svg> Works in any browser </div><div class="flex items-center gap-2 text-[13px] text-slate-500"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-4 w-4 text-amber-500/80 flex-shrink-0"><path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd"></path></svg> Keyboard + MIDI support </div> </div> </div> <!-- Right: Dark preview card --> <div class="relative"> <div class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-[0_32px_80px_rgba(0,0,0,0.08)] dark:border-white/10 dark:bg-white/5 dark:shadow-[0_32px_80px_rgba(0,0,0,0.5)]"> <!-- Card header bar --> <div class="flex items-center gap-2 border-b border-slate-100 bg-slate-50 px-4 py-3 dark:border-white/10 dark:bg-white/5"> <div class="h-2.5 w-2.5 rounded-full bg-red-400 dark:bg-red-500/60"></div> <div class="h-2.5 w-2.5 rounded-full bg-yellow-400 dark:bg-yellow-500/60"></div> <div class="h-2.5 w-2.5 rounded-full bg-green-400 dark:bg-green-500/60"></div> <div class="ml-3 flex-1 rounded-md bg-white px-3 py-1 text-[11px] text-slate-400 shadow-sm dark:bg-white/5 dark:text-slate-500 dark:shadow-none">webharmonium.com</div> </div> <!-- Key preview illustration --> <div class="p-5"> <div class="mb-4 flex items-center justify-between"> <div class="text-[11px] font-semibold uppercase tracking-widest text-slate-500">Online Harmonium â Sa = Câ¯</div> <div class="rounded-md bg-amber-600/15 px-2 py-0.5 text-[11px] font-semibold text-amber-400">Live</div> </div> <!-- Simulated keyboard keys --> <div class="flex gap-1.5 overflow-hidden"> <div class="flex-1 rounded-lg border py-4 flex flex-col items-center gap-1.5 transition-all border-amber-500/50 bg-amber-50 shadow-[0_0_12px_rgba(180,83,9,0.1)] dark:bg-amber-600/15 dark:shadow-[0_0_12px_rgba(180,83,9,0.2)]"> <span class="text-[11px] font-bold text-amber-600 dark:text-amber-400">Sa</span> <span class="text-[9px] text-slate-400 dark:text-slate-600">Câ¯</span> </div><div class="flex-1 rounded-lg border py-4 flex flex-col items-center gap-1.5 transition-all border-slate-100 bg-slate-50 dark:border-white/10 dark:bg-white/5">
25 <span class="text-[11px] font-bold text-slate-600 dark:text-slate-400">Re</span> <span class="text-[9px] text-slate-400 dark:text-slate-600">Dâ¯</span> </div><div class="flex-1 rounded-lg border py-4 flex flex-col items-center gap-1.5 transition-all border-slate-100 bg-slate-50 dark:border-white/10 dark:bg-white/5"> <span class="text-[11px] font-bold text-slate-600 dark:text-slate-400">Ga</span> <span class="text-[9px] text-slate-400 dark:text-slate-600">F</span> </div><div class="flex-1 rounded-lg border py-4 flex flex-col items-center gap-1.5 transition-all border-slate-100 bg-slate-50 dark:border-white/10 dark:bg-white/5"> <span class="text-[11px] font-bold text-slate-600 dark:text-slate-400">Ma</span> <span class="text-[9px] text-slate-400 dark:text-slate-600">Fâ¯</span> </div><div class="flex-1 rounded-lg border py-4 flex flex-col items-center gap-1.5 transition-all border-slate-100 bg-slate-50 dark:border-white/10 dark:bg-white/5"> <span class="text-[11px] font-bold text-slate-600 dark:text-slate-400">Pa</span> <span class="text-[9px] text-slate-400 dark:text-slate-600">Gâ¯</span> </div><div class="flex-1 rounded-lg border py-4 flex flex-col items-center gap-1.5 transition-all border-slate-100 bg-slate-50 dark:border-white/10 dark:bg-white/5"> <span class="text-[11px] font-bold text-slate-600 dark:text-slate-400">Dha</span> <span class="text-[9px] text-slate-400 dark:text-slate-600">Aâ¯</span> </div><div class="flex-1 rounded-lg border py-4 flex flex-col items-center gap-1.5 transition-all border-slate-100 bg-slate-50 dark:border-white/10 dark:bg-white/5"> <span class="text-[11px] font-bold text-slate-600 dark:text-slate-400">Ni</span> <span class="text-[9px] text-slate-400 dark:text-slate-600">C</span> </div><div class="flex-1 rounded-lg border py-4 flex flex-col items-center gap-1.5 transition-all border-slate-100 bg-slate-50 dark:border-white/10 dark:bg-white/5"> <span class="text-[11px] font-bold text-slate-600 dark:text-slate-400">Saâ²</span> <span class="text-[9px] text-slate-400 dark:text-slate-600">Câ¯</span> </div> </div> <!-- Controls row --> <div class="mt-4 grid grid-cols-3 gap-2"> <div class="rounded-lg border border-slate-100 bg-slate-50 px-3 py-2.5 text-center dark:border-white/10 dark:bg-white/5"> <div class="text-[10px] text-slate-500 dark:text-slate-600">Transpose</div> <div class="mt-0.5 text-sm font-bold text-slate-900 dark:text-white">+2</div> </div><div class="rounded-lg border border-slate-100 bg-slate-50 px-3 py-2.5 text-center dark:border-white/10 dark:bg-white/5"> <div class="text-[10px] text-slate-500 dark:text-slate-600">Octave</div> <div class="mt-0.5 text-sm font-bold text-slate-900 dark:text-white">4</div> </div><div class="rounded-lg border border-slate-100 bg-slate-50 px-3 py-2.5 text-center dark:border-white/10 dark:bg-white/5"> <div class="text-[10px] text-slate-500 dark:text-slate-600">Reverb</div> <div class="mt-0.5 text-sm font-bold text-slate-900 dark:text-white">30%</div> </div> </div> </div> </div> </div> </div> </div> </section> <!-- ââ Marquee strip âââââââââââââââââââââââââââââââââââââââ --> <div class="border-y border-slate-100 bg-slate-50 py-3 dark:border-white/6 dark:bg-white/3"> <div class="mx-auto flex max-w-7xl flex-wrap items-center justify-center gap-x-8 gap-y-2 px-4 text-[13px] text-slate-500 dark:text-slate-400"> <span class="flex items-center gap-1.5"> <span class="h-1 w-1 rounded-full bg-amber-500/60"></span> Indian Classical Practice </span><span class="flex items-center gap-1.5"> <span class="h-1 w-1 rounded-full bg-amber-500/60"></span> Vocal Warm-Ups </span><span class="flex items-center gap-1.5"> <span class="h-1 w-1 rounded-full bg-amber-500/60"></span> Raga Exploration </span><span class="flex items-center gap-1.5"> <span class="h-1 w-1 rounded-full bg-amber-500/60"></span> Melody Sketching </span><span class="flex items-center gap-1.5"> <span class="h-1 w-1 rounded-full bg-amber-500/60"></span> Ear Training </span><span class="flex items-center gap-1.5"> <span class="h-1 w-1 rounded-full bg-amber-500/60"></span> Tonic Finding </span><span class="flex items-center gap-1.5"> <span class="h-1 w-1 rounded-full bg-amber-500/60"></span> Bhajan & Kirtan </span><span class="flex items-center gap-1.5"> <span class="h-1 w-1 rounded-full bg-amber-500/60"></span> Remote Teaching </span> </div> </div> <!-- ââ The instrument ââââââââââââââââââââââââââââââââââââââ --> <section id="tool" class="px-4 py-16 sm:px-6 lg:py-20"> <div class="mx-auto max-w-[90rem]"> <div class="mb-8"> <div class="section-kicker">Instrument</div> <h2 class="mt-3 text-3xl font-bold tracking-tight text-slate-950 dar
25k:text-white sm:text-4xl"> 26Practice Indian Classical Music with our Online Harmonium 27</h2> <p class="mt-3 max-w-2xl text-[15px] text-slate-500 dark:text-slate-400"> 28Audio engine, MIDI detection, keyboard mapping, and all controls live on this one page. No popups, no paywalls, no redirect. 29</p> </div> <div class="mb-6 grid gap-3 lg:grid-cols-2"> <a href="/web-harmonium-notes/" class="group rounded-2xl border border-slate-200 bg-slate-50 p-4 transition-colors hover:border-amber-300 hover:bg-amber-50/60 dark:border-white/10 dark:bg-white/5 dark:hover:border-amber-400/30 dark:hover:bg-amber-500/10"> <div class="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500 dark:text-slate-400">Web Harmonium Notes</div> <div class="mt-2 text-lg font-bold text-slate-950 dark:text-white">See keyboard mappings, Sargam labels, and note references.</div> <div class="mt-2 text-sm leading-6 text-slate-600 dark:text-slate-300"> 30Use this page if you are looking for `web harmonium notes`, note names, or Sargam versus Western key labels. 31</div> <div class="mt-3 text-sm font-semibold text-amber-700 transition-transform group-hover:translate-x-0.5 dark:text-amber-300">Open notes guide â</div> </a> <a href="/tutorial/" class="group rounded-2xl border border-slate-200 bg-slate-50 p-4 transition-colors hover:border-amber-300 hover:bg-amber-50/60 dark:border-white/10 dark:bg-white/5 dark:hover:border-amber-400/30 dark:hover:bg-amber-500/10"> <div class="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500 dark:text-slate-400">Tutorial Practice</div> <div class="mt-2 text-lg font-bold text-slate-950 dark:text-white">Move into guided practice with score sync and follow-along play.</div> <div class="mt-2 text-sm leading-6 text-slate-600 dark:text-slate-300"> 32Use tutorial mode when you want auto-play, guided practice, moving score lanes, and step-by-step note matching. 33</div> <div class="mt-3 text-sm font-semibold text-amber-700 transition-transform group-hover:translate-x-0.5 dark:text-amber-300">Start tutorial mode â</div> </a> </div> <div class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-[0_8px_40px_rgba(15,23,42,0.06)] dark:border-white/10 dark:bg-slate-900/60"> <style>astro-island,astro-slot,astro-static-slot{display:contents}</style>
33<script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).load=e;window.dispatchEvent(new Event("astro:load"));})();</script>
33<script>(()=>{var A=Object.defineProperty;var g=(i,o,a)=>o in i?A(i,o,{enumerable:!0,configurable:!0,writable:!0,value:a}):i[o]=a;var d=(i,o,a)=>g(i,typeof o!="symbol"?o+"":o,a);{let i={0:t=>m(t),1:t=>a(t),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(a(t)),5:t=>new Set(a(t)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(t),9:t=>new Uint16Array(t),10:t=>new Uint32Array(t),11:t=>1/0*t},o=t=>{let[l,e]=t;return l in i?i[l](e):void 0},a=t=>t.map(o),m=t=>typeof t!="object"||t===null?t:Object.fromEntries(Object.entries(t).map(([l,e])=>[l,o(e)]));class y extends HTMLElement{constructor(){super(...arguments);d(this,"Component");d(this,"hydrator");d(this,"hydrate",async()=>{var b;if(!this.hydrator||!this.isConnected)return;let e=(b=this.parentElement)==null?void 0:b.closest("astro-island[ssr]");if(e){e.addEventListener("astro:hydrate",this.hydrate,{once:!0});return}let c=this.querySelectorAll("astro-slot"),n={},h=this.querySelectorAll("template[data-astro-template]");for(let r of h){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("data-astro-template")||"default"]=r.innerHTML,r.remove())}for(let r of c){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("name")||"default"]=r.innerHTML)}let p;try{p=this.hasAttribute("props")?m(JSON.parse(this.getAttribute("props"))):{}}catch(r){let s=this.getAttribute("component-url")||"<unknown>",v=this.getAttribute("component-export");throw v&&(s+=` (export ${v})`),console.error(`[hydrate] Error parsing props for component ${s}`,this.getAttribute("props"),r),r}let u;await this.hydrator(this)(this.Component,p,n,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),this.dispatchEvent(new CustomEvent("astro:hydrate"))});d(this,"unmount",()=>{this.isConnected||this.dispatchEvent(new CustomEvent("astro:unmount"))})}disconnectedCallback(){document.removeEventListener("astro:after-swap",this.unmount),document.addEventListener("astro:after-swap",this.unmount,{once:!0})}connectedCallback(){if(!this.hasAttribute("await-children")||document.readyState==="interactive"||document.readyState==="complete")this.childrenConnectedCallback();else{let e=()=>{document.removeEventListener("DOMContentLoaded",e),c.disconnect(),this.childrenConnectedCallback()},c=new MutationObserver(()=>{var n;((n=this.lastChild)==null?void 0:n.nodeType)===Node.COMMENT_NODE&&this.lastChild.nodeValue==="astro:end"&&(this.lastChild.remove(),e())});c.observe(this,{childList:!0}),document.addEventListener("DOMContentLoaded",e)}}async childrenConnectedCallback(){let e=this.getAttribute("before-hydration-url");e&&await import(e),this.start()}async start(){let e=JSON.parse(this.getAttribute("opts")),c=this.getAttribute("client");if(Astro[c]===void 0){window.addEventListener(`astro:${c}`,()=>this.start(),{once:!0});return}try{await Astro[c](async()=>{let n=this.getAttribute("renderer-url"),[h,{default:p}]=await Promise.all([import(this.getAttribute("component-url")),n?import(n):()=>()=>{}]),u=this.getAttribute("component-export")||"default";if(!u.includes("."))this.Component=h[u];else{this.Component=h;for(let f of u.split("."))this.Component=this.Component[f]}return this.hydrator=p,this.hydrate},e,this)}catch(n){console.error(`[astro-island] Error hydrating ${this.getAttribute("component-url")}`,n)}}attributeChangedCallback(){this.hydrate()}}d(y,"observedAttributes",["props"]),customElements.get("astro-island")||customElements.define("astro-island",y)}})();</script>
33<astro-island uid="1ySdAC" prefix="r1" component-url="/_astro/HarmoniumTool.B1nCRFol.js" component-export="default" renderer-url="/_astro/client.Dc9Vh3na.js" props="{}" ssr client="load" opts="{"name":"HarmoniumTool","value":true}" await-children><div class="glass-card rounded-[2rem] border-2 px-6 py-12 text-center shadow-2xl sm:px-10"><div class="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full border-4 border-purple-300/40 text-3xl text-purple-600 animate-spin">â«</div><h2 class="bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-3xl font-black text-transparent">Loading Harmonium</h2><p class="mt-3 text-sm leading-6 text-slate-600 dark:text-slate-300">Preparing the browser audio engine, harmonium sample, and MIDI detection.</p></div><!--astro:end--></astro-island> </div> </div> </section> <!-- ââ Search-focused content begins after the instrument ââ --> <section class="border-t border-slate-100 bg-slate-50 px-4 py-16 sm:px-6 lg:py-20 dark:border-white/10 dark:bg-white/[0.02]"> <div class="mx-auto grid max-w-7xl gap-10 lg:grid-cols-[0.75fr_1.25fr]"> <div> <div class="section-kicker">Online Instrument</div> <h2 class="mt-3 text-3xl font-bold tracking-tight text-slate-950 dark:text-white sm:text-4xl">What Is Web Harmonium?</h2> </div> <div class="space-y-5 text-[15px] leading-7 text-slate-600 dark:text-slate-300"> <p> 34Web Harmonium is a free online harmonium keyboard that runs in your browser â no app to install, account to create, or file to download. Open the page and start playing Sa Re Ga Ma. 35</p> <p> 36It is designed for Hindustani and Carnatic vocal students, bhajan and kirtan singers, music teachers running remote lessons, and anyone learning Indian classical music for the first time. Use it on a laptop, tablet, or phone whenever a physical instrument is not nearby. 37</p> <div class="grid gap-3 sm:grid-cols-2"> <div class="rounded-2xl border border-slate-200 bg-white p-5 dark:border-white/10 dark:bg-slate-900/70"> <h3 class="font-semibold text-slate-950 dark:text-white">Three ways to play</h3> <p class="mt-2 text-sm leading-6">Use the laptop keyboard, tap the on-screen keys, or connect a compatible MIDI controller.</p> </div><div class="rounded-2xl border border-slate-200 bg-white p-5 dark:border-white/10 dark:bg-slate-900/70"> <h3 class="font-semibold text-slate-950 dark:text-white">Two label systems</h3> <p class="mt-2 text-sm leading-6">Read Sargam and Western note labels directly on the keyboard while you practice.</p> </div><div class="rounded-2xl border border-slate-200 bg-white p-5 dark:border-white/10 dark:bg-slate-900/70"> <h3 class="font-semibold text-slate-950 dark:text-white">Flexible sound controls</h3> <p class="mt-2 text-sm leading-6">Transpose the tonic, shift octaves, add reverb, and layer reeds from one screen.</p> </div><div class="rounded-2xl border border-slate-200 bg-white p-5 dark:border-white/10 dark:bg-slate-900/70"> <h3 class="font-semibold text-slate-950 dark:text-white">Instant access</h3> <p class="mt-2 text-sm leading-6">There are no popups or paywalls between opening the page and playing your first note.</p> </div> </div> </div> </div> </section> <section class="px-4 py-16 sm:px-6 lg:py-20"> <div class="mx-auto max-w-7xl"> <div class="max-w-3xl"> <div class="section-kicker">Note Reference</div> <h2 class="mt-3 text-3xl font-bold tracking-tight text-slate-950 dark:text-white sm:text-4xl">Harmonium Keyboard Layout & the Sargam System</h2> <p class="mt-5 text-[15px] leading-7 text-slate-600 dark:text-slate-300"> 38A harmonium keyboard is laid out like a piano, but Indian classical musicians commonly read it through Sargam: the seven-note system at the foundation of Hindustani and Carnatic music. The example below uses Sa = Câ¯, matching the introductory scale shown on this page. 39</p> </div> <div class="mt-8 overflow-x-auto rounded-2xl border border-slate-200 dark:border-white/10"> <table class="w-full min-w-[680px] border-collapse text-left text-sm"> <thead class="bg-slate-950 text-white dark:bg-slate-800"> <tr><th class="px-5 py-4">Sargam</th><th class="px-5 py-4">Western note</th><th class="px-5 py-4">Meaning</th></tr> </thead> <tbody class="divide-y divide-slate-200 bg-white dark:divide-white/10 dark:bg-slate-900/70"> <tr><th scope="row" class="px-5 py-4 font-semibold text-slate-950 dar
39k:text-white">Sa (षडà¥à¤)</th><td class="px-5 py-4 text-slate-600 dark:text-slate-300">Câ¯</td><td class="px-5 py-4 text-slate-600 dark:text-slate-300">The tonic â the base note used to tune the scale.</td></tr><tr><th scope="row" class="px-5 py-4 font-semibold text-slate-950 dark:text-white">Re (à¤à¤·à¤)</th><td class="px-5 py-4 text-slate-600 dark:text-slate-300">Dâ¯</td><td class="px-5 py-4 text-slate-600 dark:text-slate-300">The second note of the scale.</td></tr><tr><th scope="row" class="px-5 py-4 font-semibold text-slate-950 dark:text-white">Ga (à¤à¤¾à¤¨à¥à¤§à¤¾à¤°)</th><td class="px-5 py-4 text-slate-600 dark:text-slate-300">F</td><td class="px-5 py-4 text-slate-600 dark:text-slate-300">The third note of the scale.</td></tr><tr><th scope="row" class="px-5 py-4 font-semibold text-slate-950 dark:text-white">Ma (मधà¥à¤¯à¤®)</th><td class="px-5 py-4 text-slate-600 dark:text-slate-300">Fâ¯</td><td class="px-5 py-4 text-slate-600 dark:text-slate-300">The fourth note of the scale.</td></tr><tr><th scope="row" class="px-5 py-4 font-semibold text-slate-950 dark:text-white">Pa (पà¤à¥à¤à¤®)</th><td class="px-5 py-4 text-slate-600 dark:text-slate-300">Gâ¯</td><td class="px-5 py-4 text-slate-600 dark:text-slate-300">The stable fifth, often used with Sa as a drone anchor.</td></tr><tr><th scope="row" class="px-5 py-4 font-semibold text-slate-950 dark:text-white">Dha (धà¥à¤µà¤¤)</th><td class="px-5 py-4 text-slate-600 dark:text-slate-300">Aâ¯</td><td class="px-5 py-4 text-slate-600 dark:text-slate-300">The sixth note of the scale.</td></tr><tr><th scope="row" class="px-5 py-4 font-semibold text-slate-950 dark:text-white">Ni (निषाद)</th><td class="px-5 py-4 text-slate-600 dark:text-slate-300">C</td><td class="px-5 py-4 text-slate-600 dark:text-slate-300">The seventh note, leading back toward Sa.</td></tr><tr><th scope="row" class="px-5 py-4 font-semibold text-slate-950 dark:text-white">Saâ² (तार षडà¥à¤)</th><td class="px-5 py-4 text-slate-600 dark:text-slate-300">Câ¯</td><td class="px-5 py-4 text-slate-600 dark:text-slate-300">The high Sa, one octave above the tonic.</td></tr> </tbody> </table> </div> <div class="mt-8 grid gap-6 lg:grid-cols-2"> <div class="rounded-2xl bg-amber-50 p-6 text-sm leading-7 text-amber-950 dark:bg-amber-500/10 dark:text-amber-100"> <h3 class="text-lg font-bold">Shuddha and Vikrit Swar</h3> <p class="mt-3"> 40The seven pure notes are called Shuddha Swar. Indian music also uses five altered notes: Komal Re, Komal Ga, Tivra Ma, Komal Dha, and Komal Ni. Those changes help give Ragas such as Bhairavi, Yaman, and Kafi their distinctive colors. 41</p> </div> <div class="rounded-2xl border border-slate-200 bg-white p-6 text-sm leading-7 text-slate-600 dark:border-white/10 dark:bg-slate-900/70 dark:text-slate-300"> <h3 class="text-lg font-bold text-slate-950 dark:text-white">Laptop keyboard mapping</h3> <p class="mt-3"> 42The live instrument prints the correct shortcut on every white and black key. Use those labels as you play, then open the <a href="/web-harmonium-notes/" class="font-semibold text-amber-700 underline decoration-amber-300 underline-offset-4 dark:text-amber-300">Harmonium Notes guide</a> for the complete keyboard map, Shuddha and Vikrit references, and the 10 Thaat system. 43</p> </div> </div> </div> </section> <section class="bg-slate-50 px-4 py-16 sm:px-6 lg:py-20 dark:bg-white/[0.02]"> <div class="mx-auto max-w-7xl"> <div class="mb-10"> <div class="section-kicker">Features</div> <h2 class="mt-3 text-3xl font-bold tracking-tight text-slate-950 dark:text-white sm:text-4xl">Core Features</h2> </div> <div class="grid gap-px overflow-hidden rounded-2xl border border-slate-200 bg-slate-200 dark:border-white/10 dark:bg-white/10 sm:grid-cols-2 lg:grid-cols-3"> <article class="flex gap-4 bg-white p-6 dark:bg-[#0d1117]"> <div class="mt-0.5 flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-xl bg-amber-50 text-amber-600 dark:bg-amber-900/20 dark:text-amber-400"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M8 4v16M16 4v16M2 12h20"/></svg></div> <div><h3 class="font-semibold text-slate-900 dark:text-white">
43Laptop Keyboard Input</h3><p class="mt-2 text-[13px] leading-6 text-slate-500 dark:text-slate-400">Your computer keyboard becomes a full harmonium. Use the mapped rows to play across the visible range without reaching for the mouse. Every on-screen key displays the shortcut that triggers it, so you can learn the layout while you play.</p></div> </article><article class="flex gap-4 bg-white p-6 dark:bg-[#0d1117]"> <div class="mt-0.5 flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-xl bg-amber-50 text-amber-600 dark:bg-amber-900/20 dark:text-amber-400"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg></div> <div><h3 class="font-semibold text-slate-900 dark:text-white">MIDI Controller Support</h3><p class="mt-2 text-[13px] leading-6 text-slate-500 dark:text-slate-400">Connect a WebMIDI-compatible USB keyboard and use real keys for longer practice sessions and more natural playing. The MIDI panel shows whether your browser supports the feature and lists each controller it detects.</p></div> </article><article class="flex gap-4 bg-white p-6 dark:bg-[#0d1117]"> <div class="mt-0.5 flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-xl bg-amber-50 text-amber-600 dark:bg-amber-900/20 dark:text-amber-400"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5"><path d="m9 9-2 2 2 2M15 9l2 2-2 2"/><rect x="3" y="3" width="18" height="18" rx="2"/></svg></div> <div><h3 class="font-semibold text-slate-900 dark:text-white">Transpose Control</h3><p class="mt-2 text-[13px] leading-6 text-slate-500 dark:text-slate-400">Shift the harmonium in semitones until Sa sits comfortably in your vocal range or matches another instrument. Transpose changes the sounding pitch without forcing you to relearn the keyboard pattern.</p></div> </article><article class="flex gap-4 bg-white p-6 dark:bg-[#0d1117]"> <div class="mt-0.5 flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-xl bg-amber-50 text-amber-600 dark:bg-amber-900/20 dark:text-amber-400"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5"><path d="M12 20v-6M6 20V10M18 20V4"/></svg></div> <div><h3 class="font-semibold text-slate-900 dark:text-white">Octave Shift</h3><p class="mt-2 text-[13px] leading-6 text-slate-500 dark:text-slate-400">Move between lower, middle, and upper registers, then combine octave and transpose controls to cover a wider range. This is useful when a phrase moves beyond the keys currently visible on a small screen.</p></div> </article><article class="flex gap-4 bg-white p-6 dark:bg-[#0d1117]"> <div class="mt-0.5 flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-xl bg-amber-50 text-amber-600 dark:bg-amber-900/20 dark:text-amber-400"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5"><path d="M3 18v-6a9 9 0 0 1 18 0v6"/><path d="M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z"/></svg></div> <div><h3 class="font-semibold text-slate-900 dark:text-white">Reverb & Reed Controls</h3><p class="mt-2 text-[13px] leading-6 text-slate-500 dark:text-slate-400">Add room ambience and layer extra reeds to create a fuller tone inspired by a traditional multi-reed harmonium. Keep the sound direct for close practice, or add depth when rehearsing a devotional or ensemble part.</p></div> </article><article class="flex gap-4 bg-white p-6 dark:bg-[#0d1117]"> <div class="mt-0.5 flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-xl bg-amber-50 text-amber-600 dark:bg-amber-900/20 dark:text-amber-400"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5">
43<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg></div> <div><h3 class="font-semibold text-slate-900 dark:text-white">Instant, No Sign-Up</h3><p class="mt-2 text-[13px] leading-6 text-slate-500 dark:text-slate-400">Open the page and play immediately. There is no account, app download, paywall, or onboarding flow. Your controls remain together on one page, making it easy to return for a short warm-up or a focused practice session.</p></div> </article> </div> </div> </section> <section class="px-4 py-16 sm:px-6 lg:py-20"> <div class="mx-auto max-w-7xl"> <div class="grid gap-12 lg:grid-cols-[0.85fr_1.15fr] lg:items-start"> <div> <div class="section-kicker">Quick Start</div> <h2 class="mt-3 text-3xl font-bold tracking-tight text-slate-950 dark:text-white sm:text-4xl">How to Play â Three Steps</h2> <p class="mt-4 text-[15px] leading-7 text-slate-500 dark:text-slate-400"> 44Start with the controls at their defaults. The goal of your first session is simply to connect each Sargam syllable with a visible key and a sound. 45</p> <a href="#tool" class="mt-8 inline-flex h-10 items-center justify-center rounded-xl bg-slate-950 px-5 text-sm font-semibold text-white hover:bg-slate-800 dark:bg-white dark:text-slate-950 dark:hover:bg-slate-100">Return to the instrument</a> </div> <ol class="space-y-4"> <li class="flex gap-5 rounded-xl border border-slate-100 bg-white p-5 shadow-[0_2px_12px_rgba(15,23,42,0.04)] dark:border-slate-700/70 dark:bg-slate-900/70"> <div class="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg bg-amber-50 font-mono text-[12px] font-bold text-amber-700 dark:border dark:border-amber-400/15 dark:bg-amber-500/10 dark:text-amber-300">01</div> <div><h3 class="font-semibold text-slate-900 dark:text-white">Open the Page</h3><p class="mt-1 text-[13px] leading-6 text-slate-500 dark:text-slate-300">Web Harmonium loads in any modern desktop or mobile browser. No installation or account is required.</p></div> </li><li class="flex gap-5 rounded-xl border border-slate-100 bg-white p-5 shadow-[0_2px_12px_rgba(15,23,42,0.04)] dark:border-slate-700/70 dark:bg-slate-900/70"> <div class="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg bg-amber-50 font-mono text-[12px] font-bold text-amber-700 dark:border dark:border-amber-400/15 dark:bg-amber-500/10 dark:text-amber-300">02</div> <div><h3 class="font-semibold text-slate-900 dark:text-white">Place Your Fingers</h3><p class="mt-1 text-[13px] leading-6 text-slate-500 dark:text-slate-300">Press the computer keys shown on the instrument, tap the on-screen keys, or connect a compatible MIDI controller.</p></div> </li><li class="flex gap-5 rounded-xl border border-slate-100 bg-white p-5 shadow-[0_2px_12px_rgba(15,23,42,0.04)] dark:border-slate-700/70 dark:bg-slate-900/70"> <div class="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg bg-amber-50 font-mono text-[12px] font-bold text-amber-700 dark:border dark:border-amber-400/15 dark:bg-amber-500/10 dark:text-amber-300">03</div> <div><h3 class="font-semibold text-slate-900 dark:text-white">Play Sa Re Ga Ma</h3><p class="mt-1 text-[13px] leading-6 text-slate-500 dark:text-slate-300">Follow the Sargam labels across the keyboard, begin slowly, and repeat the ascent and descent until the pattern feels automatic.</p></div> </li> </ol> </div> </div> </section> <section class="bg-[#fffdf8] px-4 py-16 sm:px-6 lg:py-20 dark:bg-[#0f1623]"> <div class="mx-auto max-w-7xl"> <div class="grid gap-10 lg:grid-cols-[0.8fr_1.2fr]"> <div> <div class="section-kicker">Tradition</div> <h2 class="mt-3 text-3xl font-bold tracking-tight text-slate-950 dark:text-white sm:text-4xl">About the Harmonium â History & Cultural Role</h2> </div> <div class="space-y-5 text-[15px] leading-7 text-slate-600 dark:text-slate-300"> <p> 46The hand-pumped harmonium developed from European free-reed instruments and took on a distinctive form in South Asia during the 19th century. Indian musicians adapted the instrument to seated performance, and its sustained tone made it a practical partner for vocal music. 47</p> <p> 48By the early 20th century, harmonium accompaniment had become closely associated with Khayal and Thumri, bhajan and kirtan devotional singing, Qawwali, Ghazal, regional folk traditions, and film composition. Its steady pitch can support a singer, outline a Raga, or hold a phrase while a student listens for intonation. 49</p> <div class="grid gap-3 sm:grid-cols-2"> <div class="rounded-2xl border border-amber-200/70 bg-white/70 p-4 dark:border-white/10 dark:bg-white/5">
49 <h3 class="font-semibold text-slate-950 dark:text-white">Khayal and Thumri</h3> <p class="mt-2 text-sm leading-6">The instrument follows the singer, supports the Raga, and provides a stable pitch reference.</p> </div><div class="rounded-2xl border border-amber-200/70 bg-white/70 p-4 dark:border-white/10 dark:bg-white/5"> <h3 class="font-semibold text-slate-950 dark:text-white">Bhajan and Kirtan</h3> <p class="mt-2 text-sm leading-6">Portable accompaniment helps lead communal devotional singing and repeated call-and-response phrases.</p> </div><div class="rounded-2xl border border-amber-200/70 bg-white/70 p-4 dark:border-white/10 dark:bg-white/5"> <h3 class="font-semibold text-slate-950 dark:text-white">Qawwali and Ghazal</h3> <p class="mt-2 text-sm leading-6">Its warm, sustained reed tone supports poetry, improvisation, and powerful vocal lines.</p> </div><div class="rounded-2xl border border-amber-200/70 bg-white/70 p-4 dark:border-white/10 dark:bg-white/5"> <h3 class="font-semibold text-slate-950 dark:text-white">Folk and Film Music</h3> <p class="mt-2 text-sm leading-6">Musicians across South Asia use harmonium to teach melodies, sketch songs, rehearse, and compose.</p> </div> </div> <p> 50An online harmonium makes that practice available without an instrument purchase, maintenance, or dedicated space. Whether you are studying at home, teaching remotely, or checking a melody while traveling, you can open the browser and work through Sa Re Ga Ma immediately. For a deeper introduction, read <a href="/blog/what-is-a-harmonium/" class="font-semibold text-amber-700 underline decoration-amber-300 underline-offset-4 dark:text-amber-300">what a harmonium is and how it works</a>. 51</p> </div> </div> </div> </section> <section class="px-4 py-16 sm:px-6 lg:py-20"> <div class="mx-auto max-w-5xl"> <div class="text-center"> <div class="section-kicker">Help</div> <h2 class="mt-3 text-3xl font-bold tracking-tight text-slate-950 dark:text-white sm:text-4xl">Frequently Asked Questions</h2> </div> <div class="mt-10 grid gap-4 sm:grid-cols-2"> <article class="rounded-2xl border border-slate-200 bg-white p-6 dark:border-white/10 dark:bg-slate-900/70"> <h3 class="font-semibold text-slate-950 dark:text-white">Is Web Harmonium really free?</h3> <p class="mt-3 text-sm leading-7 text-slate-600 dark:text-slate-300">Yes. Web Harmonium is free to use, with no sign-up, credit card, trial period, or software download.</p> </article><article class="rounded-2xl border border-slate-200 bg-white p-6 dark:border-white/10 dark:bg-slate-900/70"> <h3 class="font-semibold text-slate-950 dark:text-white">How do I play harmonium on my laptop keyboard?</h3> <p class="mt-3 text-sm leading-7 text-slate-600 dark:text-slate-300">Press the computer keys printed on the on-screen harmonium. Each visible key shows its keyboard shortcut and Sargam label, so the live instrument is always the authoritative map.</p> </article><article class="rounded-2xl border border-slate-200 bg-white p-6 dark:border-white/10 dark:bg-slate-900/70"> <h3 class="font-semibold text-slate-950 dark:text-white">Does Web Harmonium work on phones and tablets?</h3> <p class="mt-3 text-sm leading-7 text-slate-600 dark:text-slate-300">Yes. Open the page in a modern mobile browser and tap the on-screen keys. The layout scrolls horizontally on smaller screens so every key remains reachable.</p> </article><article class="rounded-2xl border border-slate-200 bg-white p-6 dark:border-white/10 dark:bg-slate-900/70"> <h3 class="font-semibold text-slate-950 dark:text-white">Can I connect a MIDI keyboard?</h3> <p class="mt-3 text-sm leading-7 text-slate-600 dark:text-slate-300">Yes, when your browser supports WebMIDI. Connect a USB MIDI controller, grant browser access when prompted, and choose the detected device in the MIDI control.</p> </article><article class="rounded-2xl border border-slate-200 bg-white p-6 dark:border-white/10 dark:bg-slate-900/70"> <h3 class="font-semibold text-slate-950 dark:text-white">Do I need to install a harmonium app?</h3> <p class="mt-3 text-sm leading-7 text-slate-600 dark:text-slate-300">No. The instrument runs in your browser with the Web Audio API. Bookmark this page and return whenever you want to practice.</p> </article><article class="rounded-2xl border border-slate-200 bg-white p-6 dark:border-white/10 dark:bg-slate-900/70">
51 <h3 class="font-semibold text-slate-950 dark:text-white">Which browsers are supported?</h3> <p class="mt-3 text-sm leading-7 text-slate-600 dark:text-slate-300">Web Harmonium works in current versions of Chrome, Edge, Firefox, and Safari. Chrome or Edge is recommended when you want WebMIDI support.</p> </article><article class="rounded-2xl border border-slate-200 bg-white p-6 dark:border-white/10 dark:bg-slate-900/70"> <h3 class="font-semibold text-slate-950 dark:text-white">What does the reverb control do?</h3> <p class="mt-3 text-sm leading-7 text-slate-600 dark:text-slate-300">Reverb adds a wider room-like tail to the harmonium sound. Leave it off for a direct practice tone or switch it on for more ambience.</p> </article> </div> </div> </section> <section class="px-4 pb-20 sm:px-6"> <div class="mx-auto max-w-7xl rounded-2xl bg-slate-100 px-6 py-12 text-center sm:px-10 sm:py-16 dark:bg-[#0f1623]"> <div class="section-kicker">Next Steps</div> <h2 class="mt-4 text-3xl font-bold tracking-tight text-slate-950 dark:text-white sm:text-4xl">Continue Your Harmonium Practice</h2> <p class="mx-auto mt-4 max-w-2xl text-[15px] leading-7 text-slate-600 dark:text-slate-300">Learn the note system in depth or move into guided exercises with listening, score-following, and phrase-by-phrase practice.</p> <div class="mt-8 flex flex-col justify-center gap-3 sm:flex-row"> <a href="/web-harmonium-notes/" class="inline-flex min-h-11 items-center justify-center rounded-xl bg-amber-600 px-5 py-3 text-sm font-semibold text-white hover:bg-amber-500">Harmonium Notes â Sargam & Thaat Guide</a> <a href="/tutorial/" class="inline-flex min-h-11 items-center justify-center rounded-xl border border-slate-300 bg-white px-5 py-3 text-sm font-semibold text-slate-900 hover:bg-slate-50 dark:border-white/10 dark:bg-white/5 dark:text-white dark:hover:bg-white/10">Harmonium Tutorial â Start Practicing</a> </div> <p class="mt-6 text-xs text-slate-500 dark:text-slate-400">Bookmark this page with Ctrl+D on Windows or Cmd+D on Mac.</p> </div> </section> </main> <footer class="border-t border-slate-100 bg-white dark:border-white/6 dark:bg-[#0d1117]"> <div class="px-4 py-12 sm:px-6"> <div class="mx-auto grid max-w-7xl gap-10 lg:grid-cols-[1.6fr_0.8fr_0.8fr]"> <!-- Brand --> <div> <div class="flex items-center gap-3"> <div class="flex h-10 w-10 items-center justify-center rounded-xl border border-amber-200/70 bg-white shadow-[0_6px_18px_rgba(180,83,9,0.12)] dark:border-white/10 dark:bg-white/5"> <img src="/logo.svg" alt="Web Harmonium logo" class="h-6 w-6"> </div> <div> <div class="text-sm font-bold text-slate-950 dark:text-white">Web Harmonium</div> <div class="text-[10px] uppercase tracking-[0.18em] text-slate-400 dark:text-slate-500">Browser instrument</div> </div> </div> <p class="mt-4 max-w-xs text-[13px] leading-relaxed text-slate-500 dark:text-slate-400"> 52A free online harmonium for Indian classical practice, tonic finding, melody sketching, and MIDI-based sessions. 53</p> <p class="mt-4 text-[12px] text-slate-400 dark:text-slate-600"> 54© 2026 Web Harmonium. All rights reserved. 55</p> </div> <!-- Product --> <div> <div class="text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-400 dark:text-slate-500">Product</div> <ul class="mt-4 space-y-2.5"> <li> <a href="/" class="text-[13px] text-slate-600 hover:text-slate-950 dark:text-slate-400 dark:hover:text-white transition-colors"> Play Online </a> </li><li> <a href="/web-harmonium-notes/" class="text-[13px] text-slate-600 hover:text-slate-950 dark:text-slate-400 dark:hover:text-white transition-colors"> Web Harmonium Notes </a> </li><li> <a href="/tutorial/" class="text-[13px] text-slate-600 hover:text-slate-950 dark:text-slate-400 dark:hover:text-white transition-colors"> Tutorial Mode </a> </li><li> <a href="/about/" class="text-[13px] text-slate-600 hover:text-slate-950 dark:text-slate-400 dark:hover:text-white transition-colors"> About </a> </li> </ul> </div> <!-- Legal --> <div> <div class="text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-400 dark:text-slate-500">Legal</div> <ul class="mt-4 space-y-2.5"> <li> <a href="/privacy/" class="text-[13px] text-slate-600 hover:text-slate-950 dar
55k:text-slate-400 dark:hover:text-white transition-colors"> Privacy Policy </a> </li><li> <a href="/terms/" class="text-[13px] text-slate-600 hover:text-slate-950 dark:text-slate-400 dark:hover:text-white transition-colors"> Terms of Service </a> </li> </ul> </div> </div> </div> </footer> </div> <aside class="site-ad-shell" aria-label="Advertisement" data-site-ad> <div class="site-ad-frame"> <button type="button" class="site-ad-close" aria-label="Close advertisement" data-site-ad-close>Close</button> <iframe class="site-ad-iframe" src="/ads/native_banner_1.html" title="Advertisement" loading="lazy"></iframe> </div> </aside>
55<script> 56 const storageKey = "webharmonium-theme"; 57 const root = document.documentElement; 58 const applyTheme = (theme) => { 59 root.classList.remove("light", "dark"); 60 root.classList.add(theme); 61 localStorage.setItem(storageKey, theme); 62 }; 63 const savedTheme = localStorage.getItem(storageKey); 64 const initialTheme = savedTheme || (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"); 65 applyTheme(initialTheme); 66 document.addEventListener("click", (event) => { 67 const target = event.target; 68 if (!(target instanceof Element)) return; 69 if (!target.closest("[data-theme-toggle]")) return; 70 applyTheme(root.classList.contains("dark") ? "light" : "dark"); 71 }); 72 73 const adRoot = document.querySelector("[data-site-ad]"); 74 const adClose = document.querySelector("[data-site-ad-close]"); 75 if (adClose instanceof HTMLButtonElement && adRoot instanceof HTMLElement) { 76 adClose.addEventListener("click", () => { 77 adRoot.hidden = true; 78 }); 79 } 80 </script>
80
80<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v4bc70e2c01a94c73b74392e4234840661791215815920" integrity="sha512-L0ha0OXavK/8okipN9F8BtP84dg9DUhPERbBXzwI6dgTA55d2+yweo3pn5CSFYs45/r8md2+xvUPtTdvTNRfjA==" data-cf-beacon='{"version":"2024.11.0","token":"a0c0398882024a39a73346bbaa728d17","r":1,"spa":2}' crossorigin="anonymous"></script>
80 81</body> </html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.