HTML Code for add Speaker Button in blogg post :

HTML Code for add Speaker Button in blogg post : in Text/Code Area 

Copy the code and paste it in your blogg page HTML section :-

<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hindi Post Speech</title> <style> /* Container for the post content */ #post-content { position: relative; padding: 20px; border: 1px solid #ddd; } /* Style for the speaker button */ #speakButton { position: absolute; top: -30px; right: 10px; padding: 10px 20px; background-color: #4CAF50; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; } #speakButton:hover { background-color: #45a049; } </style> <div id="post-content"> <!-- Your blog post content goes here --> <button id="speakButton" onclick="speakPost()">🔊 सुनें</button> <p>यह एक हिंदी ब्लॉग पोस्ट है। आप इस पाठ को चुन सकते हैं और इसे पढ़ने के लिए ऊपर दिए गए स्पीकर बटन का उपयोग कर सकते हैं।</p> <p>यह बटन पोस्ट के शीर्ष-दाएँ कोने में स्थित है।</p> </div> <script> function speakPost() { // Get the text content of the blog post var content = document.getElementById('post-content').innerText; // Create a new instance of SpeechSynthesisUtterance var speech = new SpeechSynthesisUtterance(); speech.lang = 'hi-IN'; // Set language to Hindi speech.text = content; // Set the text to speak // Speak the content window.speechSynthesis.speak(speech); } </script>