How to Build a Text-to-Speech Tool Without Coding | Full Prompt Reveal

Are you looking for a way to monetize AI tools on your website? In this guide, I’ll show you how I built a Text-to-Speech (TTS) and Speech-to-Text (STT) tool that generated $74 in less than 24 hours using, Adsterra admob, and Google AdSense. I’ll also share the exact prompt and steps to create this tool, integrate it into your website, and monetize it effectively.

Why Build a Text-to-Speech and Speech-to-Text Tool?

Text-to-Speech and Speech-to-Text tools are in high demand. Many people use them for:

Writing blog posts or speeches without typing.

Converting audio content into text for editing or transcription.
Learning new languages or improving pronunciation.

By offering these tools for free on your website, you can attract a lot of traffic and monetize it through ads or premium features.

How I Built the Tool

Step 1: Create a Custom Domain

To make your tool look professional and rank higher on Google, start by getting a custom domain. If you already have a blog or website, you can integrate the tool into a new page on your blog. Alternatively, you can make use of our ongoing discount price and get your website blog fully developed and monetized too.

Step 2: Generate the Tool Using AI

I used Grok.com AI and DeepSeek.com to generate the code for the TTS and STT tool. Here’s how you can do it:

Visit Grok AI or DeepSeek.

Use the following prompt to generate the code:
“Create a Text-to-Speech and Speech-to-Text tool with HTML, CSS, and JavaScript. Include features like language selection, voice modulation, and a download option for audio files.” ( to get the full prompt click on our Patreon here to copy and customize the full prompt

The code:

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>TTS & STT Enhanced Application</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}

body {
background: linear-gradient(135deg, #6b48ff, #ffffff);
min-height: 100vh;
padding: 20px;
color: #333;
}

.container {
max-width: 900px;
margin: 0 auto;
background: rgba(255, 255, 255, 0.95);
border-radius: 15px;
padding: 30px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

header {
text-align: center;
margin-bottom: 30px;
}

h1 {
color: #6b48ff;
margin-bottom: 10px;
}

h2 {
color: #6b48ff;
margin-bottom: 15px;
}

.section {
margin-bottom: 30px;
}

textarea {
width: 100%;
height: 100px;
padding: 10px;
border-radius: 8px;
border: 1px solid #ddd;
resize: vertical;
}

select, button {
padding: 8px 15px;
margin: 5px;
border-radius: 5px;
border: none;
background: #6b48ff;
color: white;
cursor: pointer;
}

button:hover {
background: #5438cc;
}

.controls {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 10px;
}

.slider-container {
margin: 10px 0;
}

input[type=”range”] {
width: 100%;
}

.output {
margin-top: 20px;
padding: 15px;
background: #f5f5f5;
border-radius: 8px;
position: relative;
}

.history {
max-height: 200px;
overflow-y: auto;
margin-top: 20px;
padding: 10px;
background: #f0f0f0;
border-radius: 8px;
}

.learn-more {
background: #fff;
padding: 20px;
border-radius: 10px;
margin-top: 30px;
}

.learn-more details {
margin: 10px 0;
}

.learn-more summary {
cursor: pointer;
color: #6b48ff;
margin-bottom: 5px;
}

@media (max-width: 600px) {
.container {
padding: 20px;
}
.controls {
flex-direction: column;
}
}
</style>
</head>
<body>
<div class=”container”>
<header>
<h1>TTS & STT Application</h1>
</header>

<!– TTS Section –>
<div class=”section”>
<h2>Text-to-Speech</h2>
<textarea id=”ttsInput” placeholder=”Enter text to speak…”></textarea>
<div class=”controls”>
<select id=”ttsLanguage”></select>
<select id=”ttsVoice”></select>
<select id=”emotion”>
<option value=”neutral”>Neutral</option>
<option value=”happy”>Happy</option>
<option value=”sad”>Sad</option>
<option value=”angry”>Angry</option>
</select>
<select id=”translateTo”>
<option value=””>No Translation</option>
<option value=”es”>Spanish</option>
<option value=”fr”>French</option>
<option value=”de”>German</option>
</select>
<button onclick=”speak()”>Play</button>
<button onclick=”pause()”>Pause</button>
<button onclick=”resume()”>Resume</button>
<button onclick=”stop()”>Stop</button>
<button onclick=”downloadTTS()”>Download</button>
<button onclick=”clearTTS()”>Clear</button>
</div>
<div class=”slider-container”>
<label>Rate: <span id=”rateValue”>1</span></label>
<input type=”range” id=”rate” min=”0.5″ max=”2″ step=”0.1″ value=”1″>
</div>
<div class=”slider-container”>
<label>Pitch: <span id=”pitchValue”>1</span></label>
<input type=”range” id=”pitch” min=”0.5″ max=”2″ step=”0.1″ value=”1″>
</div>
<div class=”history” id=”ttsHistory”></div>
</div>

<!– STT Section –>
<div class=”section”>
<h2>Speech-to-Text</h2>
<div class=”controls”>
<select id=”sttLanguage”>
<option value=”en-US”>English</option>
<option value=”es-ES”>Spanish</option>
<option value=”fr-FR”>French</option>
<option value=”de-DE”>German</option>
</select>
<button id=”recordBtn”>Start Recording</button>
<button onclick=”copySTT()”>Copy</button>
<button onclick=”clearSTT()”>Clear</button>
</div>
<div class=”output” id=”sttOutput”></div>
<div class=”output” id=”translatedOutput”></div>
<div class=”history” id=”sttHistory”></div>
</div>

<!– Learn More Section –>
<div class=”learn-more”>
<h2>Learn More</h2>
<details>
<summary>What is Text-to-Speech (TTS)?</summary>
<p>Text-to-Speech (TTS) is a technology that converts written text into spoken words. It uses synthetic voices to read text aloud, making it useful for accessibility, language learning, and entertainment.</p>
</details>
<details>
<summary>What is Speech-to-Text (STT)?</summary>
<p>Speech-to-Text (STT) converts spoken words into written text. It uses speech recognition technology to transcribe what you say, perfect for dictation, note-taking, or real-time translation.</p>
</details>
<details>
<summary>How to Use TTS</summary>
<p>1. Type your text in the TTS input box.<br>
2. Select a language and voice from the dropdowns.<br>
3. Choose an emotion and translation option if desired.<br>
4. Adjust rate and pitch using the sliders.<br>
5. Click “Play” to hear it, or “Download” to save the audio.<br>
6. Use “Pause,” “Resume,” or “Stop” to control playback.</p>
</details>
<details>
<summary>How to Use STT</summary>
<p>1. Select your spoken language from the dropdown.<br>
2. Click “Start Recording” and speak clearly.<br>
3. Click “Stop Recording” when done.<br>
4. View the transcription and optional translation.<br>
5. Click “Copy” to copy the text to your clipboard.<br>
6. Use “Clear” to reset the output.</p>
</details>
<details>
<summary>Additional Features</summary>
<p>- <strong>Emotion Modulation:</strong> Add emotions to TTS output.<br>
– <strong>Translation:</strong> Translate text or speech in real-time.<br>
– <strong>History:</strong> View past TTS and STT entries.<br>
– <strong>Download:</strong> Save TTS output as an audio file.<br>
– <strong>Copy:</strong> Easily copy STT results.</p>
</details>
</div>
</div>

<script>
// TTS Setup
const synth = window.speechSynthesis;
let voices = [];
const ttsInput = document.getElementById(‘ttsInput’);
const ttsLanguage = document.getElementById(‘ttsLanguage’);
const ttsVoice = document.getElementById(‘ttsVoice’);
const emotion = document.getElementById(’emotion’);
const translateTo = document.getElementById(‘translateTo’);
const rate = document.getElementById(‘rate’);
const pitch = document.getElementById(‘pitch’);
const rateValue = document.getElementById(‘rateValue’);
const pitchValue = document.getElementById(‘pitchValue’);
const ttsHistory = document.getElementById(‘ttsHistory’);

// STT Setup
const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
const sttLanguage = document.getElementById(‘sttLanguage’);
const recordBtn = document.getElementById(‘recordBtn’);
const sttOutput = document.getElementById(‘sttOutput’);
const translatedOutput = document.getElementById(‘translatedOutput’);
const sttHistory = document.getElementById(‘sttHistory’);

// Populate voices
function populateVoices() {
voices = synth.getVoices();
ttsLanguage.innerHTML = ”;
ttsVoice.innerHTML = ”;

const languages = […new Set(voices.map(voice => voice.lang))];
languages.forEach(lang => {
const option = document.createElement(‘option’);
option.value = lang;
option.text = lang;
ttsLanguage.appendChild(option);
});

updateVoices();
}

function updateVoices() {
ttsVoice.innerHTML = ”;
voices.filter(voice => voice.lang === ttsLanguage.value)
.forEach(voice => {
const option = document.createElement(‘option’);
option.value = voice.name;
option.text = voice.name;
ttsVoice.appendChild(option);
});
}

synth.onvoiceschanged = populateVoices;
ttsLanguage.onchange = updateVoices;

// Slider updates
rate.oninput = () => rateValue.textContent = rate.value;
pitch.oninput = () => pitchValue.textContent = pitch.value;

// Emotion adjustments
function getEmotionAdjustments(emotion) {
switch(emotion) {
case ‘happy’: return { rate: 1.2, pitch: 1.2 };
case ‘sad’: return { rate: 0.8, pitch: 0.8 };
case ‘angry’: return { rate: 1.1, pitch: 0.9 };
default: return { rate: 1, pitch: 1 };
}
}

// Translation (mock API call)
async function translateText(text, targetLang) {
if (!targetLang) return text;
return text + ` (Translated to ${targetLang})`; // Replace with real API
}

// TTS Functions
let currentUtterance = null;
async function speak() {
const text = ttsInput.value;
const targetLang = translateTo.value;
const emotionAdj = getEmotionAdjustments(emotion.value);

const translatedText = await translateText(text, targetLang);
currentUtterance = new SpeechSynthesisUtterance(translatedText);

const selectedVoice = voices.find(voice => voice.name === ttsVoice.value);
currentUtterance.voice = selectedVoice;
currentUtterance.rate = parseFloat(rate.value) * emotionAdj.rate;
currentUtterance.pitch = parseFloat(pitch.value) * emotionAdj.pitch;

synth.speak(currentUtterance);
addToHistory(ttsHistory, `TTS: ${translatedText}`);
}

function pause() { synth.pause(); }
function resume() { synth.resume(); }
function stop() { synth.cancel(); }

function downloadTTS() {
if (!currentUtterance) {
alert(‘Please generate speech first!’);
return;
}
// Note: Browser TTS doesn’t directly support audio file generation
// This is a placeholder – real implementation requires a TTS API
alert(‘Download feature requires server-side TTS API integration.’);
// Example with Blob would go here with real audio data
}

function clearTTS() {
ttsInput.value = ”;
stop();
}

// STT Setup
recognition.continuous = true;
recognition.interimResults = true;

let isRecording = false;
recordBtn.onclick = () => {
if (!isRecording) {
recognition.lang = sttLanguage.value;
recognition.start();
recordBtn.textContent = ‘Stop Recording’;
} else {
recognition.stop();
recordBtn.textContent = ‘Start Recording’;
}
isRecording = !isRecording;
};

recognition.onresult = async (event) => {
let transcript = ”;
for (let i = event.resultIndex; i < event.results.length; i++) {
transcript += event.results[i][0].transcript;
}
sttOutput.textContent = transcript;

const targetLang = translateTo.value;
if (targetLang) {
const translated = await translateText(transcript, targetLang);
translatedOutput.textContent = `Translated: ${translated}`;
addToHistory(sttHistory, `STT: ${transcript} -> ${translated}`);
} else {
addToHistory(sttHistory, `STT: ${transcript}`);
}
};

recognition.onerror = (event) => {
sttOutput.textContent = ‘Error: ‘ + event.error;
};

function copySTT() {
const text = sttOutput.textContent;
navigator.clipboard.writeText(text).then(() => {
alert(‘Text copied to clipboard!’);
});
}

function clearSTT() {
sttOutput.textContent = ”;
translatedOutput.textContent = ”;
if (isRecording) recognition.stop();
isRecording = false;
recordBtn.textContent = ‘Start Recording’;
}

// History Management
function addToHistory(element, text) {
const entry = document.createElement(‘p’);
entry.textContent = `${new Date().toLocaleTimeString()} – ${text}`;
element.insertBefore(entry, element.firstChild);
}

// Initial population of voices
populateVoices();
</script>
</body>
</html>

Copy the generated code and paste it into your website’s HTML editor.

Step 3: Add the Tool to Your Website

Create a new page for your tool (e.g., “Text-to-Speech Tool”).
Paste the generated code into the page using the Custom HTML block.
Publish the page and preview it to ensure everything works correctly.

Features of the Tool

Here’s what the tool can do:

Text-to-Speech:
- Convert any text into speech.
- Choose from multiple languages and voices.
- Adjust speech rate, pitch, and volume.
- Download the audio file for offline use.

Speech-to-Text:
- Transcribe spoken words into text.
- Start and stop recording with a single click.
- Copy the transcribed text to your clipboard.
Dark Mode:
- Switch between light and dark themes for better user experience.

How to Monetize the Tool

1. Adsterra, Google AdSense & Admob

Integrate Adsterra, monetag and Google AdSense ads into your website to display ads on the tool’s page. Here’s how:

Log in to your adsterra, AdSense account and get the ad code.
Install the Insert Headers and Footers plugin on your website.

Paste the ad code into the header or footer section of your tool’s page.

2. Affiliate Marketing

Promote AI tools, hosting services, or domain providers through affiliate links. For example:

Recommend Grok AI or DeepSeek and earn a commission for every sign-up.

3. Premium Features

Offer advanced features (e.g., unlimited text conversion, additional voices) for a subscription fee.

Why This Tool Works

High Demand: Many people search for free TTS and STT tools online.
Low Competition: Few websites offer these tools for free.

Monetization Potential: Ads and affiliate links generate consistent revenue.

Step-by-Step Video Tutorial

If you prefer a visual guide, watch the video below:

Frequently Asked Questions (FAQs)

1. Can I use this tool offline?

No, the tool requires an internet connection to function.

2. What languages are supported?

The tool supports multiple languages, including English, Spanish, and French.

3. Is my data saved?

No, all processing happens in real-time, and no data is stored on the server.

Get Started Today

Ready to build your own Text-to-Speech and Speech-to-Text tool? Follow these steps:

Get a custom domain and hosting or use your existing website. If you don’t have a website blog, join us on Telegram and whatsapp and dm so my team can build and monetize your website instantly.
Generate the tool using Grok AI or DeepSeek.
Integrate the tool into your website and monetize it with ads.

If you need help, join our Telegram or WhatsApp channel for support. Don’t forget to like, subscribe, and turn on notifications on these channels for more tutorials like this!

Call-to-Action

Like this post if you found it helpful.
Subscribe to our channel for more AI and monetization tips.

Join our Telegram/WhatsApp group to stay updated.
Pin the post on our Patreon to get the exact prompt used to create this tool.

By following this guide, you can create a high-demand tool, attract tons of traffic, and start earning passive income. Let me know in the comments if you have any questions!

ALSO READ: Get international phone number free For CALL, SMS, MMS

DROP A REVIEW AND WIN A PRIZE TODAY:

Justina Sunday

February 6, 2025

I had zero experience with digital marketing, but PaddedVibez turned my small blog into a revenue-generating platform. Their strategy is hands-on, effective, and tailored to my needs. I couldn’t be happier with the results!

Mohamed