Last active
August 29, 2015 14:03
-
-
Save M1ke/4d9a42d75a733ffb5dfd to your computer and use it in GitHub Desktop.
Text reader
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>Text Reader</title> | |
| <style type="text/css"> | |
| h1 {text-align: center;} | |
| p.text {display: none;} | |
| </style> | |
| </head> | |
| <body> | |
| <h1 class="read">The text will be read here</h1> | |
| <p><a href="#" onclick="start();">Start</a></p> | |
| <p><a href="#" onclick="stop();">Stop</a></p> | |
| <!-- Enter the text that you want read in between the two `p` tags --> | |
| <p class="text">We will read this text word by word</p> | |
| <script type="text/javascript"> | |
| var text=document.getElementsByClassName('text').item().innerHTML; | |
| var el=document.getElementsByClassName('read').item(); | |
| var split=text.split(' '); | |
| var interval; | |
| var step=0; | |
| // adjust this value to alter the reading speed, lower is faster | |
| var time=1000; // miliseconds | |
| var started=false; | |
| function stop(){ | |
| if (!started) return; | |
| clearInterval(interval); | |
| el.innerHTML='Reading ended'; | |
| started=false; | |
| } | |
| function start(){ | |
| if (started) return; | |
| started=true; | |
| step=0; | |
| interval=setInterval(function(){ | |
| el.innerHTML=split[step]; | |
| step++; | |
| if (step>split.length) stop(); | |
| },time); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment