How to Add Text to Speech Feature to Blogger Site Blog Posts

Text to Speech

Let's Do a Demo Here...! 

View Demo

Step 1:. Go to your Blogger Dashboard and click create new post.

Step 2:. On top left corner just below title space you will find "pen" icon; click it and change from compose mode to html view.

Step 3:. Double click to copy html, then paste it in your blogger post in html view.

Step 4:. Click on CSS tab, double click on code to copy it and paste it in your post.

Step 5:. Do same with JS code.

 
Step 6:. View the post.

<title>Play-Pause Button with Speech Synthesis</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

<button id="playPauseButton">
    <i class="fas fa-play"></i>
  </button>

  <div id="blogPost">
    <h1>Welcome to My Blog</h1>
    <p>This is an example blog post. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec feugiat,
      ligula sit amet consectetur tempus, sem mi fermentum justo, nec fermentum quam mauris id lorem. Nunc ac
      velit ac nisi rutrum viverra vel id lectus. Sed eu felis id orci accumsan auctor. Curabitur laoreet, velit
      eu viverra volutpat, nulla velit elementum purus, eget laoreet diam enim in turpis.</p>
    <p>Praesent elementum nibh a felis ultricies, eget posuere orci tempor. Nullam aliquet, mauris vitae
      fringilla lobortis, lectus velit fermentum turpis, sit amet bibendum tellus neque sit amet metus. Sed
      eu justo quis nisl eleifend fringilla et ut leo. Aenean fringilla imperdiet enim vitae rhoncus. Vivamus
      maximus ex eget lobortis finibus. Sed ut magna at mi tempus efficitur vitae ut dolor.</p>
  </div>

<style>
  #playPauseButton {
  border: none;
  background-color: white;
  cursor: pointer;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

#playPauseButton:hover {
  background-color: #f5f5f5;
}

.fa-play::before {
  content: "\f04b"; /* Play icon */
}

.fa-pause::before {
  content: "\f04c"; /* Pause icon */
}

  </style>

<script>
    const playPauseButton = document.getElementById('playPauseButton');
    const blogPost = document.getElementById('blogPost');
    let isPlaying = false;
    let speechUtterance = null;

    playPauseButton.addEventListener('click', togglePlayPause);

    function togglePlayPause() {
      if (isPlaying) {
        pauseSpeech();
      } else {
        playSpeech();
      }
    }

    function playSpeech() {
      const text = blogPost.textContent || blogPost.innerText;
      speechUtterance = new SpeechSynthesisUtterance(text);
      speechUtterance.addEventListener('end', handleSpeechEnd);
      window.speechSynthesis.speak(speechUtterance);
      isPlaying = true;
      playPauseButton.innerHTML = '<i class="fas fa-pause"></i>';
    }

    function pauseSpeech() {
      window.speechSynthesis.cancel();
      isPlaying = false;
      playPauseButton.innerHTML = '<i class="fas fa-play"></i>';
    }

    function handleSpeechEnd() {
      isPlaying = false;
      playPauseButton.innerHTML = '<i class="fas fa-play"></i>';
    }
  </script>

Conclusion

This is all about making a Contact Form using Telegram Bot API. I hope you enjoy this article. Please do share this article. And if you are facing problem in any section or you have any question then ask us in comment box.

Copyright ©

ᗩᗷᗪᑌᒪᒪᗩᕼ ᑕᗝᗪᗴᗪ