Skip to main content

🎙️ TTS Widget Demo

🎙️ Live Demo: These widgets use OpenAI's TTS service with the new coral voice and instructions feature. Click any "Listen" button to hear real AI-generated speech!

📑 Widget Examples

🎯 Basic Widgets

Simple widgets with just a play/pause button - perfect for blogs and content:

Basic Widget (Default):

Welcome to Supernal TTS! This is a demonstration of our embeddable text-to-speech widget. Click the button to hear this text spoken aloud.

Shorter Text:

Click to hear this short message.

🎛️ All OpenAI Voice Variations

Experience all 7 OpenAI voices, each with unique characteristics:

Alloy - Neutral, balanced:

Hi, I'm Alloy, a neutral and balanced voice.

Echo - Warm, engaging:

Hello, I'm Echo, bringing warmth to your content.

Fable - Expressive, storytelling:

Greetings, I'm Fable, perfect for storytelling and narration.

Onyx - Deep, authoritative:

I'm Onyx, delivering a deep and authoritative tone.

Nova - Friendly, conversational:

Hey there! I'm Nova, your friendly conversational voice.

Shimmer - Bright, energetic:

Hi! I'm Shimmer, bringing energy and brightness to your text!

Coral - NEW! Natural, conversational:

Hello! I'm Coral, the newest voice with natural conversational quality.

Different Widget Styles

Default Style:

This is the default widget style with full button text using OpenAI's high-quality voices.

Nova Voice:

This is the nova voice - more compact and subtle, powered by OpenAI.

Coral Voice:

This is the coral voice with natural conversational tone and the new Coral voice.

Blog Post Example

The Future of Text-to-Speech Technology

Text-to-speech technology has evolved dramatically in recent years. With advances in neural networks and deep learning, we can now generate incredibly natural-sounding speech that rivals human narration.

The applications are endless: from making content more accessible to busy professionals, to helping people with reading difficulties, to creating engaging audiobook experiences.

Integration Code

1. In MDX/Markdown files:

<TTSWidget text="Your text here" provider="openai" voice="coral">
  Your content that will be spoken
</TTSWidget>

2. In React components:

import TTSWidget from '@site/src/components/TTSWidget';

<TTSWidget 
  text="Welcome to our site!" 
  provider="openai"
  voice="fable"
>
  <p>Welcome to our site!</p>
</TTSWidget>

3. Configuration options:

<TTSWidget 
  text="Text to speak"
  provider="openai"     // openai, cartesia, azure, mock
  voice="fable"         // Provider-specific voice
  enableSpeed={true}    // Show speed control
  className="my-class"  // Additional CSS classes
>
  Your content here
</TTSWidget>

Branding & Customization

The Supernal TTS widget includes:

  • 🚧 Development Preview Badge: Clearly indicates development status
  • Consistent Styling: Matches your site's theme (light/dark mode)
  • Responsive Design: Works on desktop and mobile devices
  • Accessibility: Proper ARIA labels and keyboard navigation
  • Error Handling: Graceful degradation when services are unavailable
🎨 Custom Branding: The widget can be customized with your brand colors, fonts, and styling to match your website's design system.

Ready to integrate? Check out our Widget Integration Guide for detailed instructions.