Ana Rodrigues
Building a Browser-Based Karaoke Game with Web Speech API
#1about 2 minutes
Creating a personal karaoke game for favorite songs
The project was born from the desire to sing more than just one available song from a favorite band at karaoke.
#2about 2 minutes
Choosing a native browser API for speech-to-text
The Web Speech API was chosen over paid services because it is a free, native browser feature for speech recognition and synthesis.
#3about 3 minutes
Understanding the limitations of the Web Speech API
The API has significant limitations, including poor cross-browser support, reliance on vendor servers like Google and Apple, and privacy concerns.
#4about 5 minutes
Demonstrating basic API capabilities with live examples
Live demos showcase the API's core functions, including speech synthesis for reading selected text and speech recognition for voice navigation.
#5about 4 minutes
Structuring the logic for a browser-based karaoke game
The game logic involves synchronizing lyrics with audio playback time and comparing the transcribed speech with the expected lyric text.
#6about 6 minutes
Live demo of the karaoke game in action
The completed karaoke game is demonstrated by speaking, singing, and intentionally using incorrect words to test the matching logic.
#7about 3 minutes
Assessing the API's readiness and exploring community projects
While the API is not yet production-ready for all use cases, it powers many interesting community projects, polyfills, and captioning tools.
#8about 1 minute
Applying best practices for voice interface design
When designing for voice, it's crucial to use concise content, consider conversational flow, and plan for error recovery and cognitive load.
#9about 4 minutes
Finding joy and learning through unproductive side projects
Building "useless" or fun side projects is a powerful way to combat developer burnout, learn new technologies, and rediscover the joy of coding.
Related jobs
Jobs that call for the skills explored in this talk.
Eltemate
Amsterdam, Netherlands
Intermediate
Senior
TypeScript
Continuous Integration
+1
Matching moments
04:57 MIN
Increasing the value of talk recordings post-event
Cat Herding with Lions and Tigers - Christian Heilmann
03:28 MIN
Why corporate AI adoption lags behind the hype
What 2025 Taught Us: A Year-End Special with Hung Lee
04:22 MIN
Why HR struggles with technology implementation and adoption
What 2025 Taught Us: A Year-End Special with Hung Lee
03:34 MIN
The business case for sustainable high performance
Sustainable High Performance: Build It or Pay the Price
04:57 MIN
Shifting from formal corporate speak to an authentic voice
Leveraging Leaders’ Voices: The Business Power of Personal Branding
06:44 MIN
Using Chrome's built-in AI for on-device features
Devs vs. Marketers, COBOL and Copilot, Make Live Coding Easy and more - The Best of LIVE 2025 - Part 3
04:02 MIN
How a broken frontend culture impacts the web
WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more
03:12 MIN
Creating psychological safety as the foundation for performance
Sustainable High Performance: Build It or Pay the Price
Featured Partners
Related Videos
28:09Building a Browser-Based Karaoke Game with Web Speech API
32:54Beats in the Browser: Coding Music with JavaScript
Rowdy Rabouw
14:44Catching up on the basics you don't really need that much code
Chris Heilmann
1:06:20WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more
Chris Heilmann, Daniel Cranney & Jan Deppisch
27:23From ML to LLM: On-device AI in the Browser
Nico Martin
30:59Raise your voice!
Lee Boonstra
53:46WeAreDevelopers LIVE – AI vs the Web & AI in Browsers
Chris Heilmann, Daniel Cranney & Raymond Camden
23:09Is the web ready for voice user interfaces?
Tobias Münch
Related Articles
View all articles
From learning to earning
Jobs that call for the skills explored in this talk.
Visonum GmbH
Remote
Junior
Intermediate
React
Redux
TypeScript
Speechify
Municipality of San Sebastian, Spain
Remote
Azure
Python
Docker
Kubernetes
+1
BoraBora GmbH
Barcelona, Spain
React
MongoDB
Node.js