Building a Browser-Based Karaoke Game with Web Speech API
#1about 2 minutes
Creating a gamified karaoke experience in the browser
The motivation for building a custom karaoke game was to expand the song selection for a favorite band and add a scoring mechanic.
#2about 1 minute
An overview of the Web Speech API
The Web Speech API is a native browser feature split into speech recognition (speech-to-text) and speech synthesis (text-to-speech) for voice input and control.
#3about 3 minutes
Understanding the limitations of the Web Speech API
The API's real-world usability is hampered by inconsistent browser support, reliance on vendor-specific cloud services, and privacy concerns.
#4about 5 minutes
Demonstrating basic text-to-speech and voice navigation
A live demonstration shows how the API can be used for simple tasks like reading selected text aloud or enabling basic voice commands on a webpage.
#5about 4 minutes
Implementing the core logic for the karaoke game
The game's implementation involves initializing speech recognition, handling its tendency to stop by restarting it, and comparing the transcribed text against the song's lyrics.
#6about 6 minutes
A live demonstration of the browser karaoke game
The completed karaoke game is tested by speaking, singing, and intentionally using incorrect words to show how it scores the performance.
#7about 3 minutes
The API's current state and related community projects
While the native API is not yet production-ready for commercial use, the community has built useful tools and projects like Web Captioner and Mozilla's Common Voice.
#8about 1 minute
Practical design considerations for voice interfaces
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 "silly" side projects is a powerful way to combat burnout, learn new skills, and rediscover the fun in software development.
Related jobs
Jobs that call for the skills explored in this talk.
Matching moments
30:23 MIN
A live karaoke demo and concluding thoughts
Beats in the Browser: Coding Music with JavaScript
14:22 MIN
Live demo of the karaoke game in action
Building a Browser-Based Karaoke Game with Web Speech API
00:09 MIN
Creating a personal karaoke game for favorite songs
Building a Browser-Based Karaoke Game with Web Speech API
10:46 MIN
Structuring the logic for a browser-based 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
06:14 MIN
Demonstrating basic API capabilities with live examples
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
Ana Rodrigues
41:03Creating games to make the web fun again
Nolan Royalty
32:54Beats in the Browser: Coding Music with JavaScript
Rowdy Rabouw
23:09Is the web ready for voice user interfaces?
Tobias Münch
14:44Catching up on the basics you don't really need that much code
Chris Heilmann
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
27:23From ML to LLM: On-device AI in the Browser
Nico Martin
32:54Beats in the Browser: Coding Music with JavaScript
From learning to earning
Jobs that call for the skills explored in this talk.
![Senior Software Engineer [TypeScript] (Prisma Postgres)](https://wearedevelopers.imgix.net/company/283ba9dbbab3649de02b9b49e6284fd9/cover/oKWz2s90Z218LE8pFthP.png?w=400&ar=3.55&fit=crop&crop=entropy&auto=compress,format)
Senior Software Engineer [TypeScript] (Prisma Postgres)
Prisma
Remote
Senior
Node.js
TypeScript
PostgreSQL
