Example of Text-to-Speech in ASP.NET MVC AIAssistView Control

This sample demonstrates the integration of Text-to-Speech functionality with the AI AssistView component. It allows users to convert AI-generated responses into spoken audio using the browser's SpeechSynthesis API, with responses powered by Azure OpenAI.

DEMO
SOURCE

In this example, the AI AssistView component is integrated with Text-to-Speech functionality to enable voice-based interaction with AI-generated responses.

The sample demonstrates the following features:

  • The responseToolbarSettings includes a custom Read Aloud button that extracts plain text from the AI response and uses the browser's SpeechSynthesis API to vocalize it.
  • The SpeechSynthesisUtterance interface is used to manage speech playback, including toggling between play and stop states.
  • Additional response toolbar buttons include Copy to copy the response text, and Like and Need Improvement for user feedback.
  • The toolbarSettings adds a right-aligned Refresh button to clear previous prompts.
  • Responses are streamed dynamically using the addPromptResponse method, and the scrollToBottom method ensures the latest response is always visible.
  • Markdown content is rendered using the Marked plugin for rich formatting in AI responses.
  • The promptSuggestions provides AI prompt suggestions to guide user interactions.
Transform your ASP.NET MVC web apps today with Syncfusion® ASP.NET MVC components
145+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing
TRY IT FOR FREE
opens in a new tab