🎙️ Interactive Widget Demos

Progressive feature examples - from basic to fully-featured. Toggle between Live Demo and Code to see how each works.

Try hovering and clicking the widgets to see controls appear. Each example builds on the previous one.

1. Basic Mode

Just a play button - perfect for simple content.

Live Demo

Welcome to Supernal TTS! This is the basic mode with just a play button.

Code

<!-- Add to your content -->
<div class="supernal-tts-widget"
     data-voice="fable">
  <p>Welcome to Supernal TTS! This is the basic mode with just a play button. </p>
</div>

<script type="module">
  import { SupernalTTS } from 'supernal-tts-widget';
  SupernalTTS.init({ apiUrl: 'https://tts.supernal.ai' });
</script>

---

2. With Voice Selection

Play button + voice dropdown (appears on hover).

Live Demo

Now we have voice options! Hover over the widget to reveal the voice selector. Click the chevron to choose from different voices.

Code

<div class="supernal-tts-widget"
     data-voice="fable"
     data-voices="fable,nova,onyx,shimmer">
  <p>Now we have voice options! Hover over the widget to reveal the voice selector. Click the chevron to choose from different voices.</p>
</div>

---

3. With Speed Control

Play + voice + speed dropdown (discrete steps: 0.6x to 3.0x in 0.2 increments).

Live Demo

Adding speed control! Hover to see the voice and speed icons. The lightning bolt reveals speeds from 0.6x to 3.0x.

Code

<div class="supernal-tts-widget"
     data-voice="fable"
     data-voices="fable,nova,onyx,shimmer"
     data-enable-speed="true"
     data-speed="1.0">
  <p>Adding speed control! Hover to see the voice and speed icons. The lightning bolt reveals speeds from 0.6x to 3.0x.</p>
</div>

---

4. Full-Featured (With Progress Bar)

All controls + seekable progress bar (shows on hover or when playing).

Live Demo

This is the full-featured widget with voice selection, speed control, and progress bar. Hover to reveal all controls and the seekable timeline.

Code

<div class="supernal-tts-widget"
     data-voice="fable"
     data-voices="fable,nova,onyx,shimmer"
     data-enable-speed="true"
     data-enable-progress="true"
     data-speed="1.0">
  <p>This is the full-featured widget with voice selection, speed control, and progress bar. Hover to reveal all controls and the seekable timeline.</p>
</div>

---

Voice Comparison

Try different OpenAI voices with the same content.

Live Demo

Nova: Energetic and enthusiastic

Onyx: Deep and authoritative

Shimmer: Warm and friendly

Fable: Balanced and expressive

Code

<!-- Nova -->
<div class="supernal-tts-widget" data-voice="nova">
  <p><strong>Nova:</strong> Energetic and enthusiastic</p>
</div>

<!-- Onyx -->
<div class="supernal-tts-widget" data-voice="onyx">
  <p><strong>Onyx:</strong> Deep and authoritative</p>
</div>

<!-- Shimmer -->
<div class="supernal-tts-widget" data-voice="shimmer">
  <p><strong>Shimmer:</strong> Warm and friendly</p>
</div>

<!-- Fable -->
<div class="supernal-tts-widget" data-voice="fable">
  <p><strong>Fable:</strong> Balanced and expressive</p>
</div>

---

React Integration

Using the widget in React applications.

Code

import { useEffect } from 'react';
import 'supernal-tts-widget/widget.css';

export function TTSContent() {
  useEffect(() => {
    import('supernal-tts-widget/widget.js')
      .then(({ SupernalTTS }) => {
        SupernalTTS.init({
          apiUrl: 'https://tts.supernal.ai'
        });
      });
  }, []);

  return (
    <div className="supernal-tts-widget"
         data-voice="fable"
         data-voices="fable,nova,onyx"
         data-enable-speed="true"
         data-enable-progress="true">
      <p>Your content here</p>
    </div>
  );
}

---

Custom Widget Generator

Configure all options and get copy-paste ready code.

Configuration

ProviderOpenAIeSpeak (Free)AzureCartesia

Available Voices

alloyechofableonyxnovashimmercoral

Select voices to show in the voice selector dropdown. At least one required.

Default VoicefablenovaonyxThe voice that will be selected by default

Enable Speed Control

Enable Progress Bar

Text Source

From element contentFrom data-text attribute

Sample TextWelcome to Supernal TTS! Try changing the settings to customize your widget.

Speed: 1.0x

API URL

API Key (optional)

Live Preview

Loading preview...

Generated Code

HTML

<!-- Add to your <head> -->
<link rel="stylesheet" href="https://unpkg.com/supernal-tts-widget/widget.css">
<script src="https://unpkg.com/supernal-tts-widget/widget.js"></script>

<!-- Add to your content -->
<div class="supernal-tts-widget"
     data-voices="fable,nova,onyx"
     data-enable-speed="true"
     data-enable-progress="true">
  <p>Your content here</p>
</div>

<script>
  SupernalTTS.init({
    apiUrl: 'https://tts.supernal.ai'
  });
</script>

React

import { useEffect, useRef } from 'react';
import 'supernal-tts-widget/widget.css';

export function TTSContent() {
  const widgetRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    import('supernal-tts-widget/widget.js').then(({ SupernalTTS }) => {
      SupernalTTS.init({
        apiUrl: 'https://tts.supernal.ai'
      });
    });
  }, []);

  return (
    <div ref={widgetRef}
         className="supernal-tts-widget"
         data-voices="fable,nova,onyx"
         data-enable-speed="true"
         data-enable-progress="true">
      <p>Your content here</p>
    </div>
  );
}

npm Package

// 1. Install the package
// npm install supernal-tts-widget

import { SupernalTTS } from 'supernal-tts-widget';
import 'supernal-tts-widget/widget.css';

// 2. Initialize
SupernalTTS.init({
  apiUrl: 'https://tts.supernal.ai',
});

// 3. The widget will automatically enhance elements with class "supernal-tts-widget"
// Or use programmatic API:
const element = document.querySelector('#my-content');
element.classList.add('supernal-tts-widget');
element.dataset.voices = 'fable,nova,onyx';
element.dataset.enableSpeed = 'true';
element.dataset.enableProgress = 'true';

---

Next Steps

• 📚 Read the Full Documentation
• 🎨 Customize the styling
• 🔑 Get an API Key