Free Text-to-Speech WordPress and blogger tools

Dhanjee Rider

Are you looking for a simple way to convert your blog posts into audio format with a natural Hindi voice? Presenting the Free Hindi Text-to-Speech Tool for WordPress & Blogger – designed especially for creators and readers who love listening instead of reading.

Free Text-to-Speech WordPress & Blogger Tool

This tool automatically picks up your post content (.entry-content or Blogger post-body), calculates the reading time, and reads the full article in a sweet and fresh Hindi voice. It also comes with modern neumorphism design, making the audio player stylish, lightweight, and mobile responsive.

Best part? 👉 It’s 100% free and works out of the box on both WordPress and Blogger.

Key Features

✔ Natural Hindi Voice – Soft, clear, and pleasant to hear.
✔ Auto Reading Time – Calculates duration of article reading automatically.
✔ Replay Button – Listen again with just one click.
✔ Adjustable Speed – Choose between fixed speed options.
✔ Exclude Elements (Blogger Only) – Skip unwanted sections using class or ID.
✔ Neumorphism UI – Fresh and modern design with smooth buttons.
✔ Responsive Design – Works on all devices (PC, Tablet, Mobile).
✔ No API Needed – Uses browser’s Speech Synthesis API.
✔ Lightweight – No heavy scripts, super-fast performance.

Why Use a Hindi Text-to-Speech Tool?

Accessibility: Helps visually impaired users enjoy your content.
Better Engagement: Readers can listen while multitasking.
Boost SEO & Traffic: Improves user experience and dwell time.
Modern Touch: Adds a unique feature to your site.

How It Works

WordPress: Install and activate the plugin. It automatically detects text from the .entry-content class and adds a neumorphic audio player under posts.
Blogger: Copy the HTML/JS code layout snippet, paste it in first add before post HTML/JavaScript widget, and then the player will show above your posts. You can also exclude elements by adding their class or ID. Look at the js code
Readers can Play, Pause, Replay, or Change Speed easily.

That’s it! No coding knowledge required.

Demo Screenshot

(Here you can add your plugin or tool screenshot with the neumorphism audio player)

plugin demo

Blogger tool demo

How to use in blogger

Add copy and paste this whole code in first post add widget in your blogger layout options if your thene doesn't have first post ad widget option on your theme then paste it below the 🥀 👉 <data:post.body> tag it will also work and show this tool before post Content or you can chnege your theme if you need 🙂

 <style>
.audio-player-container {
    position: relative;
    bottom: 0;
    left: 0;
    right: 0;
    background: #e0e5ec;
    padding: 2px 15px 15px;
    
    border-radius: 25px 25px 0 0;
    z-index: 1000;
}

.audio-controls {
    display: flex;
    align-items: center;
    gap: 15px;
    max-width: 100%;
    overflow-x: auto;
    padding: 10px 0;
}

/* Control Buttons */
.control-btn {
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    background: #e0e5ec;
    color: #5a5a5a;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: all 0.3s ease;
    box-shadow: 
        4px 4px 15px rgba(163, 177, 198, 0.6),
        -4px -4px 15px rgba(255, 255, 255, 0.9);
    flex-shrink: 0;
}

.control-btn:hover {
    transform: translateY(-2px);
    box-shadow: 
        10px 10px 20px rgba(163, 177, 198, 0.7),
        -10px -10px 20px rgba(255, 255, 255, 0.9);
}

.control-btn:active {
    transform: translateY(0);
    box-shadow: 
        inset 4px 4px 8px rgba(163, 177, 198, 0.6),
        inset -4px -4px 8px rgba(255, 255, 255, 0.9);
}

.play-btn.playing {
    color: #4CAF50;
    box-shadow: 
        inset 4px 4px 8px rgba(163, 177, 198, 0.6),
        inset -4px -4px 8px rgba(255, 255, 255, 0.9);
}

.repeat-btn.active {
    color: #FF9800;
    box-shadow: 
        inset 4px 4px 8px rgba(163, 177, 198, 0.6),
        inset -4px -4px 8px rgba(255, 255, 255, 0.9);
}

/* Progress Container */
.progress-container {
    flex: 1;
    min-width: 150px;
}

.progress-bar {
    position: relative;
    height: 8px;
    background: #e0e5ec;
    border-radius: 4px;
    margin-bottom: 8px;
    box-shadow: 
        inset 2px 2px 4px rgba(163, 177, 198, 0.6),
        inset -2px -2px 4px rgba(255, 255, 255, 0.9);
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #4CAF50, #45a049);
    border-radius: 4px;
    width: 0%;
    transition: width 0.1s ease;
}

.progress-handle {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background: #e0e5ec;
    border-radius: 50%;
    cursor: pointer;
    left: 0%;
    box-shadow: 
        2px 2px 4px rgba(163, 177, 198, 0.6),
        -2px -2px 4px rgba(255, 255, 255, 0.9);
    transition: left 0.1s ease;
}

.progress-handle:hover {
    transform: translateY(-50%) scale(1.2);
}

.time-display {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #8a8a8a;
}

/* Speed Selector */
.speed-selector {
    position: relative;
}

.speed-select {
    background: #e0e5ec;
    border: none;
    border-radius: 20px;
    padding: 8px 12px;
    color: #5a5a5a;
    cursor: pointer;
    font-size: 14px;
    box-shadow: 
        inset 2px 2px 4px rgba(163, 177, 198, 0.6),
        inset -2px -2px 4px rgba(255, 255, 255, 0.9);
    outline: none;
    min-width: 70px;
}

.speed-select:focus {
    box-shadow: 
        inset 4px 4px 8px rgba(163, 177, 198, 0.7),
        inset -4px -4px 8px rgba(255, 255, 255, 0.9);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .audio-controls {
        gap: 10px;
        padding: 8px 0;
    }
    
    .control-btn {
        width: 45px;
        height: 45px;
        font-size: 16px;
    }
    
    .progress-container {
        min-width: 120px;
    }
    
    .speed-select {
        font-size: 12px;
        padding: 6px 10px;
        min-width: 60px;
    }
}

@media (max-width: 480px) {
    .audio-player-container {
        padding: 2px 10px 10px;
    }
    
    .audio-controls {
        gap: 8px;
    }
    
    .control-btn {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }
}
</style>

    <!-- Fixed Audio Player -->
    <div id="audio-player" class="audio-player-container">
        <div class="audio-controls">
            <button id="playBtn" class="control-btn play-btn">
                <i class="fas fa-play"></i>
            </button>
            
            <button id="repeatBtn" class="control-btn repeat-btn">
                <i class="fas fa-redo"></i>
            </button>
       <!--made by dktechnozone.in-->    
            <div class="progress-container">
                <div class="progress-bar">
                    <div id="progressFill" class="progress-fill"></div>
                    <div id="progressHandle" class="progress-handle"></div>
                </div>
                <div class="time-display">
                    <span id="currentTime">0:00</span>
                    <span id="totalTime">0:00</span>
                </div>
            </div>
            
            <div class="speed-selector">
                <select id="speedSelect" class="speed-select">
                    <option value="0.5" />0.5x
                    <option value="0.75" />0.75x
                    <option value="1" selected />1x
                    <option value="1.25" />1.25x
                    <option value="1.5" />1.5x
                    <option value="2" />2x
                </select>
            </div>
        </div>
    </div>

    <script>

class TextToSpeechPlayer {
    constructor() {
        this.synthesis = window.speechSynthesis;
        this.utterance = null;
        this.isPlaying = false;
        this.isRepeating = false;
        this.currentPosition = 0;
        this.totalDuration = 0;
        this.text = '';
        this.voice = null;
        this.speed = 1;

        this.initializeElements();
        this.setupEventListeners();
        this.extractTextAndCalculateDuration();
        this.loadVoices();
    }

    initializeElements() {
        this.playBtn = document.getElementById('playBtn');
        this.repeatBtn = document.getElementById('repeatBtn');
        this.progressFill = document.getElementById('progressFill');
        this.progressHandle = document.getElementById('progressHandle');
        this.progressBar = document.querySelector('.progress-bar');
        this.currentTimeEl = document.getElementById('currentTime');
        this.totalTimeEl = document.getElementById('totalTime');
        this.speedSelect = document.getElementById('speedSelect');
    }

    setupEventListeners() {
        this.playBtn.addEventListener('click', () => this.togglePlay());
        this.repeatBtn.addEventListener('click', () => this.toggleRepeat());
        this.speedSelect.addEventListener('change', () => this.changeSpeed());
        this.progressBar.addEventListener('click', (e) => this.seekTo(e));
        this.progressHandle.addEventListener('mousedown', (e) => this.startDrag(e));
        this.progressHandle.addEventListener('touchstart', (e) => this.startDrag(e));
    }

    extractTextAndCalculateDuration() {
        const postBody = document.getElementById('post-body');
        if (postBody) {
            // Clone postBody to avoid altering the original DOM
            const clone = postBody.cloneNode(true);

            // Classes and IDs to exclude
            const toExcludeSelectors = ['.widget-content', '.related-posts', '#toc-post'];

            // Remove excluded elements from the clone
            toExcludeSelectors.forEach(selector => {
                clone.querySelectorAll(selector).forEach(el => el.remove());
            });

            // Extract and clean text (remove emojis and extra spaces)
            this.text = clone.innerText
                .replace(/[\u{1F600}-\u{1F64F}]|[\u{1F300}-\u{1F5FF}]|[\u{1F680}-\u{1F6FF}]|[\u{1F1E0}-\u{1F1FF}]|[\u{2600}-\u{26FF}]|[\u{2700}-\u{27BF}]/gu, '')
                .replace(/\s+/g, ' ')
                .trim();

            const wordCount = this.text.split(' ').length;
            if (wordCount <= 40) {
                this.totalDuration = 15;
            } else {
                this.totalDuration = (wordCount / 150) * 60;
            }

            this.updateTotalTime();
            this.resetProgress();
        }
    }

    loadVoices() {
        let voices = this.synthesis.getVoices();
        if (voices.length !== 0) {
            this.voice = this.getHindiVoice(voices);
        } else {
            this.synthesis.onvoiceschanged = () => {
                voices = this.synthesis.getVoices();
                this.voice = this.getHindiVoice(voices);
            };
        }
    }

    getHindiVoice(voices) {
        return voices.find(v => v.lang.toLowerCase().startsWith('hi-in'))
            || voices.find(v => v.lang.toLowerCase().startsWith('hi'))
            || null;
    }

    togglePlay() {
        if (this.isPlaying) {
            this.pause();
        } else {
            this.play();
        }
    }

    play() {
        if (!this.text) return;

        this.synthesis.cancel();

        this.utterance = new SpeechSynthesisUtterance(this.text);
        this.utterance.lang = "hi-IN";
        this.utterance.rate = parseFloat(this.speedSelect.value);
        this.utterance.pitch = 1;
        this.utterance.volume = 1;
        if (this.voice) this.utterance.voice = this.voice;

        this.utterance.onstart = () => {
            this.isPlaying = true;
            this.playBtn.innerHTML = '<i class="fas fa-pause"></i>';
            this.playBtn.classList.add('playing');

            this.speed = parseFloat(this.speedSelect.value);
            this.lastUpdateTime = performance.now();
            this.startProgressUpdate();
        };

        this.utterance.onend = () => {
            this.isPlaying = false;
            this.playBtn.innerHTML = '<i class="fas fa-play"></i>';
            this.playBtn.classList.remove('playing');
            this.stopProgressUpdate();

            if (this.isRepeating) {
                setTimeout(() => this.play(), 300);
            } else {
                this.resetProgress();
            }
        };

        this.synthesis.speak(this.utterance);
    }

    pause() {
        this.synthesis.cancel();
        this.isPlaying = false;
        this.playBtn.innerHTML = '<i class="fas fa-play"></i>';
        this.playBtn.classList.remove('playing');
        this.stopProgressUpdate();
    }

    toggleRepeat() {
        this.isRepeating = !this.isRepeating;
        this.repeatBtn.classList.toggle('active', this.isRepeating);
    }

    changeSpeed() {
        this.speed = parseFloat(this.speedSelect.value);
        if (this.isPlaying) {
            this.pause();
            setTimeout(() => this.play(), 100);
        }
    }

    startProgressUpdate() {
        this.stopProgressUpdate();
        this.lastUpdateTime = performance.now();

        this.progressInterval = setInterval(() => {
            if (!this.isPlaying) return;

            const now = performance.now();
            const elapsedRealTime = (now - this.lastUpdateTime) / 1000;
            this.lastUpdateTime = now;

            this.currentPosition += elapsedRealTime * this.speed;

            if (this.currentPosition >= this.totalDuration) {
                this.currentPosition = this.totalDuration;
                this.updateProgress(100);
                this.updateCurrentTime();
                this.pause();

                if (this.isRepeating) {
                    setTimeout(() => this.play(), 300);
                } else {
                    this.resetProgress();
                }
                return;
            }

            const percentProgress = (this.currentPosition / this.totalDuration) * 100;
            this.updateProgress(percentProgress);
            this.updateCurrentTime();

        }, 100);
    }

    stopProgressUpdate() {
        if (this.progressInterval) {
            clearInterval(this.progressInterval);
            this.progressInterval = null;
        }
    }

    updateProgress(percent) {
        this.progressFill.style.width = percent + '%';
        this.progressHandle.style.left = percent + '%';
    }

    updateCurrentTime() {
        this.currentTimeEl.textContent = this.formatTime(this.currentPosition);
    }

    updateTotalTime() {
        this.totalTimeEl.textContent = this.formatTime(this.totalDuration);
    }

    formatTime(seconds) {
        const mins = Math.floor(seconds / 60);
        const secs = Math.floor(seconds % 60);
        return `${mins}:${secs.toString().padStart(2, '0')}`;
    }

    seekTo(e) {
        const rect = this.progressBar.getBoundingClientRect();
        const clickX = e.clientX - rect.left;
        const percent = (clickX / rect.width) * 100;

        this.currentPosition = (percent / 100) * this.totalDuration;
        this.updateProgress(percent);
        this.updateCurrentTime();

        if (this.isPlaying) {
            this.pause();
            setTimeout(() => this.play(), 100);
        }
    }

    startDrag(e) {
        e.preventDefault();
        const moveHandler = (e) => {
            const rect = this.progressBar.getBoundingClientRect();
            const x = (e.clientX || e.touches[0].clientX) - rect.left;
            const percent = Math.min(100, Math.max(0, (x / rect.width) * 100));

            this.currentPosition = (percent / 100) * this.totalDuration;
            this.updateProgress(percent);
            this.updateCurrentTime();
        };

        const stopHandler = () => {
            document.removeEventListener('mousemove', moveHandler);
            document.removeEventListener('mouseup', stopHandler);
            document.removeEventListener('touchmove', moveHandler);
            document.removeEventListener('touchend', stopHandler);

            if (this.isPlaying) {
                this.pause();
                setTimeout(() => this.play(), 100);
            }
        };

        document.addEventListener('mousemove', moveHandler);
        document.addEventListener('mouseup', stopHandler);
        document.addEventListener('touchmove', moveHandler);
        document.addEventListener('touchend', stopHandler);
    }

    resetProgress() {
        this.currentPosition = 0;
        this.updateProgress(0);
        this.updateCurrentTime();
    }
}

document.addEventListener('DOMContentLoaded', () => {
    new TextToSpeechPlayer();
});

</script>

Who Should Use This Tool?

WordPress bloggers who write in Hindi and want to add audio options.
Blogger users who want a free, lightweight TTS solution with exclusions.
Educational websites where students prefer listening.
News & article sites for better accessibility.
Personal blogs to improve engagement.

Download wp plugin

Final Words

This Free Hindi Text-to-Speech Tool is a must-have for both WordPress and Blogger websites targeting Hindi readers. With natural voice, replay feature, speed control, and element exclusion – it not only enhances accessibility but also makes your site stand out.

Last word

In this post we will provided information about Free Text-to-Speech WordPress and blogger tools, If you enjoy this post, kindly share it with your friends. For any queries, feel free to join our Telegram channel, where we share exclusive and informative content. Many valuable tips are exclusively available on our Telegram channel. Stay updated with your favorite source, DK Technozone.

Dhanjee Rider

Dk Technozone An Editor,Programmer, grafix Designer Website Designer,Android Geek, Instagram Filter Seller, Blogger, Seo Expert, Wordpress Geek etc. Telegram