`I have created an agent using dialogflow cx.
As the mic wouldn’t work for the defaulted dialogflow messenger I have used the javascript so that the mic and the functionality works. The text is working when using mic but I am not able to get the voice. Is there a way the app could respond as a voice?
Thank you!`
<script>
document.addEventListener('DOMContentLoaded', function () {
const micButton = document.getElementById('micButton');
let recognition;
function initializeVoiceRecognition() {
if (!('webkitSpeechRecognition' in window)) {
alert('Web Speech API is not supported by this browser.');
} else {
recognition = new webkitSpeechRecognition();
recognition.continuous = false;
recognition.interimResults = false;
recognition.onstart = function () {
micButton.style.color = 'blue'; // Change color to blue when recording starts
};
recognition.onend = function () {
micButton.style.color = 'gray'; // Change color back to gray when recording ends
};
recognition.onresult = function (event) {
const transcript = event.results[0][0].transcript;
sendVoiceMessageToDialogflow(transcript);
};
micButton.addEventListener('click', function () {
if (recognition && recognition.state === 'inactive') {
recognition.start();
} else if (recognition) {
recognition.stop();
}
});
}
}
function sendVoiceMessageToDialogflow(text) {
const dfMessenger = document.querySelector('df-messenger');
const chatComponent = dfMessenger.shadowRoot.querySelector('df-messenger-chat');
if (chatComponent) {
// Simulate typing and send the message
const input = chatComponent.shadowRoot.querySelector('input');
if (input) {
input.value = text;
input.dispatchEvent(new Event('input'));
const sendButton = dfMessenger.shadowRoot.querySelector('button.send-button');
if (sendButton) {
sendButton.click();
}
}
} else {
console.error('df-messenger-chat component not found.');
}
}
initializeVoiceRecognition();
});