Ana Rodrigues

Building a Browser-Based Karaoke Game with Web Speech API

It started as a fun karaoke game for her favorite band. It ended as a cautionary tale about the Web Speech API.

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.

job ad

Saby Company
Delebio, Italy

Intermediate

test

Milly
Vienna, Austria

Intermediate

Matching moments

Creating a gamified karaoke experience in the browser
00:09 MIN

Creating a gamified karaoke experience in the browser

Building a Browser-Based Karaoke Game with Web Speech API

A live demonstration of the browser karaoke game
14:22 MIN

A live demonstration of the browser karaoke game

Building a Browser-Based Karaoke Game with Web Speech API

A live karaoke demo and concluding thoughts
30:23 MIN

A live karaoke demo and concluding thoughts

Beats in the Browser: Coding Music with JavaScript

Key challenges limiting Web Speech API adoption
11:46 MIN

Key challenges limiting Web Speech API adoption

Is the web ready for voice user interfaces?

Implementing the core logic for the karaoke game
10:46 MIN

Implementing the core logic for the karaoke game

Building a Browser-Based Karaoke Game with Web Speech API

Combining a drum machine with karaoke for a live performance
30:26 MIN

Combining a drum machine with karaoke for a live performance

Beats in the Browser: Coding Music with JavaScript

An overview of the Web Speech API
02:36 MIN

An overview of the Web Speech API

Building a Browser-Based Karaoke Game with Web Speech API

Building a custom voice AI with WebRTC and Google APIs
00:17 MIN

Building a custom voice AI with WebRTC and Google APIs

Raise your voice!

Featured Partners

Related Videos

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

Building a Browser-Based Karaoke Game with Web Speech API

Catching up on the basics you don't really need that much code14:44

Catching up on the basics you don't really need that much code

Chris Heilmann

Beats in the Browser: Coding Music with JavaScript32:54

Beats in the Browser: Coding Music with JavaScript

Rowdy Rabouw

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

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

Nico Martin

Raise your voice!30:59

Raise your voice!

Lee Boonstra

WeAreDevelopers LIVE - Accessibility isn't magic, Longevity, Devrel in times of AI and more1:42:35

WeAreDevelopers LIVE - Accessibility isn't magic, Longevity, Devrel in times of AI and more

Chris Heilmann, Daniel Cranney & GrahamTheDev

New Browser APIs, End of React Create App, Smuggling Data in Emoji and more with Rowdy Rabouw1:13:35

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

Chris Heilmann & Daniel Cranney & Rowdy Rabouw

Creating games to make the web fun again41:03

Creating games to make the web fun again

Nolan Royalty

Related Articles

View all articles
LM
Luis Minvielle
Developers share the most interesting tech they ever built
Most people's first thoughts about Hacker News revolve around venture capital, stock prices, company valuations, and $1499 dongles. But what if we told you that Hacker News could also be a place for pure, consummate, wholesome content that tackles ho...
Developers share the most interesting tech they ever built
CH
Chris Heilmann
WWC24 Talk - Brenda Romero - Stay: Surviving and Thriving in Tech
Brenda Romero discusses her tech career journey, overcoming burnout, and inspiring future game developers at WWC24.Here is what she had to say in the video:Hey everyone! Thanks for joining us!Reflections on a Rough YearLast year, I gave a talk about ...
WWC24 Talk - Brenda Romero - Stay: Surviving and Thriving in Tech
LM
Luis Minvielle
10 Developer Websites in 2023
As a web developer, you're always investigating how to level up your skills and streamline your workflow. That's why we've gathered a collection of 10 innovative tools that are guaranteed to boost your productivity, enhance your coding abilities, ele...
10 Developer Websites in 2023
CH
Chris Heilmann
Dev Digest 116 - WWWAI?
This time, learn how to un-AI Google's search results, what's new on the web, avoid a new security hole and go back to BASICS with us. News and ArticlesWhat a week. Google, Microsoft, OpenAI and many others had their big flagship events announcing th...
Dev Digest 116 - WWWAI?

From learning to earning

Jobs that call for the skills explored in this talk.