Hey r/SideProject! I wanted to share a browser tool I recently built to scratch my own itch: AuraLyrics Matcher. I have a decent local music collection (FLAC, MP3, M4A) and was constantly frustrated by existing options to fetch synchronized lyrics (.lrc). Most desktop apps feel bloated or abandoned, while web tools usually require you to upload full audio files to a server—which is terrible for bandwidth and privacy. I wanted to see how far modern Web APIs could take a web app to behave like a native desktop utility, running 100% locally in the browser without uploading any audio bytes. Here is the live demo if you want to try it out: https://matcher.auralyrics.dpdns.org Architecture & Technical Highlights 1. Native Folder I/O without Electron (File System Access API) Leveraged the window.showDirectoryPicker() and FileSystemFileHandle APIs. Users can drop a folder or open their music directory directly. The app recursively scans audio files and can save .lrc files directly back to disk adjacent to the corresponding track. Cross-browser fallback: Since Firefox and Safari still don't support write access for the File System Access API, it falls back to in-memory batch ZIP packaging via fflate for instant download. 2. Streaming Binary Audio Tag Parsing in Memory Audio tags (ID3v2, Vorbis Comments, MP4 atoms) are decoded entirely client-side using music-metadata via parseBlob. To avoid browser OOM crashes on large libraries, cover art decoding is skipped, and buffers are released immediately after metadata extraction. Heuristic Fallback: If audio tags are missing, corrupt, or generic (e.g., "track 01"), an internal heuristic parser steps in to strip leading track numbers, noise brackets, and extract Artist - Title from filenames. 3. Noise Cleaning & Bigram Dice Similarity Gating Title strings are normalized to strip remastering tags, "feat.", live tags, and bracket noise. CJK (Chinese/Japanese/Korean) characters vs. Western typography are routed through dedicated language heuristics. Search candidates retrieved from 4 lyrics providers (NetEase, Musixmatch, PetitLyrics, and LRCLIB) pass through a Bigram Dice Coefficient scoring algorithm to reject false positives (e.g., instrumental covers or live versions with differing timestamps). 4. Millisecond-Level Bilingual Lyric Merge For tracks with translations, the app implements an 800ms tolerance binary search to align original timestamps with translated lyric lines into standard [mm:ss.xx] or Enhanced [mm:ss.xx]word synced formats. Tech Stack Framework: React 19 + TypeScript + Vite 6 Styling: Tailwind CSS Audio Processing: music-metadata, fflate Edge Layer: Cloudflare Pages Functions (only used as a stateless CORS proxy for upstream lyrics APIs that lack permissive CORS headers—audio never touches the proxy). Questions / Feedback: For those who have deployed the File System Access API in production, how do you handle memory pressure or permission revivals across long browser sessions? How does the directory scan performance feel on your local folder? Would love to hear your thoughts, critique on the frontend architecture, or any edge cases you run into! P.S. If you’re interested in the project and keen to help stress-test it with a larger music collection, feel free to shoot me a DM! I’m more than happy to provide free testing license keys for volunteers in exchange for any feedback or edge cases you encounter.   submitted by   /u/Beginning-Ebb4691 [link]   [comments]