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
02:27 MIN
Creating a gamified karaoke experience in the browser
Building a Browser-Based Karaoke Game with Web Speech API
05:59 MIN
A live demonstration of the browser karaoke game
Building a Browser-Based Karaoke Game with Web Speech API
02:31 MIN
A live karaoke demo and concluding thoughts
Beats in the Browser: Coding Music with JavaScript
02:43 MIN
Key challenges limiting Web Speech API adoption
Is the web ready for voice user interfaces?
03:36 MIN
Implementing the core logic for the karaoke game
Building a Browser-Based Karaoke Game with Web Speech API
02:28 MIN
Combining a drum machine with karaoke for a live performance
Beats in the Browser: Coding Music with JavaScript
01:03 MIN
An overview of the Web Speech API
Building a Browser-Based Karaoke Game with Web Speech API
00:59 MIN
Building a custom voice AI with WebRTC and Google APIs
Raise your voice!
Featured Partners
Related Videos
28:09Building a Browser-Based Karaoke Game with Web Speech API
1:42:35WeAreDevelopers LIVE - Accessibility isn't magic, Longevity, Devrel in times of AI and more
Chris Heilmann, Daniel Cranney & GrahamTheDev
30:59Raise your voice!
Lee Boonstra
23:09Is the web ready for voice user interfaces?
Tobias Münch
27:23From ML to LLM: On-device AI in the Browser
Nico Martin
32:54Beats in the Browser: Coding Music with JavaScript
Rowdy Rabouw
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
14:44Catching up on the basics you don't really need that much code
Chris Heilmann
Related Articles
View all articles
From learning to earning
Jobs that call for the skills explored in this talk.
Speech Processing Solutions
Vienna, Austria
Intermediate
CSS
HTML
JavaScript
TypeScript
JO Media Software Solutions GmBh
Brunn am Gebirge, Austria
Senior
CSS
Angular
JavaScript
TypeScript
Lotum media GmbH
Bad Nauheim, Germany
Senior
Vue.js
Node.js
JavaScript
TypeScript
Lotum media GmbH
Bad Nauheim, Germany
Senior
Node.js
JavaScript
TypeScript
doinstruct Software GmbH
Berlin, Germany
Senior
GIT
JavaScript
TypeScript
Saby Company Page
Sarajevo, Bosnia and Herzegovina
Remote
€40-45K
Junior
Ruby on Rails
Microsoft SQL Server
Google Cloud Platform
+2
