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>
Reach 100K+ monthly readers. Share your writings on Class with Mason. Submit Now!
Disclaimer: The content of this article/paper represents the sole opinions and viewpoints of the author and does not necessarily align with the editorial stance of Class with Mason