Back to all posts
toolsweb-audiouisound-designfrontend

Tiks: Procedural UI Sounds for the Web With Zero Audio Files

bxp

Blaž Pregelj

May 7, 20263 min read
Tiks: Procedural UI Sounds for the Web With Zero Audio Files

A waveform visualisation of procedurally generated UI click sounds in a browser.

Most web apps are silent. Not in a calm, intentional way — in a "nobody ever got around to it" way. You click a button, toggle a switch, submit a form, and nothing. Just pixels changing state.

That's fine, until you use something that actually has sound feedback. Then you go back to your silent app and it feels weirdly hollow.

Tiks is a small library that wants to fix that.

What it actually does

Tiks generates UI sounds procedurally, directly in the browser using the Web Audio API. No audio files. No CDN-hosted MP3s. No dependencies. Just synthesis, on the fly, from code.

The whole thing weighs around 2KB gzipped. That's smaller than most icons.

The API is about as simple as it gets:

import { tiks } from '@rexa-developer/tiks'

// Initialise on first user gesture (browser requirement)
tiks.init()

// Then just call what you need
tiks.click()
tiks.success()
tiks.toggle(true)

That's it. Three lines to go from a silent interface to one that gives feedback.

Why procedural matters here

Shipping audio files for UI sounds is a pain nobody wants. You're managing assets, worrying about formats, adding HTTP requests for something that plays for 80 milliseconds. It never feels worth the effort.

Procedural synthesis sidesteps all of that. The sounds are generated at runtime from mathematical descriptions, which means they're tiny, they're consistent, and you can tweak them programmatically rather than firing up an audio editor every time you want a slightly different click.

It's the same reason game engines have used procedural audio for years. Turns out it works just as well for a toggle switch on a settings page.

The details worth knowing

Tiks comes with theme support, so you can swap between different sound palettes without changing your call sites. The demo page has a volume control and live examples — worth spending two minutes with before you decide if the aesthetic fits your project.

The browser gesture requirement (tiks.init() on first interaction) is a Web Audio API constraint, not a library quirk. Browsers block audio until a user has actually touched something, which is sensible policy but means you need to wire that init call into a click handler or similar.

When I'd actually reach for this

Not every interface needs sound. But if you're building something where feedback matters — a tool people use repeatedly, a game UI, anything with a lot of toggles and confirmations — this is a genuinely low-effort way to add a layer of polish that most web apps skip entirely.

At 2KB and zero dependencies, the cost of trying it is basically nothing.


Takeaway: Tiks is one of those libraries that solves a real, annoying problem in the most direct way possible. Procedural synthesis via Web Audio, tiny footprint, dead-simple API. If your UI has been silent because shipping audio files felt like too much work, this removes that excuse.

0
Share

Comments

No comments yet. Be the first!

Sign up

Enjoyed this article? Get the next one in your inbox.

AI, gamification and interesting tech stories — 1× a month.

newsletter bell
Tiks: Procedural UI Sounds for the Web With Zero Audio Files — Blaž Pregelj