> Markdown version of [/videos/1274-building-a-browser-based-karaoke-game-with-web-speech-api?t=222](https://www.wearedevelopers.com/videos/1274-building-a-browser-based-karaoke-game-with-web-speech-api?t=222). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md).

---

# Building a Browser-Based Karaoke Game with Web Speech API

Building "useless" side projects is the ultimate antidote to developer burnout. Watch Ana build a browser-based karaoke game to explore the Web Speech API and rediscover her frontend passion.

- **Speakers:** Ana Rodrigues
- **Event:** WeAreDevelopers LIVE
- **Published:** December 16, 2024
- **Duration:** 28:09
- **URL:** https://www.wearedevelopers.com/videos/1274-building-a-browser-based-karaoke-game-with-web-speech-api

## Summary

In this talk, Ana shares her journey of building a browser-based gamified karaoke experience using the native Web Speech API. Motivated by a desire to sing an expanded catalog of songs, she set out to explore the capabilities of built-in browser speech recognition and synthesis rather than relying on paid private APIs. Through building a functioning prototype, she uncovered the fragmented reality of native voice support. The API usually requires internet connectivity and relies heavily on third-party server processing—such as Google's infrastructure for Chromium browsers—while exhibiting quirks like automatic pausing that complicate continuous listening.

Despite these technical hurdles, she successfully hooks up `HTMLMediaElement` controls and CSS text animations to the transcribed text generated by the Speech Recognition API. While demonstrating voice-driven web navigation and lyric matching, she details essential voice interface design principles. When designing for screen readers or voice-controlled interfaces, it is critical to keep content conversational (similar to an FAQ), avoid verbose or ambiguous phrasing like isolated "click here" links, and proactively plan for error recovery to reduce users' cognitive load.

Ultimately, building this web app served a purpose far more meaningful than writing flawless code. Ana highlights how the modern tech industry often pressures developers to monetize their hobbies or turn weekend ideas into polished open-source packages. She advocates that giving yourself "permission to build unproductive things" acts as a powerful antidote to burnout. Creating silly or supposedly useless side projects provides a safe space to deeply read API specifications, learn complex CSS animations, and rekindle a genuine love for front-end development absent of professional pressures.

**Keywords:** web speech api, browser speech recognition, speech synthesis, voice interface design, front-end side projects, html media element, css text animations, cross-browser api support, developer burnout prevention, continuous speech detection, voice navigation accessibility, gamified web applications, cognitive load reduction, web accessibility tools

## Chapters

1. **Motivation for building a gamified karaoke web app** (00:01) — The desire to create a browser-based karaoke game solving the lack of available songs for specific bands.
1. **Exploring the features of speech recognition and synthesis** (02:36) — How speech recognition and synthesis functionality can be utilized for continuous detection and forms input.
1. **Browser support and privacy concerns for speech recognition** (03:42) — Why features like native speech recognition often require a connected web server and lack consistent cross-browser support.
1. **Demonstrating voice navigation and synthesis bookmarklets** (06:19) — Live experiments showing how browser bookmarklets can turn text to speech or enable voice-activated page navigation.
1. **Implementing karaoke game logic and lyrics synchronization** (10:49) — The technical steps to initialize speech recognition, load timed lyric subtitles, and evaluate interim results.
1. **Testing the karaoke application with live singing** (14:22) — A live demonstration verifying text matching accuracy by comparing spoken word inputs against expected mapped lyrics.
1. **Current limitations of browser-based voice integrations** (20:25) — An overview of alternative polyfills, community projects, and the common voice dataset to improve voice technology reliance.
1. **Designing accessible voice content and interfaces** (23:04) — Actionable advice for structuring conversational content and handling error recovery in voice interaction designs.
1. **Combating burnout through unproductive side projects** (24:34) — Why experimenting with unmonetized ideas helps front-end developers learn new technical logic and rediscover creative programming joy.

## Related Moments

- [Synthesizer karaoke and final presentation wrap up](https://www.wearedevelopers.com/videos/1279-beats-in-the-browser-coding-music-with-javascript) (from "Beats in the Browser: Coding Music with JavaScript")
- [Overview of voice user interfaces on the web](https://www.wearedevelopers.com/videos/1142-is-the-web-ready-for-voice-user-interfaces) (from "Is the web ready for voice user interfaces?")
- [Core components of the web speech API ecosystem](https://www.wearedevelopers.com/videos/1142-is-the-web-ready-for-voice-user-interfaces) (from "Is the web ready for voice user interfaces?")
- [Voice AI architecture and interactive kiosk demo](https://www.wearedevelopers.com/videos/10-raise-your-voice) (from "Raise your voice!")
- [Building synthesizers and music sequencers using web audio APIs](https://www.wearedevelopers.com/videos/1299-new-browser-apis-end-of-react-create-app-smuggling-data-in-emoji-and-more-with-rowdy-rabouw) (from "New Browser APIs, End of React Create App, Smuggling Data in Emoji and more with Rowdy Rabouw")
- [Uncensored voice assistants and neural controlled web browser accessibility](https://www.wearedevelopers.com/videos/1839-training-bots-on-deliveroo-data-alexa-can-swear-and-mushroom-electronics-julia-kordick) (from "Training Bots on Deliveroo Data, Alexa Can Swear and Mushroom Electronics - Julia Kordick")

## Related Articles

- [Dev Digest 129 - Now that's what I call private data!](https://www.wearedevelopers.com/magazine/468-dev-digest-129-now-that-s-what-i-call-private-data)
- [Dev Digest 108 - Git off my cloud!](https://www.wearedevelopers.com/magazine/407-dev-digest-108-git-off-my-cloud)
- [Dev Digest 128 - Do not Google Monopoly](https://www.wearedevelopers.com/magazine/465-dev-digest-128-do-not-google-monopoly)
- [Dev Digest 138 - Are you secure about this?](https://www.wearedevelopers.com/magazine/486-dev-digest-138-are-you-secure-about-this)

## Related Jobs

- [Senior Web Designer, Growth](https://www.wearedevelopers.com/jobs/ext/102722-senior-web-designer-growth) at **Intercom, Inc.**
- [AI Software Engineer (Germany)](https://www.wearedevelopers.com/jobs/48317-ai-software-engineer-germany) at **Sunhat**
- [Junior Frontend Engineer](https://www.wearedevelopers.com/jobs/ext/1532351-junior-frontend-engineer) at **Almedia**
- [Software Engineer, React & Angular (Broker Web Platform](https://www.wearedevelopers.com/jobs/ext/1558399-software-engineer-react-angular-broker-web-platform) at **Bitpanda**
- [Software Engineer](https://www.wearedevelopers.com/jobs/ext/1304673-software-engineer) at **Bitpanda**
- [Founding Mobile Engineer (iOS)](https://www.wearedevelopers.com/jobs/ext/1648532-founding-mobile-engineer-ios) at **Almedia**