DEV Community: nayeem

Rebuilding Apple Watch's "Water Lock" Tone in the Browser (and 3 iOS Safari Gotchas)

nayeem — Sat, 24 Oct 2026 08:50:11 +0000

When you finish a swim, Apple Watch can play a short, buzzy tone to push water out of its speaker. Phones don't have a button like that. Most "water eject" apps I found play a similar tone, and some put it behind a weekly subscription.

I wanted to know if a plain web page could do the same job on any phone, with nothing to install. It mostly can. Here's the physics, the code, and three iOS Safari problems I hit along the way.

Why a low tone, and why around 165 Hz

A speaker grille is a fine mesh. A droplet in the mesh is held there by surface tension, so it often won't drain out on its own.

The speaker sits right behind that mesh. At low pitches the speaker cone moves further with each cycle, so it pushes more air against the droplet. At high pitches it barely moves.

There's a limit, though. Small phone speakers can't play deep bass well. Their output drops off sharply below roughly 100–200 Hz, depending on the phone. So a tone in the 145–165 Hz range is a practical middle ground: low enough to move the cone a lot, high enough that the phone can still play it loudly. Treat that as a reasonable starting point, not a measured optimum for every phone.

Pulses instead of a steady tone

With a steady tone, the droplet tends to settle into a new shape and stay put. Short bursts with gaps keep shaking it. I use about 0.8 s on and 0.2 s off.

Here's the core of it in plain JavaScript:

function playWaterPulse(seconds = 10, freq = 165) {
  const AudioCtx = window.AudioContext || window.webkitAudioContext;
  const ctx = new AudioCtx();
  const osc = ctx.createOscillator();
  const gain = ctx.createGain();

  osc.type = "sine";
  osc.frequency.value = freq;
  gain.gain.value = 0;
  osc.connect(gain).connect(ctx.destination);

  const t0 = ctx.currentTime;
  for (let t = t0; t < t0 + seconds; t += 1) {
    // Short ramps instead of hard on/off, so the speaker doesn't click
    gain.gain.setTargetAtTime(0.8, t, 0.015);
    gain.gain.setTargetAtTime(0, t + 0.8, 0.015);
  }

  osc.start(t0);
  osc.stop(t0 + seconds);
  return () => { osc.stop(); ctx.close(); };
}

Call it from a button's click handler (browsers block audio that starts without a tap). The returned function stops it early.

Gotcha 1: the iPhone silent switch mutes web audio

On iOS, web audio is treated like a game sound. If the phone is set to silent, the page plays nothing. Someone with a wet phone will just assume the page is broken.

Safari 17 added the Audio Session API. Setting the type to "playback" before starting tells iOS this is media, so it plays even in silent mode:

if ("audioSession" in navigator) {
  navigator.audioSession.type = "playback";
}

On older iOS versions this doesn't exist, so I still show a note telling people to check the silent switch.

Gotcha 2: the first tap sometimes plays nothing

On some iPhones the first tap after loading created the audio context but no sound came out. What fixed it for me was playing a one-sample silent buffer right inside the tap handler, before anything async runs:

function unlock(ctx) {
  const buf = ctx.createBuffer(1, 1, 22050);
  const src = ctx.createBufferSource();
  src.buffer = buf;
  src.connect(ctx.destination);
  src.start(0);
  if (ctx.state === "suspended") ctx.resume();
}

The important part is the timing. If you await anything first, Safari may no longer count it as a user gesture.

Gotcha 3: vibration only works on Android

Shaking the phone along with the sound seemed like a nice extra. navigator.vibrate() works in Chrome on Android:

if ("vibrate" in navigator) {
  navigator.vibrate([800, 200, 800, 200, 800, 200]);
}

Safari on iPhone doesn't support the Vibration API, and the call quietly does nothing. I label the toggle "Android only" so iPhone users don't think something is wrong.

What this can't do

This part matters more than the code:

It can only help with water sitting in the speaker grille. It does nothing for water inside the phone.
Salt water, pool water and sugary drinks can leave residue or cause corrosion. Rinse guidance and a repair shop are better options there.
Don't use a hair dryer, compressed air or a cotton swab in the grille. Heat and air pressure can damage the speaker or the seals.
If sound is still muffled after the phone has dried for a day, the speaker may be damaged.

Apple's own advice for a wet iPhone is to tap it gently, speaker side down, against your hand and let it dry. A tone is an extra step on top of that, not a replacement.

Try it

I put this into a free water eject tool that runs in the browser and never uses the microphone. Hold the phone speaker-down over a cloth, set the volume to around 75% (lower if it distorts), and run it two or three times.

I'm curious whether others have found better ways to handle Web Audio on iOS, especially for people on iOS 16 and earlier. Let me know in the comments.

— Nayeem, software developer

Engineering a Zero-Dependency, Privacy-First Audio Widget in Under 30KB

nayeem — Mon, 19 Oct 2026 00:30:00 +0000

Embeds are one of the easiest ways to make someone else's page slow. A typical "free widget" brings a framework, a font, a tracking script and a cookie banner problem. I wanted to build one that a blogger could drop into a post without thinking about any of that.

The widget plays a 165 Hz pulse for clearing water from phone speakers. The goals were: no cookies, no tracking, no external requests, and under 30 KB.

Generate the sound, don't download it
An MP3 of a 60-second tone is several hundred KB. Generating it with Web Audio costs a few lines:

let ctx, osc, gain;

function start() {
  ctx ??= new AudioContext();
  osc = new OscillatorNode(ctx, { frequency: 165 });
  gain = new GainNode(ctx, { gain: 0 });
  osc.connect(gain).connect(ctx.destination);
  osc.start();
  // pulse: 0.8s on, 0.2s off
  for (let t = ctx.currentTime; t < ctx.currentTime + 60; t += 1) {
    gain.gain.setTargetAtTime(0.8, t, 0.01);
    gain.gain.setTargetAtTime(0, t + 0.8, 0.01);
  }
}

function stop() {
  gain?.gain.setTargetAtTime(0, ctx.currentTime, 0.02);
  osc?.stop(ctx.currentTime + 0.1);
}

No network request, no codec, and the audio is identical on every device.

Rules I followed
Nothing runs until a tap. The AudioContext is created in the click handler. That's also what browsers require for audio anyway.
The animation only runs while sound plays. The waveform's requestAnimationFrame loop stops on Stop, so an idle widget uses no CPU.
System fonts only. A web font alone can be bigger than the whole widget.
No storage, no cookies, no analytics inside the iframe. Nothing to disclose in the host's privacy policy.
Theme via query string. ?theme=light or ?theme=dark. No config script on the host page.

The embed code

<iframe
  src="https://speakercleaningtool.com/embed/water-eject?theme=dark"
  width="360" height="420"
  loading="lazy"
  title="Water Eject speaker cleaner"
  style="border:0;border-radius:12px;max-width:100%">
</iframe>

loading="lazy" means the iframe isn't fetched until the reader scrolls near it, so it doesn't affect the host page's first load. Always set width and height to avoid layout shift.

SEO detail I learned the hard way
My first version let the bare widget URL get indexed, and SEO audits flagged it as a thin page with no heading. The fix was a noindex, follow robots meta plus a canonical pointing at the full tool page. Don't block it in robots.txt, though. If crawlers can't fetch the page, they never see the noindex.

Use it or copy the approach
The widget and setup steps for WordPress, Webflow, Ghost and plain HTML are on the embed page(opens in a new tab). It's free to use. If you're building your own embed, I hope the checklist above saves you a few audit warnings.

— Nayeem, Software Developer

Pushing Small Speakers to the Limit: Building a Multi-Harmonic Web Audio DSP Chain in Vanilla JavaScript

nayeem — Sun, 11 Oct 2026 10:24:12 +0000

I spent a few weekends trying to answer a simple question: how loud and clear can a browser make a tiny phone speaker sound, without any library and without distorting?

The honest answer surprised me. Turning the gain up does almost nothing useful. What works is shaping the signal so the speaker's energy goes where it can actually move air.

Why a pure sine wave is a bad fit for a phone speaker

A phone speaker is roughly 1 cm across. Below a few hundred hertz it barely moves air, so a pure 165 Hz sine spends most of its energy where the driver can't reproduce it. You hear a weak hum, and pushing the gain only clips the output.

Harmonics help. If I play 165 Hz plus quieter copies at 2×, 3× and 4× (330, 495, 660 Hz), the ear still hears the 165 Hz pitch (the "missing fundamental" effect), and the speaker gets frequencies it can actually play.

const ctx = new AudioContext();
const out = ctx.createGain();

const layers = [
{ mult: 1, gain: 1.0 },
{ mult: 2, gain: 0.55 },
{ mult: 3, gain: 0.3 },
{ mult: 4, gain: 0.16 },
];

The chain

Here is the order I ended up with. Each step fixes a problem the step before it creates.

Pre-gain — drive the signal hotter on purpose.
WaveShaper (tanh curve) — soft-clip the peaks so they round off instead of cracking.
Peaking biquad at 2.8 kHz (+7 dB) — small speakers sound clearest around there.
DynamicsCompressor — evens out the loud and quiet parts.
Make-up gain — gets back the level the compressor took.
Ceiling limiter (about -0.2 dB) — a hard stop so nothing goes over full scale.

function softClipCurve(amount = 2.6, n = 2048) {
const curve = new Float32Array(n);
for (let i = 0; i < n; i++) {
const x = (i / (n - 1)) * 2 - 1;
curve[i] = Math.tanh(amount * x) / Math.tanh(amount);
}
return curve;
}

out.connect(pre).connect(shaper).connect(presence)
.connect(comp).connect(makeup).connect(ceiling)
.connect(ctx.destination);

oversample: "4x" matters. Without it, the tanh curve adds aliasing that sounds like a gritty buzz.

Loudness compensation for low notes

Our ears are less sensitive to low frequencies (the equal-loudness, or Fletcher–Munson, curves). So I add a small boost that grows as the frequency drops:

function loudnessComp(freq) {
if (freq <= 45) return 1.5;
if (freq <= 70) return 1.38;
if (freq <= 150) return 1.15;
return 1;
}

It's a rough step function, not a calibrated curve, and I'd rather say that up front. It just makes a 40 Hz test tone feel about as loud as a 400 Hz one on a laptop.

Things that bit me

Autoplay rules. Create the AudioContext inside a click handler, or browsers will keep it suspended.
Clicks at start and stop. Ramp the gain over about 20 ms with setTargetAtTime instead of jumping to zero.
Being honest about limits. This chain makes a speaker sound fuller. It can't fix a torn cone or a blown coil, and I don't claim it can.

Where this lives

I use this chain in a small free tool I built, the Speaker Cleaner, which plays low tones and sweeps to shake dust and water out of phone speakers. Everything runs in the browser and nothing is recorded, so you can open DevTools and look at the node graph yourself.

If you've built something similar, I'd like to hear how you handled limiting. I'm still not sure a compressor is the best "brickwall" in Web Audio.

— Nayeem, Software Developer