Menu

1 / 2

UI sounds without a single audio file

DEV Community: react·Msotafa Mohamed·3 days ago
#pjFFiPyR
#devtoreact#devto#dev#tonely#sound
Reading 0:00
15s threshold

Think of the apps that feel the most polished. Many of them make a small sound when a payment goes through, a message is sent or a switch flips. You don't notice the sound. You'd notice if it was missing.

On the web, most of us skip it. Adding sounds usually means finding .mp3 files, hosting them, preloading them, and dealing with browsers that block audio before the user interacts with the page.

tonely takes a different route. It doesn't ship audio files at all. It builds each sound when it plays, from oscillators and envelopes in the Web Audio API. The whole library is under 3 kB gzip and makes no network requests.

The basics

import { tonely } from " tonely " ;

tonely . success (); tonely . error (); tonely . click (); tonely . toggle ( true ); // rises for on, falls for off

Enter fullscreen mode

Exit fullscreen mode

The built-in sounds are success , error , warning , info , click , pop , toggle , delete , glass and bubble .…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.