WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
WeAreDevelopers LIVE • Dec 16, 2024

Building a Browser-Based Karaoke Game with Web Speech API

Ana Rodrigues

Building "useless" side projects is the ultimate antidote to developer burnout. Watch Ana build a browser-based karaoke game to explore the Web Speech API and rediscover her frontend passion.

Pause
Mute Enter Fullscreen
#1 about 3 min

Motivation for building a gamified karaoke web app

The desire to create a browser-based karaoke game solving the lack of available songs for specific bands.

#2 about 2 min

Exploring the features of speech recognition and synthesis

How speech recognition and synthesis functionality can be utilized for continuous detection and forms input.

#3 about 3 min

Browser support and privacy concerns for speech recognition

Why features like native speech recognition often require a connected web server and lack consistent cross-browser support.

#4 about 5 min

Demonstrating voice navigation and synthesis bookmarklets

Live experiments showing how browser bookmarklets can turn text to speech or enable voice-activated page navigation.

#5 about 4 min

Implementing karaoke game logic and lyrics synchronization

The technical steps to initialize speech recognition, load timed lyric subtitles, and evaluate interim results.

#6 about 7 min

Testing the karaoke application with live singing

A live demonstration verifying text matching accuracy by comparing spoken word inputs against expected mapped lyrics.

#7 about 3 min

Current limitations of browser-based voice integrations

An overview of alternative polyfills, community projects, and the common voice dataset to improve voice technology reliance.

#8 about 2 min

Designing accessible voice content and interfaces

Actionable advice for structuring conversational content and handling error recovery in voice interaction designs.

#9 about 4 min

Combating burnout through unproductive side projects

Why experimenting with unmonetized ideas helps front-end developers learn new technical logic and rediscover creative programming joy.

Matching moments

2:30 min

Synthesizer karaoke and final presentation wrap up

Rowdy Rabouw Rowdy Rabouw · LIVE

1:30 min

Overview of voice user interfaces on the web

Tobias Münch Tobias Münch · WWC 2024

48 sec

Core components of the web speech API ecosystem

Tobias Münch Tobias Münch · WWC 2024

3:16 min

Voice AI architecture and interactive kiosk demo

Lee Boonstra · LIVE

4:24 min

Building synthesizers and music sequencers using web audio APIs

Chris Heilmann +2 · LIVE

58 sec

Uncensored voice assistants and neural controlled web browser accessibility

Chris Heilmann +2 · LIVE

More from WeAreDevelopers LIVE

Aliens in Quarantine, Python Deprecates Loops, and AI Buys Old Books - Zbyszek Tenerowicz thumbnail
5:43
5 days ago

Aliens in Quarantine, Python Deprecates Loops, and AI Buys Old Books - Zbyszek Tenerowicz

Chris Heilmann, Daniel Cranney

WeAreDevelopers LIVE - Node and Package Security thumbnail
1:08:30
5 days ago

WeAreDevelopers LIVE - Node and Package Security

Chris Heilmann, Daniel Cranney, Zbyszek Tenerowicz

WeAreDevelopers LIVE - Streaming HTML thumbnail
1:10:26
12 days ago

WeAreDevelopers LIVE - Streaming HTML

Chris Heilmann, Daniel Cranney, Jad Joubran

WeAreDevelopers LIVE - CODE100 at WeAreDevelopers Europe thumbnail
1:02:34
19 days ago

WeAreDevelopers LIVE - CODE100 at WeAreDevelopers Europe

Chris Heilmann, Daniel Cranney, Justin Halsall, Werner Jeschko, Nicole Jeschko, Mirco Tomić

WeAreDevelopers LIVE - Web Performance in an AI World thumbnail
1:07:59
26 days ago

WeAreDevelopers LIVE - Web Performance in an AI World

Chris Heilmann, Daniel Cranney

FIFA Hack, Midjourney Does Ultrasounds, and Trampoline Traffic Lights - Nicole Jeschko and Werner Jeschko thumbnail
5:55
about 2 months ago

FIFA Hack, Midjourney Does Ultrasounds, and Trampoline Traffic Lights - Nicole Jeschko and Werner Jeschko

Chris Heilmann, Daniel Cranney

Upcoming sessions on this topic

Open session

World Congress 2026 North America

Honey, look! I vibe-coded an OS!

Ian Smith

CTO, LYOS

Ian Smith
Open session

World Congress 2026 North America

Small LLM in your Browser: Huge Opportunities for Web Applications

Daniel Ostrovsky

UI/UX Architect at Payoneer | AI Architect | Full Cycle Development Expert | Public Speaker | Open Source Contributor |

Daniel Ostrovsky
Open session

World Congress 2026 North America

Vibe Coding Accessibility

Karl Groves

Focused on actively fixing accessibility

Karl Groves
Open session

World Congress 2026 North America

From Software Agents to Physical Devices: Inside the Agentic Hardware Stack

Vivian Hu, Michael Yuan

Vivian Hu
Michael Yuan
Open session

World Congress 2026 North America

When Humans Stop Writing Code: Rethinking Languages, Compilers, and Responsibility

Simon Auer

Organizer of flutter vienna meetup and CEO of marqably

Simon Auer
Open session

World Congress 2026 North America

How to generate business value through performance optimizations

Nikolai Sidiropulo

Software Engineer at Meta

Nikolai Sidiropulo

Related videos

Speak, Code, Deploy: Transforming Developer Experience with Voice Commands thumbnail
28:37
WWC 2024 • almost 2 years ago

Speak, Code, Deploy: Transforming Developer Experience with Voice Commands

Sami Ekblad

Is the web ready for voice user interfaces? thumbnail
23:09
WWC 2024 • almost 2 years ago

Is the web ready for voice user interfaces?

Tobias Münch

New Browser APIs, End of React Create App, Smuggling Data in Emoji and more with Rowdy Rabouw thumbnail
1:13:35
LIVE • over 1 year ago

New Browser APIs, End of React Create App, Smuggling Data in Emoji and more with Rowdy Rabouw

Chris Heilmann, Daniel Cranney, Rowdy Rabouw

Honeypots and Tarpits, Benefits of Building your own Tools and more with Salma Alam-Naylor thumbnail
1:18:31
LIVE • over 1 year ago

Honeypots and Tarpits, Benefits of Building your own Tools and more with Salma Alam-Naylor

Chris Heilmann, Daniel Cranney, Salma Alam-Naylor

WeAreDevelopers LIVE – Inclusion, Accessibility & Automation thumbnail
1:09:45
LIVE • 10 months ago

WeAreDevelopers LIVE – Inclusion, Accessibility & Automation

Chris Heilmann, Daniel Cranney, Daniela Kubesch

Raise your voice! thumbnail
30:59
LIVE • about 6 years ago

Raise your voice!

Lee Boonstra

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.