Building a Browser-Based Karaoke Game with Web Speech API

A developer built a karaoke game for her favorite band. She ended up discovering the hard limits and surprising flaws of the Web Speech API.

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

The value of progressive enhancement and semantic HTML
03:31 MIN

The value of progressive enhancement and semantic HTML

WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More

Improving the developer feedback loop with specialized tools
03:16 MIN

Improving the developer feedback loop with specialized tools

Developer Time Is Valuable - Use the Right Tools - Kilian Valkhof

Making accessibility tooling actionable and encouraging
03:58 MIN

Making accessibility tooling actionable and encouraging

Developer Time Is Valuable - Use the Right Tools - Kilian Valkhof

Understanding browser APIs that rely on company services
04:30 MIN

Understanding browser APIs that rely on company services

Developer Time Is Valuable - Use the Right Tools - Kilian Valkhof

Using AI to overcome challenges in systems programming
02:49 MIN

Using AI to overcome challenges in systems programming

AI in the Open and in Browsers - Tarek Ziadé

The security challenges of building AI browser agents
06:33 MIN

The security challenges of building AI browser agents

AI in the Open and in Browsers - Tarek Ziadé

Technical challenges of shipping a cross-platform browser
09:38 MIN

Technical challenges of shipping a cross-platform browser

Developer Time Is Valuable - Use the Right Tools - Kilian Valkhof

Using AI prompts to rebuild a classic 8-bit game
05:26 MIN

Using AI prompts to rebuild a classic 8-bit game

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

Featured Partners

Related Videos

See all videos
Building a Browser-Based Karaoke Game with Web Speech API28:09

Building a Browser-Based Karaoke Game with Web Speech API

Ana Rodrigues

Creating games to make the web fun again41:03

Creating games to make the web fun again

Nolan Royalty

Is the web ready for voice user interfaces?23:09

Is the web ready for voice user interfaces?

Tobias Münch

Beats in the Browser: Coding Music with JavaScript32:54

Beats in the Browser: Coding Music with JavaScript

Rowdy Rabouw

Beats in the Browser: Coding Music with JavaScript32:54

Beats in the Browser: Coding Music with JavaScript

Raise your voice!30:59

Raise your voice!

Lee Boonstra

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more1:06:20

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

Chris Heilmann, Daniel Cranney & Jan Deppisch

From ML to LLM: On-device AI in the Browser27:23

From ML to LLM: On-device AI in the Browser

Nico Martin

Related Articles

View all articles
CH
Chris Heilmann
Building a "shoutout" component in plain HTML/CSS/JavaScript
Every Wednesday we meet at noon to talk about a lot of tech news, tools and resources in something we call WeAreDevelopers Live . We go live on YouTube and afterwards we cut out short videos to post on social media. What we needed was an obvious “sho...
Building a "shoutout" component in plain HTML/CSS/JavaScript
A
Apify
What Developers Are Building to Win $1 Million with Apify
Apify started as a web scraping product, but quickly evolved into a full-blown platform and marketplace for developers to write code, and monetise it by creating Actors, tools that simplify the scraping process for others. Running until the end of J...
What Developers Are Building to Win $1 Million with Apify

From learning to earning

Jobs that call for the skills explored in this talk.