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 · World Congress 2024

48 sec

Core components of the web speech API ecosystem

Tobias Münch Tobias Münch · World Congress 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 Chris Heilmann +2 · LIVE

58 sec

Uncensored voice assistants and neural controlled web browser accessibility

Chris Heilmann Chris Heilmann +2 · LIVE

More from WeAreDevelopers LIVE

WeAreDevelopers LIVE - Is CSS Catching Up to Flash? thumbnail
1:03:33
10 days ago

WeAreDevelopers LIVE - Is CSS Catching Up to Flash?

Chris Heilmann, Daniel Cranney, Bramus Van Damme

WeAreDevelopers LIVE - Project Chopin: Make Your Team and Agents Play Along thumbnail
1:21:17
17 days ago

WeAreDevelopers LIVE - Project Chopin: Make Your Team and Agents Play Along

Chris Heilmann, Daniel Cranney, Krzysztof Cieślak

Fake or News - AI Toothbrushes, Carrier Pigeon Tech & Life on Mars - Krzysztof Cieślak thumbnail
4:23
18 days ago

Fake or News - AI Toothbrushes, Carrier Pigeon Tech & Life on Mars - Krzysztof Cieślak

Chris Heilmann, Daniel Cranney

WeAreDevelopers LIVE - Open Source Agent Toolkits thumbnail
1:00:38
24 days ago

WeAreDevelopers LIVE - Open Source Agent Toolkits

Chris Heilmann, Daniel Cranney, Eddie Jaoude

Fake or News - AI Music Detectors, Translating Ancient Languages & Tiny Heads in Teslas - Eddie Jaoude thumbnail
6:16
25 days ago

Fake or News - AI Music Detectors, Translating Ancient Languages & Tiny Heads in Teslas - Eddie Jaoude

Chris Heilmann, Daniel Cranney

Fake or News: AI Agents Hire Each Other, Spider-Man Ads in Cars & RAM Thieves - Marc Plogas thumbnail
5:46
about 1 month ago

Fake or News: AI Agents Hire Each Other, Spider-Man Ads in Cars & RAM Thieves - Marc Plogas

Chris Heilmann, Daniel Cranney, Marc Plogas

Related videos

Speak, Code, Deploy: Transforming Developer Experience with Voice Commands thumbnail
28:37
World Congress 2024 • about 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
World Congress 2024 • about 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 • 11 months ago

WeAreDevelopers LIVE – Inclusion, Accessibility & Automation

Chris Heilmann, Daniel Cranney, Daniela Kubesch

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

Raise your voice!

Lee Boonstra

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.