aws-samples / aws-samples/aws-lex-web-ui

Microphone Not Working When Using Multiple Languages (NotSupportedError)

Open
#780 2 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
817
Forks
506
PR merge metrics
No merged PRs in 30d

Description

## Description
When configuring the Lex Web UI with multiple languages, the microphone functionality breaks when switching between languages. The issue specifically occurs when using both English and Spanish together, though they work individually.

### Current Behavior
- Microphone works when using single language (either en_US or es_US)
- When configuring both languages together, clicking the mic icon results in error
- Console shows: `NotSupportedError: The element has no supported sources`

### Expected Behavior
- Microphone should work regardless of language selection
- Should be able to switch between languages and use voice input for both

### Configuration

json
{
"lex": {
"v2BotId": "ISAQDQYPMZ",
"v2BotAliasId": "OOLPQ1XBGK",
"v2BotLocaleId": "en_US,es_US",
"botName": "ISAQAQYCMY",
"botAlias": "$LATEST",
"initialText": "Hello! You can ask me for help inorder to register for sleep test.",
"initialSpeechInstruction": "Say 'Sleep Test' to get started."
},
"polly": {
"voiceId": "Joanna,Lupe"
},
"recorder": {
"preset": "speech_recognition",
"recordingTimeMin": "5",
"recordingTimeMax": "15",
"encoderUseTrim": true
}
}

### Error Stack Trace
lex-web-ui.min.js:43 Uncaught (in promise) NotSupportedError: The element has no supported sources.
(anonymous) @ lex-web-ui.min.js:43
setAudioAutoPlay @ lex-web-ui.min.js:43
(anonymous) @ 4.1.0_dist_vuex.min.js:1
A.dispatch @ 4.1.0_dist_vuex.min.js:1
A.t.dispatch @ 4.1.0_dist_vuex.min.js:1
setAutoPlay @ lex-web-ui.min.js:43
startSpeechConversation @ lex-web-ui.min.js:43
onMicClick @ lex-web-ui.min.js:43

### Environment
- Browser: Chrome
- Operating System: [Your OS]
- aws-lex-web-ui version: [Version number]

### Steps to Reproduce
1. Configure Lex Web UI with multiple languages (en_US,es_US)
2. Load the chat interface
3. Select Spanish language from the dropdown
4. Click on the microphone icon
5. Observe the error in console and non-functioning microphone

### Additional Context
- The issue only occurs when multiple languages are configured together
- Each language works correctly when configured individually
- Microphone permissions are properly granted in the browser
- Using HTTPS for the connection

Contributor guide

Open the contributing guide

Research direction

Reproduce the issue with the en_US,es_US configuration, then trace the microphone flow from onMicClick through startSpeechConversation and setAudioAutoPlay in lex-web-ui.min.js. Done means switching between English and Spanish does not produce NotSupportedError and microphone input works for both languages.

Written by the indexing model from the issue text.

Assessment

Tech stack
aws, javascript
Domain
audio-video-rtc, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.