"text to speech"
Bootstrap 4.1.1 Snippet by mdburhani52

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style type="text/css"> .row{ display: flex; } .col{ flex: 1 } .active{ color: orange; } </style> </head> <body> <h2 class="text-center mt-3">Turn on your speakers</h2> <br><br> <div class="container"> <div class="row"> <span class="col-4"> <h5 class="readme">Natural Sounding Voices</h5> <p class="readme">High quality, crystal-clear reading</p> </span> <span class="col-4"> <h5 class="readme">OCR Technology</h5> <p class="readme">Read from scanned documents or images</p> </span> <span class="col-4"> <h5 class="readme">Listen On The Go</h5> <p class="readme">Listen to past uploads or convert to mp3</p> </span> </div> <div class="col-12 text-center"> <button id='btnSpeak2'>Speak !</button> </div> </div> <script> var synth = window.speechSynthesis; var voices = []; var readme = document.querySelectorAll('.readme'); btnSpeak2.addEventListener('click', ()=> { voices = synth.getVoices(); var selectedVoiceName = 'Microsoft David Desktop - English (United States)'; readme.forEach((word) => { var toSpeak = new SpeechSynthesisUtterance(word.innerText); voices.forEach((voice)=>{ if(voice.name === selectedVoiceName){ toSpeak.voice = voice; } }); synth.speak(toSpeak); toSpeak.onstart = function(event) { readme.forEach((selectorTag) => { if(selectorTag.innerText == event.utterance.text){ selectorTag.classList.add("active"); }else{ selectorTag.classList.remove("active"); } }) } toSpeak.onend = function(event) { readme.forEach((selectorTag) => { selectorTag.classList.remove("active"); }) } }) }); </script> </body> </html>

Related: See More

Argon Design System
Bootstrap Images to Left and Right with Text and Heading
Creating password field text hide show via a single class
JS Typewriter (Text Animation)

Questions / Comments: