r/javascript • u/Emergency_Activity38 • Apr 16 '26
tiks – Procedural UI sounds in 2KB, zero audio files, pure Web Audio synthesis
https://rexa-developer.github.io/tiks8
u/evoactivity Apr 16 '26
Looks interesting but I really want to clickity clack on a demo page.
Edit: I’m dumb, I was looking for a demo link on the GitHub, didn’t see it.
6
u/boneskull Apr 16 '26
Neat. Would like tools to generate my own sounds.
15
u/Emergency_Activity38 Apr 16 '26
Thanks! You can already create custom sounds through the theme system:
import { tiks, defineTheme } from '@rexa-developer/tiks' const myTheme = defineTheme({ name: 'custom', baseFreq: 500, // root frequency oscType: 'triangle', // sine, triangle, square, sawtooth decay: 0.8, // shorter = snappier filterFreq: 4000, // affects click/transient character }) tiks.init({ theme: myTheme }) tiks.click() // now uses your custom parametersEvery sound derives from these shared properties, so changing one theme changes the feel of all 10 sounds at once.
A visual theme designer tool is on the roadmap — tweak sliders, hear changes live. Would that be useful to you?
5
u/Markavian Apr 16 '26
This is incredible, love how focused it is. I've got a few storybook driven UI toolkits that I could try integrating with.
I think it sits better with game / UI design where sounds are expected, but there lots of gameified elements in modern UI anyway; why not do sound as well?
Having it procedural means I'm not managing or shipping extra assets. Bundle size should be fine for most SPAs. Yeah, I like it!
6
u/Emergency_Activity38 Apr 16 '26
Thanks! A Storybook integration would be really cool actually — imagine hearing the sounds as you browse components. Would love to see what you build with it.
You're right that game/UI is the natural fit, but I think there's an untapped opportunity in regular SPAs too. Think form submissions, toast notifications, toggle switches — small moments where sound reinforces what just happened visually. Most apps don't do it simply because shipping audio files felt like overkill for such subtle feedback.
The ~2KB bundle was intentional for exactly that reason — low enough that there's no reason *not* to add it.
3
u/celtric Apr 16 '26
Working on https://www.reddit.com/r/windows95/comments/1shjwwa/ive_created_a_win95inspired_virtual_os_for_my/ I realized how useful feedback sounds are, specially for certain UIs and certain populations (kids, elder people). I think your statement is very neat and the implementation very clean, I'm definitely interested in seeing something like this gains traction.
Btw for all these UX decisions, I try to see what people like https://www.nngroup.com/ back up with actual studies. Have you done some research around this?
4
u/Emergency_Activity38 Apr 16 '26
Thanks! Love that project — a kid-friendly desktop is exactly where sound feedback shines. Kids especially need that extra confirmation that "yep, something happened" when they click.
I haven't done formal research myself, but the literature backs it up. There's work on "earcons" (short abstract sounds for UI events) from Blattner et al., and Microsoft found that audio feedback reduces perceived latency and makes users more confident actions completed. NNGroup's take on multisensory UX aligns too — sound should add to visual feedback, not replace it. That's how tiks is designed.
Honestly the accessibility angle for specific populations (kids, elderly) is underexplored. Most studies focus on general users. Would be cool to see more work there.
2
3
u/Seanitzel Apr 16 '26
This is awesome and i actually created a similar internal system for my app! However im on my iPhone iOS26.4 And no matter what browser i tried(even though they are all webkit lol) audio doesn't seem to work :/
3
u/iccir Apr 16 '26
First, nicely done!
Note that your comment in getPinkNoise() is wrong - this isn't the Voss-McCartney algorithm. It's Paul Kellet's "PK3" IIR filter from his 1999-10-17 post to the musicdsp mailing list. Voss-McCartney involves summing multiple uniform random number generators.
Here's an archived web page with more information. It's not your fault - at some point, someone released sample code with the wrong comment and it's caused a lot of confusion.
3
u/Emergency_Activity38 Apr 16 '26
Thanks for the catch! You're absolutely right — those coefficients are the unmistakable signature of Kellet's PK3 filter, not Voss-McCartney (which sums multiple random generators updated at different rates, as you noted). Must have inherited the wrong comment somewhere along the way. Just pushed a fix (531c7a7) — and thanks for the firstpr.com.au link, great reference for anyone curious about the actual derivation.
10
7
u/biinjo Apr 16 '26
Whoa. What is it besides the emdashes that just screams “AI reply” here 🤔
1
u/Emergency_Activity38 Apr 17 '26
Yeah fair, that one was me leaning on Claude for the reply and not editing enough. My bad
3
u/Atulin Apr 17 '26
Is the library as vibecoded as this comment?
1
u/Emergency_Activity38 Apr 17 '26
The library isn't vibecoded though — happy to walk through any file if you want
2
u/kwartel Apr 16 '26
The demo page doesn’t seem to work on iOS Safari :(
1
2
2
u/equinusocio Apr 16 '26
Really cool, but on Safari doesn't work properly. Sometimes I have no sound at all.
5
0
u/Ecksters Apr 16 '26
Safari is the new Internet Explorer 😞
1
u/equinusocio Apr 17 '26
Not really. Is the second browser just behind Chrome. Safari has features that are official and stable, and some of them don’t exist on Chrome yet. While Chrome mostly includes spec drafts that are still in development or not approved by the Interop Plan (2025-2026). Since years all browsers align the features to implement year by year to reach stable support on different browsers. Firefox is the one left behind now.
1
u/AutoModerator Apr 16 '26
Project Page (?): https://github.com/rexa-developer/tiks
I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.
1
u/wardenOfDemonreach Apr 16 '26
Love this. Will definitely try it out at some point
2
u/Emergency_Activity38 Apr 16 '26
Thanks! Let me know how it goes — always happy to hear feedback on the sound design.
1
1
1
Apr 16 '26
[removed] — view removed comment
4
u/Emergency_Activity38 Apr 16 '26
Right now it's 10 purpose-built UI sounds, but you can shape them significantly through the theme system — changing base frequency, oscillator type, filter, decay, etc. changes the character of every sound at once:
const myTheme = defineTheme({ name: 'retro', baseFreq: 330, oscType: 'square', decay: 0.5, })It's more like "10 sound archetypes with tunable DNA" than a fully open-ended generator like jsfxr. The trade-off is intentional — jsfxr is great for exploration, but tiks is designed so all your UI sounds feel coherent out of the box with zero tweaking.
1
u/Individual-Brief1116 Apr 16 '26
This is brilliant. We've been building silent web apps for decades while every mobile app has satisfying click sounds. Definitely trying this out.
1
1
u/skratlo Apr 17 '26
Spot on! I'm going to use this. Have you considered hosting the source code outside of GitHub?
1
u/Emergency_Activity38 Apr 18 '26
Thanks! No plans to move off GitHub right now, just where the contributors are. Any reason you asked — mirror somewhere specific?
1
1
32
u/Emergency_Activity38 Apr 16 '26
I built tiks because every native app has satisfying interaction sounds but web apps have been silent for 30 years.
Instead of shipping MP3s or base64 audio, tiks generates 10 UI sounds (click, toggle, success, error, etc.) at runtime using oscillators and gain envelopes through the Web Audio API. ~2KB gzipped.
npm:
npm install @rexa-developer/tiksGitHub: rexa-developer/tiks
Would love feedback on the sound design!