How to Use Voice Input in Retool Applications

1// JS Query: startVoiceInput
2// Check browser support
3if (!('webkitSpeechRecognition' in window) && !('SpeechRecognition' in window)) {
4  utils.showNotification({
5    title: 'Browser not supported',
6    description: 'Voice input requires Chrome or Edge. Your current browser does not support the Web Speech API.',
7    notificationType: 'error',
8  });
9  return;
10}
11
12// Create SpeechRecognition instance
13const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
14const recognition = new SpeechRecognition();
15
16// Configuration
17recognition.lang = 'en-US'; // Language — change to 'es-ES', 'fr-FR', etc. as needed
18recognition.interimResults = true; // Show in-progress text while still speaking
19recognition.maxAlternatives = 1; // Return only the top recognition result
20recognition.continuous = false; // Stop automatically after a pause in speech
21
22// Store recognition on window so stopVoiceInput query can access it
23window._retoolSpeechRecognition = recognition;
24
25recognition.onstart = () => {
26  isRecording.setValue(true);
27  utils.showNotification({
28    title: 'Listening...',
29    description: 'Speak now. Recording will stop automatically after a pause.',
30    notificationType: 'info',
31    duration: 3,
32  });
33};
34
35recognition.onresult = (event) => {
36  let interimTranscript = '';
37  let finalTranscript = '';
38
39  // Iterate over all results
40  for (let i = event.resultIndex; i < event.results.length; i++) {
41    const transcript = event.results[i][0].transcript;
42    if (event.results[i].isFinal) {
43      finalTranscript += transcript;
44    } else {
45      interimTranscript += transcript;
46    }
47  }
48
49  // Update state with current transcript (final preferred, interim as fallback)
50  const currentText = voiceTranscript.value || '';
51  const newText = currentText + (finalTranscript || interimTranscript);
52  voiceTranscript.setValue(newText);
53};
54
55recognition.onerror = (event) => {
56  isRecording.setValue(false);
57
58  const errorMessages = {
59    'not-allowed': 'Microphone access denied. Click the camera/mic icon in your browser address bar to allow microphone access.',
60    'no-speech': 'No speech detected. Make sure your microphone is working and try again.',
61    'network': 'Network error during speech recognition. Check your internet connection.',
62    'aborted': 'Recording was cancelled.',
63  };
64
65  const message = errorMessages[event.error] || `Speech recognition error: ${event.error}`;
66  utils.showNotification({
67    title: 'Voice input error',
68    description: message,
69    notificationType: 'error',
70  });
71};
72
73recognition.onend = () => {
74  isRecording.setValue(false);
75};
76
77// Start recording
78recognition.start();

1// JS Query: stopVoiceInput
2// Stops the active SpeechRecognition session
3const recognition = window._retoolSpeechRecognition;
4
5if (recognition) {
6  recognition.stop();
7  window._retoolSpeechRecognition = null;
8} else {
9  utils.showNotification({
10    title: 'Not recording',
11    description: 'No active recording session to stop.',
12    notificationType: 'warning',
13  });
14}

1// Button label expression:
2{{ isRecording.value ? '🎙 Stop Recording' : '🎤 Start Recording' }}
3
4// Event Handler 1: Start recording
5// Trigger: startVoiceInput
6// Only run when: {{ !isRecording.value }}
7
8// Event Handler 2: Stop recording
9// Trigger: stopVoiceInput
10// Only run when: {{ isRecording.value }}

1// In startVoiceInput, replace the lang line with:
2recognition.lang = recognitionLang.value || 'en-US';
3
4// Select component options:
5// [
6//   { label: 'English (US)', value: 'en-US' },
7//   { label: 'English (UK)', value: 'en-GB' },
8//   { label: 'Spanish', value: 'es-ES' },
9//   { label: 'French', value: 'fr-FR' },
10//   { label: 'German', value: 'de-DE' },
11//   { label: 'Japanese', value: 'ja-JP' }
12// ]

1// For long-form dictation, change:
2recognition.continuous = true; // Don't stop on pause
3recognition.interimResults = true;
4
5// In onresult, accumulate results across multiple speech segments:
6recognition.onresult = (event) => {
7  let fullTranscript = '';
8  for (let i = 0; i < event.results.length; i++) {
9    if (event.results[i].isFinal) {
10      fullTranscript += event.results[i][0].transcript + ' ';
11    }
12  }
13  voiceTranscript.setValue(fullTranscript.trim());
14};