5 weird web APIs that’ll make you fall back in love with the browser

So there I was, rebuilding my website for the third time this year (don’t judge), when I remembered something: browsers are actually magical.

weird web apis fall in love with browser

Beneath all the endless form validation, error states, and API calls we deal with daily, the web is still packed with weird little features; the kind that make you grin like you’ve just stumbled into a hidden level in some old-school game.

We tend to stick to the same old fetch() and addEventListener() toolkit, but there’s this whole forgotten layer of browser APIs that feel more like easter eggs than engineering. Think less of a CRUD app, more “wait, what is this doing in here?!”

And honestly, if you’ve been grinding through Sprint 112 of that B2B dashboard, you probably deserve a moment of joy. These APIs won’t just let you build weird stuff (though they absolutely do). They’ll help you reconnect with the parts of web development that feel fun, playful, and genuinely useful.

Because yes, shaking your phone programmatically is hilarious. But that exact same API can make mobile error handling more accessible.

Typing with a MIDI keyboard? That’s a great party trick. But it’s also a legit input method for people with alternative hardware setups.

So while these browser features might seem unhinged at first, each one opens up opportunities for delightful interfaces, unexpected interactions, and even thoughtful accessibility enhancements.

Let me walk you through five of these wonderfully bizarre browser APIs. They’re playful, useful, and definitely more fun than debugging another React component.

1. Battery Status API: The caring (yet slightly creepy) friend

Practical use case: Designing power-aware UX

Fun use case: Low-battery disco parties

When my laptop hits 10% battery, my website turns into a disco and shouts “GO CHARGE YOURSELF!” at me. Because apparently I needed my computer to have opinions about my life choices:

navigator.getBattery().then(battery => {
  function checkBattery() {
    if (battery.level < 0.1) {
      document.body.style.animation = 'disco 0.5s infinite';
      document.body.insertAdjacentHTML('beforeend', 
        '<div style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 3rem; z-index: 9999;">🔋 GO CHARGE YOURSELF! 🔋</div>'
      );
    }
  }
  battery.addEventListener('levelchange', checkBattery);
});

But wait, there’s a catch…

There is a serious note here: The Battery Status API is deprecated in most browsers due to privacy concerns. It was removed from Firefox in 2016 and is only supported in Chrome-based browsers up to certain versions. But for Easter eggs and experimental features? It’s still perfect (and sometimes useful).

The thoughtful use case: Power-aware UX

Your site can actually care about your visitors’ battery life. Running low? Automatically switch to a lightweight theme, turn off animations, or remind them to save their work before their laptop dies. Perfect for big tasks like an accounting website, CMS, or ERP website.

Other wild things you can try

  • Reduce video quality on low battery
  • Disable heavy animations under 20%
  • Show “save your work” warnings

2. Vibration API: The phone shaker that speaks in code

Practical use case: Haptic feedback for errors and messages

Fun use case: Rhythm games and beat-synced vibrations

Let me send you a message through vibration patterns. Ready? Here comes “HELLO” in Morse code:

// Morse code for "HELLO": .... . .-.. .-.. ---
if ("vibrate" in navigator) {
  navigator.vibrate([
    100, 50, 100, 50, 100, 50, 100,   // H: ....
    300,                                             // pause
    100,                                             // E: .
    300,                                             // pause
    100, 50, 300, 50, 100, 50, 100,   // L: .-..
    300,                                             // pause
    100, 50, 300, 50, 100, 50, 100,   // L: .-..
    300,                                             // pause
    300, 50, 300, 50, 300                  // O: ---
  ]);
}

Your phone just became a telegraph machine!

What’s the Vibration API good for?

The Vibration API lets you literally shake someone’s phone from your website. It’s supported on modern mobile browsers (but absent from iOS Safari).

Legitimate uses (yes, really)

For web-based games or apps, haptic feedback makes everything feel more real. A character takes damage? Buzz. Timer runs out? Gentle vibration. Form validation errors? Quick tap to get attention. Creative applications include:

  • Rhythm games with beat-synced vibrations
  • Accessibility features for visually impaired users
  • Meditation apps with breathing pattern vibrations

3. Web Speech API: Your browser’s inner monologue

Practical use case: Inclusive design, screen reader enhancements, voice-controlled forms

Fun use case: Talking fortune cookies and high-pitched robots

I built a talking fortune cookie website that delivers programming wisdom in a ridiculously high-pitched robot voice. Because apparently I needed my browser to become a motivational speaker:

const fortunes = [
  "You will debug for exactly three hours and discover the bug was a missing semicolon.",
  "A wild merge conflict will appear in your near future.",
  "Your code will work perfectly in staging but break spectacularly in production.",
  "You are the chosen one. But only until the next deploy."
];

function speakFortune() {
  const fortune = fortunes[Math.floor(Math.random() * fortunes.length)];
  const utterance = new SpeechSynthesisUtterance(fortune);
  utterance.pitch = 1.5; // Make it slightly silly
  utterance.rate = 0.9;
  speechSynthesis.speak(utterance);
}

There’s something magical about your browser delivering programming wisdom in a robot voice.

The Web Speech API is actually powerful

This API is a two-part magic trick: Speech Synthesis makes your browser talk, and Speech Recognition makes it listen. The synthesis part has decent browser support across Chrome, Firefox, and even Safari:

via GIPHY

Serious accessibility wins

This API is incredible for accessibility. Automatically narrate dashboard updates, provide voice explanations for complex UI elements, or create voice-controlled navigation. It’s inclusive design at its finest.

Practical applications

  • Screen reader enhancements
  • Voice-controlled forms
  • Audio feedback for visually impaired users
  • Language learning apps with pronunciation

4. WebHID API: When your steering wheel becomes a scroll bar

Practical use case: Designing accessible web UIs

Fun use case: Make scrolling feel like Mario Kart

Remember when “web input” meant keyboard events? Welcome to a new level: WebHID.

So I wired up my old racing wheel to my browser over USB and started scrolling through blog posts by turning left and right; because you can!

Was it ergonomic? Absolutely not.
Was it objectively awesome? Also yes:

const devices = await navigator.hid.requestDevice({ filters: [
{ vendorId: 0x046d }
]});

if (devices.length) {
  await devices[0].open();
  devices[0].addEventListener('inputreport', (e) => {
    // Assume axis 0 is steering
    const steer = e.data.getInt8(0);
    window.scrollBy(0, steer); // Steer = scroll!
  });
}

Suddenly, reading LogRocket articles felt like playing Mario Kart. Dangerous for productivity, excellent for Friday afternoon experiments.

Wait… what even is WebHID?

The WebHID API lets your website talk directly to any HID (Human Interface Device). Think gamepads, MIDI drums, barcode scanners, even obscure USB hardware from your junk drawer. It’s currently supported in Chrome 89+ and Edge 89+, but notably missing from Firefox and Safari.

And it’s actually useful?

Totally. Picture working with students at a STEM fair or designing accessible web UIs. Someone has a custom joystick or specialty controller? You can let them control your app natively. No downloads, no middleman software, just “plug and go” from the browser. It’s like WASM, but good.

Other wild things you can try:

  • Animated SVG blobs using PlayStation controller inputs
  • Triggered confetti bursts with a MIDI drum pad
  • Used a barcode scanner to unlock Easter eggs (yes, it’s possible)

5. WebMIDI API: Turn every keystroke into a musical note

Practical use case: Interactive sound design

Fun use case: Great opportunities for Rickrolls

I hooked up my dusty MIDI keyboard and made it so every note spawns a random emoji across my screen. Because apparently that’s what passes for productivity in my house:

navigator.requestMIDIAccess().then((access) => {
  for (const input of access.inputs.values()) {
    input.onmidimessage = (msg) => {
      if (msg.data[0] === 144 && msg.data[2] > 0) { // Note-on message
        const emoji = ['🎵', '🎶', '🎸', '🥁', '🎹', '🎺', '🎷'][Math.floor(Math.random() * 7)];
        document.body.insertAdjacentHTML('beforeend', 
          `<span style="font-size: 2rem; position: absolute; 
           left: ${Math.random() * 100}%; top: ${Math.random() * 100}%;">${emoji}</span>`
        );
      }
    };
  }
});

The result? A website that becomes a visual symphony every time you play. It’s ridiculous, joyful, and surprisingly engaging (and a very good opportunity for a Rickroll):

via GIPHY

The serious side: Collaborative music making

The WebMIDI API transforms browsers into musical instruments that can listen to and send MIDI messages. Imagine building a web app where musicians jam together across continents. Someone hits a note in Berlin, it triggers a synth in Montreal, controls lights in Tokyo, and creates a visualizer in your browser. Real-time musical collaboration without installing anything, just a browser.

Other wild things you can try:

  • Browser-based DAWs and sequencers
  • Educational music theory apps
  • Interactive sound design tools

Bonus round: More weird web magic

If you’re hungry for more browser weirdness:

  • Ambient Light API – Let your site’s theme match the lighting in your room (when it works)
  • Device Motion API – Build a digital lava lamp that responds to phone tilts
  • Clipboard API – Create “smart paste” that formats content automatically

The Ambient Light API is particularly fun! It can detect lux levels and adjust your UI accordingly. Perfect for creating “Kindle-style” reading experiences or smart home interfaces.

Why bother with the weird stuff?

Look, most of these APIs won’t revolutionize your next SaaS dashboard. But they do something more important; they remind us that the web is still a place for experimentation, joy, and delightful surprises. When I first started building websites, everything felt possible. These APIs bring back that feeling. They’re perfect for:

  • Learning – Understanding how browsers work under the hood
  • Prototyping – Testing wild ideas without complex setup
  • Accessibility – Creating more inclusive experiences
  • Joy – Making the web a little more magical

These APIs are a perfect excuse to stretch your skills, prototype wild ideas, or build more accessible, universally delightful experiences. Push past the plain and rediscover play.

The next time you’re stuck in a cycle of forms and API calls, grab one of these APIs and build something wonderfully unnecessary. Your future self will thank you for keeping the web weird.

The post 5 weird web APIs that’ll make you fall back in love with the browser appeared first on LogRocket Blog.

 

This post first appeared on Read More

Related Posts