Ana Rodrigues

Dec 16, 2024 • WeAreDevelopers LIVE

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.

#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.

Creating a personal karaoke game for favorite songs

Choosing a native browser API for speech-to-text

Understanding the limitations of the Web Speech API

Demonstrating basic API capabilities with live examples

Structuring the logic for a browser-based karaoke game

Live demo of the karaoke game in action

Assessing the API's readiness and exploring community projects

Applying best practices for voice interface design

Finding joy and learning through unproductive side projects

Matching moments

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

Building a Browser-Based Karaoke Game with Web Speech API

A live karaoke demo and concluding thoughts

Beats in the Browser: Coding Music with JavaScript

Key challenges limiting Web Speech API adoption

Is the web ready for voice user interfaces?

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

Beats in the Browser: Coding Music with JavaScript

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

Raise your voice!

Featured Partners

Related Videos