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.
Matching moments
00:09 MIN
Creating a gamified karaoke experience in the browser
Building a Browser-Based Karaoke Game with Web Speech API
14:22 MIN
A live demonstration of the browser karaoke game
Building a Browser-Based Karaoke Game with Web Speech API
10:46 MIN
Implementing the core logic for the karaoke game
Building a Browser-Based Karaoke Game with Web Speech API
30:26 MIN
Combining a drum machine with karaoke for a live performance
Beats in the Browser: Coding Music with JavaScript
30:23 MIN
A live karaoke demo and concluding thoughts
Beats in the Browser: Coding Music with JavaScript
02:36 MIN
An overview of the Web Speech API
Building a Browser-Based Karaoke Game with Web Speech API
00:17 MIN
Building a custom voice AI with WebRTC and Google APIs
Raise your voice!
11:46 MIN
Key challenges limiting Web Speech API adoption
Is the web ready for voice user interfaces?
Featured Partners
Related Videos
28:09Building a Browser-Based Karaoke Game with Web Speech API
14:44Catching up on the basics you don't really need that much code
Chris Heilmann
32:54Beats in the Browser: Coding Music with JavaScript
Rowdy Rabouw
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
1:13:35New Browser APIs, End of React Create App, Smuggling Data in Emoji and more with Rowdy Rabouw
Chris Heilmann & Daniel Cranney & Rowdy Rabouw
41:03Creating games to make the web fun again
Nolan Royalty
Related Articles
View all articles
From learning to earning
Jobs that call for the skills explored in this talk.
Front End Engineer TypeScript React Native AI
Client Server
Charing Cross, United Kingdom
Remote
£80K
CSS
React
JavaScript
+5
Senior Software Engineer, AI Model serving - Palma de Mallorca, Spain Palma de Mallorca, Spain
Speechify, Inc.
Municipality of Palma, Spain