<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Premium AI Voice Generator | Realistic Text to Speech</title>
<meta name="description" content="Generate high-fidelity, professional voiceovers using our premium AI voice generator. Choose from 20 natural, human-like voices for your SaaS or content needs.">
<meta name="robots" content="index, follow">
<meta property="og:title" content="Premium AI Voice Generator">
<meta property="og:description" content="Generate high-fidelity, professional voiceovers using our premium AI voice generator.">
<meta property="og:type" content="website">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "Premium AI Voice Generator",
"applicationCategory": "MultimediaApplication",
"operatingSystem": "WebBrowser",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "USD"
},
"description": "Professional Text-to-Speech application featuring 20 premium realistic voices.",
"featureList": "Realistic Voices, Pitch Control, Speed Control, Exaggeration Control"
}
</script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
/* CSS Reset & Scoping for WordPress Compatibility */
.saas-tts-wrapper {
/* SaaS Light Theme Variables */
--bg-main: #ffffff;
--bg-secondary: #f8fafc;
--bg-hover: #f1f5f9;
--text-primary: #0f172a;
--text-secondary: #475569;
--text-muted: #94a3b8;
--border-color: #e2e8f0;
--accent-color: #2563eb;
--accent-hover: #1d4ed8;
--accent-light: #eff6ff;
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--radius-md: 0.5rem;
--radius-lg: 0.75rem;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background-color: var(--bg-main);
color: var(--text-primary);
max-width: 1200px;
margin: 0 auto;
padding: 2rem 1rem;
box-sizing: border-box;
line-height: 1.5;
}
.saas-tts-wrapper * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Header */
.saas-tts-header {
text-align: center;
margin-bottom: 2.5rem;
}
.saas-tts-header h1 {
font-size: 2.25rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 0.5rem;
letter-spacing: -0.025em;
}
.saas-tts-header p {
font-size: 1.125rem;
color: var(--text-secondary);
}
/* Layout */
.saas-tts-container {
display: grid;
grid-template-columns: 350px 1fr;
gap: 2rem;
align-items: start;
}
@media (max-width: 900px) {
.saas-tts-container {
grid-template-columns: 1fr;
}
}
/* Left Panel - Controls */
.saas-panel {
background-color: var(--bg-main);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
padding: 1.5rem;
box-shadow: var(--shadow-sm);
}
.saas-form-group {
margin-bottom: 1.5rem;
}
.saas-label {
display: block;
font-size: 0.875rem;
font-weight: 600;
margin-bottom: 0.5rem;
color: var(--text-primary);
}
.saas-textarea {
width: 100%;
height: 150px;
padding: 0.75rem;
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
font-family: inherit;
font-size: 0.875rem;
color: var(--text-primary);
background-color: var(--bg-main);
resize: vertical;
transition: border-color 0.2s, box-shadow 0.2s;
}
.saas-textarea:focus {
outline: none;
border-color: var(--accent-color);
box-shadow: 0 0 0 3px var(--accent-light);
}
/* Sliders */
.saas-slider-group {
margin-bottom: 1.25rem;
}
.saas-slider-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
}
.saas-slider-value {
font-size: 0.75rem;
color: var(--text-secondary);
font-weight: 500;
}
.saas-slider {
-webkit-appearance: none;
width: 100%;
height: 6px;
background: var(--border-color);
border-radius: 3px;
outline: none;
}
.saas-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--accent-color);
cursor: pointer;
transition: transform 0.1s;
}
.saas-slider::-webkit-slider-thumb:hover {
transform: scale(1.2);
}
.saas-btn {
width: 100%;
padding: 0.875rem;
background-color: var(--accent-color);
color: #ffffff;
border: none;
border-radius: var(--radius-md);
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: background-color 0.2s;
}
.saas-btn:hover {
background-color: var(--accent-hover);
}
/* Right Panel - Voice Grid */
.saas-section-title {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 1rem;
color: var(--text-primary);
display: flex;
align-items: center;
justify-content: space-between;
}
.saas-voices-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 1rem;
max-height: 600px;
overflow-y: auto;
padding-right: 0.5rem;
}
/* Custom Scrollbar for Voice Grid */
.saas-voices-grid::-webkit-scrollbar {
width: 6px;
}
.saas-voices-grid::-webkit-scrollbar-track {
background: var(--bg-secondary);
border-radius: 4px;
}
.saas-voices-grid::-webkit-scrollbar-thumb {
background: var(--border-color);
border-radius: 4px;
}
.saas-voice-card {
background-color: var(--bg-main);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
padding: 1rem;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 1rem;
}
.saas-voice-card:hover {
border-color: var(--accent-color);
background-color: var(--bg-hover);
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
}
.saas-voice-card.active {
border-color: var(--accent-color);
background-color: var(--accent-light);
box-shadow: 0 0 0 1px var(--accent-color);
}
.saas-voice-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: var(--bg-secondary);
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
color: var(--accent-color);
font-size: 1.2rem;
flex-shrink: 0;
border: 1px solid var(--border-color);
}
.saas-voice-info {
flex-grow: 1;
min-width: 0;
}
.saas-voice-name {
font-size: 0.875rem;
font-weight: 600;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.saas-voice-tag {
font-size: 0.75rem;
color: var(--text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 0.125rem;
}
.saas-voice-gender {
display: inline-block;
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0.125rem 0.375rem;
border-radius: 1rem;
background-color: var(--bg-secondary);
color: var(--text-muted);
margin-top: 0.25rem;
}
</style>
</head>
<body>
<div class="saas-tts-wrapper" id="ai-voice-generator">
<header class="saas-tts-header">
<h1>Studio AI Voices</h1>
<p>Premium text-to-speech tailored for creators and SaaS.</p>
</header>
<main class="saas-tts-container">
<aside class="saas-panel">
<div class="saas-form-group">
<label class="saas-label" for="tts-text">Text Input</label>
<textarea id="tts-text" class="saas-textarea" placeholder="Enter your text here..."></textarea>
</div>
<div class="saas-form-group">
<label class="saas-label">Voice Settings</label>
<div class="saas-slider-group">
<div class="saas-slider-header">
<label class="saas-label" style="margin:0; font-size:0.75rem;">Exaggeration</label>
<span class="saas-slider-value" id="val-exag">50%</span>
</div>
<input type="range" id="exaggeration" class="saas-slider" min="0" max="100" value="50" oninput="document.getElementById('val-exag').innerText = this.value + '%'">
</div>
<div class="saas-slider-group">
<div class="saas-slider-header">
<label class="saas-label" style="margin:0; font-size:0.75rem;">Speed</label>
<span class="saas-slider-value" id="val-speed">1.0x</span>
</div>
<input type="range" id="speed" class="saas-slider" min="0.5" max="2" step="0.1" value="1.0" oninput="document.getElementById('val-speed').innerText = this.value + 'x'">
</div>
<div class="saas-slider-group">
<div class="saas-slider-header">
<label class="saas-label" style="margin:0; font-size:0.75rem;">Pitch</label>
<span class="saas-slider-value" id="val-pitch">0</span>
</div>
<input type="range" id="pitch" class="saas-slider" min="-10" max="10" step="1" value="0" oninput="document.getElementById('val-pitch').innerText = this.value">
</div>
</div>
<button class="saas-btn" id="generate-btn">Generate Audio</button>
</aside>
<section class="saas-panel" style="padding: 1.5rem 1rem 1.5rem 1.5rem;">
<div class="saas-section-title">
<span>Select a Voice</span>
<span style="font-size: 0.875rem; font-weight: 400; color: var(--text-secondary);" id="selected-voice-label">Mark</span>
</div>
<div class="saas-voices-grid" id="voices-grid">
</div>
</section>
</main>
</div>
<script>
// Premium Voice Database
const premiumVoices = [
// Male Voices
{ name: "Callum", tag: "Husky Trickster", gender: "Male" },
{ name: "Mark", tag: "Natural Conversation", gender: "Male" },
{ name: "Spoods Oxley", tag: "Wise A...", gender: "Male" },
{ name: "Atom", tag: "American Dark...", gender: "Male" },
{ name: "James", tag: "Husky Engaging", gender: "Male" },
{ name: "John Doe", tag: "Deep", gender: "Male" },
{ name: "Michael C Vincent", tag: "Confident", gender: "Male" },
{ name: "Adam Stone", tag: "Smooth Deep", gender: "Male" },
{ name: "Christopher", tag: "Gentle T...", gender: "Male" },
{ name: "Alex", tag: "Upbeat Energetic A...", gender: "Male" },
// Female Voices
{ name: "Alice", tag: "Warm Natural", gender: "Female" },
{ name: "Vanessa", tag: "Peach Girl", gender: "Female" },
{ name: "Jessica", tag: "Pocket AV...", gender: "Female" },
{ name: "Lauren", tag: "Friendly Comfort", gender: "Female" },
{ name: "Bella", tag: "Professional Bright V...", gender: "Female" },
{ name: "AR Major", tag: "Reassuring Confident CO...", gender: "Female" },
{ name: "L2HD", tag: "Quality AWLTIT 3", gender: "Female" },
{ name: "River", tag: "Relaxed Natural Form", gender: "Female" },
{ name: "Escar", tag: "Click Craft Form", gender: "Female" },
{ name: "Alice (Educator)", tag: "Clear Engaging Educator", gender: "Female" }
];
let currentVoice = "Mark";
const gridContainer = document.getElementById('voices-grid');
const labelSelected = document.getElementById('selected-voice-label');
// Initialize Voice Cards
function renderVoices() {
gridContainer.innerHTML = '';
premiumVoices.forEach((voice, index) => {
const card = document.createElement('div');
card.className = `saas-voice-card ${voice.name === currentVoice ? 'active' : ''}`;
card.dataset.name = voice.name;
// Get first letter for avatar
const initial = voice.name.charAt(0);
card.innerHTML = `
<div class="saas-voice-avatar">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polygon points="5 3 19 12 5 21 5 3"></polygon>
</svg>
</div>
<div class="saas-voice-info">
<div class="saas-voice-name">${voice.name}</div>
<div class="saas-voice-tag">${voice.tag}</div>
<div class="saas-voice-gender">${voice.gender}</div>
</div>
`;
card.addEventListener('click', () => selectVoice(voice.name));
gridContainer.appendChild(card);
});
}
// Handle Voice Selection & Audio Preview
function selectVoice(voiceName) {
currentVoice = voiceName;
labelSelected.innerText = voiceName;
// Update UI
document.querySelectorAll('.saas-voice-card').forEach(card => {
if(card.dataset.name === voiceName) {
card.classList.add('active');
} else {
card.classList.remove('active');
}
});
// Trigger Auto-Play Preview
playPreviewAudio(voiceName);
}
// Web Speech API for Browser-based Preview
function playPreviewAudio(voiceName) {
// Stop any currently playing audio
window.speechSynthesis.cancel();
const previewText = `Hi, my name is ${voiceName.replace(' (Educator)', '')}, and I can help you create professional voiceovers.`;
const utterance = new SpeechSynthesisUtterance(previewText);
// Map UI sliders to native SpeechSynthesis properties
const speedVal = parseFloat(document.getElementById('speed').value);
// Map -10 to 10 pitch slider to Web Speech API 0 to 2 pitch range (1 is default)
const pitchSlider = parseFloat(document.getElementById('pitch').value);
const pitchVal = 1 + (pitchSlider / 10);
utterance.rate = speedVal;
utterance.pitch = pitchVal;
// Note: 'Exaggeration' isn't natively supported by basic Web Speech API,
// it serves as a UI placeholder for standard SaaS backend integrations.
window.speechSynthesis.speak(utterance);
}
// Generate Button Listener (Placeholder for your backend logic)
document.getElementById('generate-btn').addEventListener('click', () => {
const text = document.getElementById('tts-text').value;
if (!text) {
alert("Please enter some text to generate audio.");
return;
}
// Example execution using the preview engine for the demo
window.speechSynthesis.cancel();
const utterance = new SpeechSynthesisUtterance(text);
utterance.rate = parseFloat(document.getElementById('speed').value);
utterance.pitch = 1 + (parseFloat(document.getElementById('pitch').value) / 10);
window.speechSynthesis.speak(utterance);
});
// Initial render
renderVoices();
</script>
</body>
</html>