I Built a Text-to-Speech Tool in One Night — Here Is Exactly How (Full Code)

#webdev

How I Built a TTS Tool in One Night

Last weekend, I needed to generate voice overs for a quick demo. Instead of paying for an API, I realized something: my browser already had everything I needed.

The Web Speech API

The Web Speech API has been in browsers since 2014. It's free, offline-capable, and supports 100+ languages including Hindi, Tamil, Bengali, and Marathi.

The Code (Minimal Version)

<!DOCTYPE html>
<html>
<head>
    <title>Free TTS</title>
</head>
<body>
    <textarea id="text" rows="5" cols="50">Type here...</textarea>
    <select id="voice"></select>
    <button onclick="speak()">▶ Play</button>

    <script>
        function loadVoices() {
            const voices = speechSynthesis.getVoices();
            const select = document.getElementById('voice');
            voices.forEach(v => {
                const opt = document.createElement('option');
                opt.value = v.name;
                opt.textContent = v.name + ' (' + v.lang + ')';
                select.appendChild(opt);
            });
        }
        speechSynthesis.onvoiceschanged = loadVoices;

        function speak() {
            const msg = new SpeechSynthesisUtterance(
                document.getElementById('text').value
            );
            const selected = speechSynthesis.getVoices()
                .find(v => v.name === document.getElementById('voice').value);
            if (selected) msg.voice = selected;
            speechSynthesis.speak(msg);
        }
    </script>
</body>
</html>

What I Learned

Not all browsers support all voices. Chrome has the best Hindi support
Voice loading is async — use onvoiceschanged event
msg.rate = 0.9 sounds more natural than default 1.0
You can chain utterances for long scripts

Turning It Into a Product

I added:

Hindi + English support with one-click switching
Download as audio (using MediaRecorder API)
Premium credits for priority processing (₹49 lifetime deal)

Try It

I deployed it at voiceaisaas.fun — free to use, no signup required.

Who Is This For

Indie hackers prototyping voice features
YouTube creators needing quick voice overs
Teachers creating Hindi/English audio content
Developers who want to understand Speech Synthesis

The ₹49 Deal

500 credits for ₹49 one-time payment via UPI (yog-1496@ptaxis). No monthly fees. No hidden charges. Just free + optional upgrade for power users.

Get started → voiceaisaas.fun

DEV Community