The latest articles on DEV Community by Swaram (@swaram). https://dev.to/swaram https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3840090%2F2d32bbb0-d8dd-4604-9354-8397432ccc3d.png https://dev.to/swaram en Swaram Mon, 23 Mar 2026 12:43:40 +0000 https://dev.to/swaram/would-love-feedback-on-the-chord-detection-accuracy-27o8 https://dev.to/swaram/would-love-feedback-on-the-chord-detection-accuracy-27o8 <div class="ltag__link--embedded"> <div class="crayons-story "> <a href="https://dev.to/swaram/i-built-a-free-ai-chord-finder-with-zero-npm-dependencies-3n1f" class="crayons-story__hidden-navigation-link">I built a free AI chord finder with zero npm dependencies</a> <div class="crayons-story__body crayons-story__body-full_post"> <div class="crayons-story__top"> <div class="crayons-story__meta"> <div class="crayons-story__author-pic"> <a href="/swaram" class="crayons-avatar crayons-avatar--l "> <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3840090%2F2d32bbb0-d8dd-4604-9354-8397432ccc3d.png" alt="swaram profile" class="crayons-avatar__image"> </a> </div> <div> <div> <a href="/swaram" class="crayons-story__secondary fw-medium m:hidden"> Swaram </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"> Swaram <div id="story-author-preview-content-3389086" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/swaram" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3840090%2F2d32bbb0-d8dd-4604-9354-8397432ccc3d.png" class="crayons-avatar__image" alt=""> </span> <span class="crayons-link crayons-subtitle-2 mt-5">Swaram</span> </a> </div> <div class="print-hidden"> Follow </div> <div class="author-preview-metadata-container"></div> </div> </div> </div> </div> <a href="https://dev.to/swaram/i-built-a-free-ai-chord-finder-with-zero-npm-dependencies-3n1f" class="crayons-story__tertiary fs-xs"><time>Mar 23</time><span class="time-ago-indicator-initial-placeholder"></span></a> </div> </div> </div> <div class="crayons-story__indention"> <h2 class="crayons-story__title crayons-story__title-full_post"> <a href="https://dev.to/swaram/i-built-a-free-ai-chord-finder-with-zero-npm-dependencies-3n1f" id="article-link-3389086"> I built a free AI chord finder with zero npm dependencies </a> </h2> <div class="crayons-story__tags"> <a class="crayons-tag crayons-tag--monochrome " href="/t/opensource"><span class="crayons-tag__prefix">#</span>opensource</a> <a class="crayons-tag crayons-tag--monochrome " href="/t/javascript"><span class="crayons-tag__prefix">#</span>javascript</a> <a class="crayons-tag crayons-tag--monochrome " href="/t/ai"><span class="crayons-tag__prefix">#</span>ai</a> <a class="crayons-tag crayons-tag--monochrome " href="/t/python"><span class="crayons-tag__prefix">#</span>python</a> </div> <div class="crayons-story__bottom"> <div class="crayons-story__details"> <a href="https://dev.to/swaram/i-built-a-free-ai-chord-finder-with-zero-npm-dependencies-3n1f" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left"> <div class="multiple_reactions_aggregate"> <span class="multiple_reactions_icons_container"> <span class="crayons_icon_container"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18"> </span> </span> <span class="aggregate_reactions_counter">2<span class="hidden s:inline"> reactions</span></span> </div> </a> <a href="https://dev.to/swaram/i-built-a-free-ai-chord-finder-with-zero-npm-dependencies-3n1f#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center"> Comments <span class="hidden s:inline">Add Comment</span> </a> </div> <div class="crayons-story__save"> <small class="crayons-story__tertiary fs-xs mr-2"> 2 min read </small> <span class="bm-initial"> </span> <span class="bm-success"> </span> </div> </div> </div> </div> </div> </div> opensource javascript ai python Swaram Mon, 23 Mar 2026 12:40:06 +0000 https://dev.to/swaram/i-built-a-free-ai-chord-finder-with-zero-npm-dependencies-3n1f https://dev.to/swaram/i-built-a-free-ai-chord-finder-with-zero-npm-dependencies-3n1f <p>I built <strong>Swaram</strong>, a free AI-powered chord finder. Upload any audio file and get the chord progression, key, and time signature detected automatically.</p> <p><strong>Try it:</strong> <a href="https://ecoliving-tips.github.io/chord-finder.html" rel="noopener noreferrer">https://ecoliving-tips.github.io/chord-finder.html</a></p> <h2> Why I built it </h2> <p>I play guitar at my church in Kerala, India. Finding chords for Malayalam Christian songs is nearly impossible online. Paid chord finder subscriptions like Chordify Premium felt wrong for something that should be free.</p> <p>So I built my own — and made it work for any song, any genre, any language.</p> <h2> Tech stack </h2> <ul> <li> <strong>Frontend</strong>: Vanilla HTML/CSS/JS — literally zero npm dependencies</li> <li> <strong>Backend</strong>: Python (FastAPI + librosa) on Hugging Face Spaces</li> <li> <strong>Hosting</strong>: GitHub Pages (free)</li> <li> <strong>Build</strong>: Custom 300-line Node.js static site generator (no webpack, no bundler)</li> <li> <strong>PWA</strong>: Full offline support with service worker</li> <li> <strong>i18n</strong>: English + Malayalam</li> </ul> <p>No React. No Next.js. No Tailwind. Just plain HTML and CSS variables for theming.</p> <h2> How the AI chord detection works </h2> <ol> <li>Audio is resampled to 16kHz mono</li> <li>HPSS (Harmonic-Percussive Source Separation) isolates tonal content</li> <li>Chroma CQT features extract the 12-note harmonic profile per frame</li> <li>Template matching scores each frame against 48 chord templates</li> <li>Viterbi decoding smooths the raw chord sequence into musically coherent progressions</li> <li>Post-Viterbi key refinement detects whether the song is in a major or minor key</li> </ol> <p>The hardest problem? Distinguishing minor keys from their relative major (e.g., C minor vs E-flat major). I'm using a scoring system that weighs dominant V7 presence, tonic resolution in the first/last chords, and diatonic chord membership.</p> <h2> What I learned </h2> <ol> <li> <strong>You don't need a framework</strong> for most websites. Vanilla JS is fast, debuggable, and has zero build overhead.</li> <li> <strong>Hugging Face Spaces</strong> is incredible for deploying ML models for free. Git push and you have a live API.</li> <li> <strong>Chord detection is HARD</strong>. Music theory has so many edge cases — slash chords, split bars in 3/4 time, enharmonic spellings.</li> <li> <strong>GitHub Pages + a custom build script</strong> is an underrated hosting combo. Zero cost, instant deploys.</li> </ol> <h2> Try it out </h2> <ul> <li> <strong>Live</strong>: <a href="https://ecoliving-tips.github.io/chord-finder.html" rel="noopener noreferrer">https://ecoliving-tips.github.io/chord-finder.html</a> </li> <li> <strong>Source</strong>: <a href="https://github.com/AncyJohn/ecoliving-tips.github.io" rel="noopener noreferrer">https://github.com/AncyJohn/ecoliving-tips.github.io</a> </li> </ul> <p>Upload an MP3 of any song and tell me how accurate the chords are. I'm actively improving the detection algorithm and would love real-world test cases.</p> <p>What songs should I test it with? Drop suggestions in the comments!</p> opensource javascript ai python