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
Douglas GmbH
Düsseldorf, Germany
Intermediate
Senior
TypeScript
React
ROSEN Technology and Research Center GmbH
Osnabrück, Germany
Senior
TypeScript
React
+3
Matching moments
03:16 MIN
Improving the developer feedback loop with specialized tools
Developer Time Is Valuable - Use the Right Tools - Kilian Valkhof
03:31 MIN
The value of progressive enhancement and semantic HTML
WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More
03:58 MIN
Making accessibility tooling actionable and encouraging
Developer Time Is Valuable - Use the Right Tools - Kilian Valkhof
04:30 MIN
Understanding browser APIs that rely on company services
Developer Time Is Valuable - Use the Right Tools - Kilian Valkhof
09:38 MIN
Technical challenges of shipping a cross-platform browser
Developer Time Is Valuable - Use the Right Tools - Kilian Valkhof
02:33 MIN
Why you might not need JavaScript for everything
WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More
05:28 MIN
The origin story of the Polypane developer browser
Developer Time Is Valuable - Use the Right Tools - Kilian Valkhof
02:49 MIN
Using AI to overcome challenges in systems programming
AI in the Open and in Browsers - Tarek Ziadé
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
1:06:20WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more
Chris Heilmann, Daniel Cranney & Jan Deppisch
30:59Raise your voice!
Lee Boonstra
14:44Catching up on the basics you don't really need that much code
Chris Heilmann
27:23From ML to LLM: On-device AI in the Browser
Nico Martin
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 Valencia, Spain
Remote
XCode
Continuous Integration
Speechify
Hannover, Germany
Remote
XCode
Continuous Integration
Speechify
Vienna, Austria
Remote
XCode
Continuous Integration