TuneStand

Muziektools zijn een categorie waar de zoekintentie samenvalt met wat een pagina kan zijn. Iemand die "metronoom 120 bpm" of "guitar tuner" intikt, wil geen artikel over metronomen lezen. Die wil klikken en spelen. Dat maakt de niche aantrekkelijk, maar het verklaart ook waarom de bestaande sites erin zo tegenvallen: als het verkeer toch wel komt, is er weinig prikkel om het gereedschap zelf goed te maken.

In de praktijk zie je twee soorten falen. Het eerste is commercieel: de tool werkt, maar staat ingeklemd tussen advertentieblokken en een cookiemuur, en je bent een paar kliks verder voordat er geluid uit je speakers komt. Het tweede is technisch, en subtieler. Veel webmetronomen vuren hun klik af op een setInterval-timer. Die timer is niet sample-accuraat en wordt vertraagd zodra de main thread bezig is met het opbouwen van de pagina. Het resultaat drijft weg. Voor een tool waarvan de enige belofte precisie is, is dat een fundamenteel probleem.

We hebben TuneStand opgezet vanuit die twee observaties. Vijf tools rond drie categorieën (Timing, Pitch & tuning, Reference), elk gebouwd op de aanname dat de bezoeker meteen geluid wil horen en daarna niets meer van ons hoeft. Geen account, geen download, geen stap tussen de zoekopdracht en het gereedschap.

TuneStand heeft een eigen design-systeem: één handgeschreven stylesheet met de CSS-variabelen bovenaan. Geen Tailwind, geen componentbibliotheek, geen thema dat we hebben overgenomen. De basis is bijna zwart met een warme ondertoon (#100c08), met daarboven een radiale gradiënt die van het midden bovenaan naar beneden uitdooft. Het effect is dat van een verlicht podium in een donkere zaal, en dat is de context waarin dit gereedschap gebruikt wordt: een oefenruimte, een studio, een slaapkamer met de lampen laag.

Daarbovenop staat één accentkleur, amber (#f5a623). Die kleur doet het werk dat een muzikant nodig heeft: de actieve beat, de naald van de stemmer, de merknaam. Omdat er verder weinig om aandacht vraagt, is de klik van de metronoom ook visueel eenduidig. Naast amber gebruiken we groen en rood voor toestand, en verder is alles tekst in drie tinten warm wit tot gedempt bruin. Groen heeft daarbij een concrete betekenis: de grote uitlezing van de stemmer springt van amber naar groen zodra je binnen vijf cent van de doeltoon zit, en dezelfde groene lijn markeert het midden van de cents-meter. Rood is voorbehouden aan wat misgaat, zoals een geweigerde microfoon.

De typografie volgt dezelfde logica. Sora voor de interface, JetBrains Mono voor alles wat een getal is, met tabular-nums zodat een frequentie die van 439,8 naar 440,1 Hz springt niet zit te wiebelen in de lay-out. De stemmer toont zijn hertz-waarde op één decimaal, dus dat wiebelen zou je bij elke aangehouden toon zien. Het is een klein detail dat je alleen opmerkt als het ontbreekt, en het is precies het soort detail dat het verschil maakt tussen gereedschap en een demo. Het merkteken zelf is een equalizer in amber op bijna zwart, die terugkomt in het favicon en op de OpenGraph-kaart.

De metronoom is het hart van de site en meteen het punt waar we de meeste techniek in hebben gestopt. In plaats van een klik af te vuren op een timer, gebruikt hij een lookahead-scheduler: een lichte timer wordt elke 25 milliseconden wakker en zet de eerstvolgende klikken 100 milliseconden vooruit klaar op de hardwareklok van Web Audio. Die klok loopt onafhankelijk van het renderen van de pagina. Het hoorbare resultaat is een klik die maat na maat blijft staan, over de hele ondersteunde range van 40 tot 240 BPM, met tijdsignaturen 2/4, 3/4, 4/4 en 6/8 en een accent op de eerste tel dat je uit kunt zetten. De beat-indicator hangt aan diezelfde planning: elke klik die wordt ingepland gaat ook in een wachtrij, en een animatieframe haalt hem er pas uit als de audioklok dat moment gepasseerd is. Zo lopen de stippen mee met het geluid in plaats van met een eigen timer die er langzaam naast komt te liggen.

De stemmer werkt met je microfoon en autocorrelatie: het signaal wordt tegen zichzelf verschoven om de herhalende periode te vinden, en de inverse daarvan is de grondtoon. Geen machine learning, gewoon signaalverwerking die al decennia betrouwbaar is voor de aangehouden tonen waarmee je stemt. Bij het openen van de microfoon zetten we echocancellatie, ruisonderdrukking en automatische versterkingsregeling expliciet uit: dat zijn functies die een telefoongesprek helpen en een stemmer tegenwerken, want ze bewerken precies het signaal dat je wilt meten. De gevonden frequentie wordt vergeleken met gelijkzwevende stemming met A4 op 440 Hz, wat noot, octaaf, hertz en de afwijking in cents oplevert. De analyse draait ongeveer twintig keer per seconde in plaats van bij elk animatieframe, wat op een telefoon-CPU en de accu scheelt zonder dat de naald trager wordt, en wie de meter niet kan zien krijgt dezelfde uitlezing als tekst via een aria-live-regel die hoogstens één keer per seconde ververst.

De toongenerator is de derde tool op de audioklok: sinus, blok, driehoek of zaagtand, van 20 Hz tot 20.000 Hz (de gangbare grenzen van het menselijk gehoor), met een volume-ramp van dertig milliseconden aan het begin en het einde, in plaats van de plof die je krijgt als je een oscillator zomaar aan- en uitzet. De andere twee raken de audioklok niet aan en hoeven dat ook niet. Tap tempo meet je tikken met performance.now(), houdt een lopend gemiddelde bij over maximaal twaalf tikken en begint een nieuwe meting zodra je langer dan tweeënhalve seconde stilvalt; tikken kan met de muis of met de spatiebalk. De notenfrequentietabel rekent alleen: geen ingetypte lijst, maar afgeleid uit één bron van waarheid in lib/music.ts. Ook de snaarfrequenties op de instrumentpagina's komen daaruit, want een snaar is opgeslagen als toonklasse plus octaaf en niet als hertz-waarde. De tabel en de instrumentpagina's rekenen hun frequenties dus met dezelfde formule uit.

De site is Next.js 16 met de App Router, React 19 en TypeScript in strict mode. De drie parameterroutes (/[slug], /metronome/[bpm] en /tuner/[instrument]) draaien op generateStaticParams met dynamicParams uit, wat betekent dat alleen de pagina's bestaan die in onze datasets staan: een URL daarbuiten wordt een 404 en geen dunne, ter plekke gerenderde pagina. De productiebuild rendert de 39 pagina's vooraf, en het routeoverzicht dat hij afdrukt bevat geen route die op de server moet draaien. Wat er gebeurt als een bezoeker langskomt, is weinig meer dan het uitserveren van bestanden: geen server-logica, geen database.

Dat is geen architectuurpurisme, het is wat de bezoeker merkt. De pagina komt binnen als kant-en-klare HTML, de tool is een client-component die pas laadt wanneer de route hem nodig heeft. De vijf tools worden per slug dynamisch geïmporteerd, zodat de metronoompagina niet de JavaScript van de stemmer meesleept en andersom. En omdat er geen backend is, hoef je de privacytekst op de site niet op zijn woord te geloven: er is in de app geen plek waar het microfoonsignaal naartoe gestuurd wordt. Het gaat van de analyser naar de rekenfunctie, en daar houdt het op.

Tijdens het gebruik van een tool gaat er dan ook niets naar een server. Het enige uitgaande verzoek in de site zelf is het contactformulier, dat naar een extern endpoint post. Daarnaast ligt er een IndexNow-script, maar dat draait bij ons op de commandline en niet in de browser van de bezoeker. De advertentie- en consent-componenten staan wel in de repo, maar zijn afgeschermd achter een environment-variabele en staan standaard uit. De monetisatie is dus voorbereid zonder dat er vandaag iets tussen de bezoeker en het gereedschap staat, en dat is een bewuste volgorde: eerst het ding goed maken.

Naast de vijf tools staan er 29 long-tail pagina's: 13 instrumentstemmers en 16 tempopagina's. Ze zijn programmatisch opgebouwd uit twee datasets, maar ze zijn niet gegenereerd in de betekenis waarin dat woord meestal wordt gebruikt. Achter iedere instrumentpagina zit een echte, correcte standaardstemming: gitaar EADGBE, drop D, zevensnarig, bas, vijfsnarige bas, ukelele met reentrant GCEA, bariton-ukelele, viool, altviool, cello, contrabas, mandoline en vijfsnarige banjo in open G. De dertien pagina's hebben stuk voor stuk een eigen prozasectie van twee alinea's en drie eigen vragen en antwoorden, geschreven voor dat instrument. Dat de vijfde banjosnaar een korte dronesnaar is die hoger klinkt dan de vierde, bijvoorbeeld, of dat de ukelele reentrant is en dus niet netjes van laag naar hoog loopt. Dat soort dingen kun je niet uit een sjabloon halen.

Bij de tempopagina's hebben we een expliciete grens getrokken, en die staat als commentaar in de code: dit is een handgekozen lijst van tempo's waar mensen daadwerkelijk op zoeken, niet elk geheel getal van 1 tot 300, om te voorkomen dat er een content farm ontstaat. Zestien pagina's dus, van 60 tot 200 BPM, allemaal binnen de range die de metronoom ondersteunt, en elk met een reden om te bestaan. 60 BPM is één tel per seconde en daarmee de referentie waarmee je een metronoom überhaupt controleert: tel tien klikken en er hoort tien seconden voorbij te gaan. 128 BPM staat er omdat dat het tempo van house en dance is. Ze openen de metronoom voorgevuld op dat tempo.

De SEO-laag eronder is per pagina anders: een eigen title en description, en op de 39 pagina's in de sitemap een canonical. De tool-, stemmer- en tempopagina's dragen daarnaast JSON-LD met een FAQPage en een BreadcrumbList, opgebouwd uit dezelfde vragen die op de pagina zelf staan, zodat de gestructureerde data en de zichtbare tekst uit één bron komen. De sitemap wordt uit dezelfde datasets samengesteld als de pagina's zelf, waardoor de 39 URL's erin de pagina's zijn die de build ook echt oplevert. De lastModified daarin is bewust een vaste datum in plaats van new Date(), omdat dat laatste bij elke build alle URL's tegelijk als gewijzigd markeerde. Verder ligt er een robots.txt, een llms.txt en het IndexNow-script voor snellere indexering.

TuneStand is sinds de eerste commit op 3 juli 2026 in ontwikkeling en is in die tijd door twee eigen auditrondes gegaan. De eerste leverde de merkidentiteit, de OG-kaart, de privacy- en about-pagina's en een performanceverbetering in de stemmer op. De tweede, op 14 juli, bracht de contentuitbreiding, de Ahrefs-auditfixes en de monetisatievoorbereiding. Dat is de manier waarop we deze sites onderhouden: niet lanceren en vergeten, maar in rondes langsgaan met een concrete lijst.

Voor wie ons werk beoordeelt, is dit vooral een demonstratie van reikwijdte. Dezelfde ploeg heeft de niche gekozen, het merk getekend, het design-systeem geschreven, de audio-engineering gedaan en de vindbaarheid ingericht, en draagt het resultaat daarna zelf. De keuzes hangen ook samen: het donkere podium volgt uit waar dit gereedschap wordt gebruikt, de statische architectuur volgt uit de privacybelofte, en de handgekozen tempolijst volgt uit de weigering om dunne pagina's te maken voor een cijfer.

Wat ons betreft is de interessantste code in dit project de lookahead-scheduler die elke 25 milliseconden wakker wordt. Niemand ziet hem, niemand vraagt erom, en hij is het verschil tussen een metronoom die je kunt vertrouwen en een die er na een paar maten naast ligt. Dat is het niveau waarop we deze sites bouwen, ook als er niemand meekijkt.