Skip to content

feat(harmony): Implement native Web Speech API#136

Merged
Luxque merged 1 commit into
113-harmonyfrom
135-testing-react-speech-recognition
Mar 28, 2025
Merged

feat(harmony): Implement native Web Speech API#136
Luxque merged 1 commit into
113-harmonyfrom
135-testing-react-speech-recognition

Conversation

@tennitech

@tennitech tennitech commented Mar 24, 2025

Copy link
Copy Markdown
Owner

(Internal Development Only, for now)
This PR is a direct implementation of the Web Speech API aimed at performance and reliability.

Changes include:

  • Implement native Web Speech API via recognitionRef
  • Implement icons for microphone and stop buttons
  • Fix runtime errors related to speech recognition
  • Maintain consistent UI design, at least to a degree for internal development

The implementation now uses the browser's built-in speech recognition capabilities, resulting in smaller bundle size and more direct control over the recognition process.

To test,

  • Start the app (cd juke/jukeos --> npm start):
  • Select Harmony from the nav bar
  • Select one of the stars
  • Select the microphone icon
  • Allow the permission requests that appear
  • Say a few words/sentences to ensure text appears (there's a slight delay)
  • Test several times to check stability/reliability

This commit is a direct implementation of the Web Speech API aimed at performance and reliability.

Changes include:
- Implement native Web Speech API via recognitionRef
- Implement icons for microphone and stop buttons
- Fix runtime errors related to speech recognition
- Maintain consistent UI design, at least to a degree for internal development

The implementation now uses the browser's built-in speech recognition
capabilities, resulting in smaller bundle size and more direct control
over the recognition process.
@tennitech tennitech added enhancement New feature or request front-end Front-end related tasks back-end Back-end related tasks labels Mar 24, 2025
@tennitech tennitech requested review from EvWhymark and Luxque March 24, 2025 17:52
@tennitech tennitech self-assigned this Mar 24, 2025
@tennitech tennitech added this to Juke Mar 24, 2025
@tennitech tennitech changed the title feat(harmony): Implement native Web Speech API with custom SVG icons feat(harmony): Implement native Web Speech API Mar 25, 2025
@Luxque Luxque moved this to Done in Juke Mar 28, 2025
@Luxque Luxque moved this from Done to In review in Juke Mar 28, 2025

// Initialize Web Speech API
useEffect(() => {
if ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window) {

@Luxque Luxque Mar 28, 2025

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am swapping the order of these two because you are essentially assuming that the users are more likely to have SpeechRecognition than webkitSpeechRecognition. In this assumption, 'SpeechRecognition' in window should be evaluated first, so the application can skip evaluating 'webkitSpeechRecognition' in window. I tested the code on my side after the swap, and it seems it works just fine.

@Luxque Luxque left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tested your code (including my changes) on my side, and I could understand your code clearly. I approve your changes; you may delete this branch if you want.

@Luxque Luxque merged commit 261d064 into 113-harmony Mar 28, 2025
@Luxque Luxque deleted the 135-testing-react-speech-recognition branch March 28, 2025 21:29
@github-project-automation github-project-automation Bot moved this from In review to Done in Juke Mar 28, 2025
@Luxque Luxque restored the 135-testing-react-speech-recognition branch March 28, 2025 21:31
@Luxque Luxque linked an issue Mar 28, 2025 that may be closed by this pull request
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

back-end Back-end related tasks enhancement New feature or request front-end Front-end related tasks

Projects

Status: Done

Development

Successfully merging this pull request may close these issues.

Implement and test React Speech Recognition for Harmony voice input

2 participants