Phone Speakers Cleaner — Web Audio Tool Website

Overview#

Phone Speakers Cleaner is a free website that helps people whose phone speaker sounds muffled after rain, a splash or months in a pocket. Open the page, turn the volume up, point the speaker down and press start. The site plays carefully shaped low-frequency sound that moves the speaker cone and pushes water droplets and loose dust out through the grille.

Around the cleaner there is a tone generator for manual control, a speaker test to check each speaker after cleaning, and a blog with guides for common speaker problems. It runs entirely in the browser and needs no app.

My role#

I built the whole site: the sound engine, the cleaner interface and its animation, the extra tools, the blog system, the SEO setup and the analytics.

The problem#

Many pages offering this kind of tool are slow, heavy with ads and pop-ups, and vague about what the sound can actually do.

I wanted a fast, honest tool: clear steps, sound designed for the job, a plain explanation of what it can and cannot fix, and helpful content that answers the next question a user has.

Approach & architecture#

It is a Next.js site with almost no dependencies beyond React. The sound is generated live in the browser with the Web Audio API, so there are no audio files to download and nothing leaves the device.

1. User picks a modethen
2. →cleaner UIthen
3. →audio engine builds a sequence (pulses / sweeps)

1. Audio enginethen
2. →Web Audio oscillatorsthen
3. →phone speaker

1. Audio enginethen
2. →live progress + current frequencythen
3. →grille animation

1. Blog poststhen
2. →static pages + sitemap + structured datathen
3. →search engines

The audio engine is one module that every tool shares. A cleaning mode is described as a sequence of short segments, such as pulses at one frequency or sweeps between two. The engine plays the sequence and reports live progress and the current frequency, which drives the on-screen grille and the percentage counter. The cleaner offers a guided smart clean that asks what went wrong, plus dedicated water and dust modes.

Blog posts live in one content file. Adding a post automatically gives it its own page, a sitemap entry and article structured data.

Key challenges#

Sound that does the job without harm. Water responds best to low pulses with short pauses so droplets can gather between pushes; dust responds better to sweeps across a range. I designed the modes around that and kept volumes and durations sensible, with honest advice on when the problem is not something sound can fix.

Browser audio rules. Mobile browsers only allow sound after a user action and differ in how they handle it. The engine starts audio from the tap itself, stops cleanly when the user switches tools, and shows a clear message on browsers that cannot generate sound.

Speed and search. The tool has to load fast on cheap phones on mobile data. Pages are static where possible, the interface is light, and the home page carries real explanations and a FAQ with structured data so search engines understand it.

Tech stack#

• Next.js and React with TypeScript for pages, the tools and the blog.
• Web Audio API for all generated sound, with no audio files.
• Structured data, sitemap and metadata for search.
• Google Analytics 4 to see which tools and guides people use.
• Light and dark themes and a mobile menu built without UI libraries.

Results#

The site is built with the smart cleaner, water and dust modes, the tone generator, the speaker test, about, contact and legal pages, and a blog of 15 guides. The brand was renamed during development from an earlier working name, so the screenshot below shows that earlier name.

Screenshots#