Home
Blogger Widgets
Blogging Features

How to Add Text to Speech Feature to Blogger Blog Posts

Class with Mason
Steps
1. Go to your blogger and click create new post.
2. On top left corner just below title space you will find "pen" icon; click it and change from compose mode to html view.
3. Double click to copy html, then paste it in your blogger post in html view.
4. Click on CSS tab, double click on code to copy it and paste it in your post.
5. Do same with JS code.
6. View the post.
Demo

 <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>

Post a Comment