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
30:23 MIN
A live karaoke demo and concluding thoughts
Beats in the Browser: Coding Music with JavaScript
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
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!
03:39 MIN
Understanding the limitations of the Web Speech API
Building a Browser-Based Karaoke Game with Web Speech API
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
53:46WeAreDevelopers LIVE – AI vs the Web & AI in Browsers
Chris Heilmann, Daniel Cranney & Raymond Camden
30:59Raise your voice!
Lee Boonstra
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
From learning to earning
Jobs that call for the skills explored in this talk.
Frontend Web Developer - JavaScript | React | Angular | Vue.js | Bootstrap | Tailwind | HTML | CSS
Tech Solutions Gmbh
API
CSS
GIT
HTML
Scrum
+5