Created
July 26, 2019 14:14
-
-
Save VCone/5b734f58088b38612c3e58ff8838646f to your computer and use it in GitHub Desktop.
Plays Web Speech during I-Frame reload. (Tested with Chrome and FireFox browser)
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
| <!DOCTYPE html> | |
| <!-- Plays Speech during I-frame reload. (Even in FireFox) --> | |
| <!-- Demo related to : --> | |
| <!-- https://stackoverflow.com/questions/54328556/speech-gets-cut-off-in-firefox-when-page-is-auto-refreshed-but-not-in-google-chr --> | |
| <html> | |
| <style> | |
| #content_Iframe | |
| { | |
| overflow: hidden !important; line-height: 0px; | |
| margin: 0px !important; padding: 0px !important; border: 0px !important; | |
| } | |
| </style> | |
| <body> | |
| <div id=layer_2_High" width="1024" height="50" style="font-size:14px; width:30; background: #808080; position:absolute; top: 0px; left: 0px; z-index: 2" > | |
| <div class="classvc3" id="anim_Slides" onclick="do_Speak();" | |
| style="width: 300px; height:40px; background: rgba(32, 77, 98, 0.5); text-align:center; z-index: 3" > | |
| <div style="position:absolute; top: 10px; left: 50px; font-family: sans-serif; color: #ffffff;"> | |
| [ CLICK HERE TO SPEAK ] | |
| </div> | |
| </div> | |
| </div> | |
| <!-- DIV - container for right side content --> | |
| <div style="position:absolute; top: 20px; left: 0px; z-index: 4"> | |
| <div style="position:absolute; top: 100px; left: 1044px; width: 500px; font-family: sans-serif; color: #1010ff;"> | |
| Each time the page refreshes... <br> | |
| A new <b>computer-generated face</b> will appear. | |
| <br><br> | |
| The speech synthesis will NOT be affected by the refresh. | |
| </div> | |
| <div style="position:absolute; top: 250px; left: 1044px; width: 500px; font-family: sans-serif; color: #1010ff;"> | |
| This page (content) has refreshed: <b> <font color="red" size="5"> <span id="myspan"> 0 </span> </font> times</b>. | |
| </div> | |
| <div style="position:absolute; top: 290px; left: 1044px; width: 500px; font-family: sans-serif; color: #101010;"> | |
| content provider: <b> <a href="https://thispersondoesnotexist.com" target="_blank"> This Person Does Not Exist </a> </b> | |
| </div> | |
| </div> <!-- end DIV - right side content --> | |
| <!-- DIV - container for I-Frame at left side content --> | |
| <div style="overflow: hidden; border: 0; float: left"> | |
| <iframe id="content_Iframe " width="1050" height="1050" style="border:none; font-size:14px; width:30; position:absolute; top: 0px; left: 0px; margin:0px; z-index: 1" | |
| onload="onFrameLoaded();" src="https://thispersondoesnotexist.com/image"> | |
| </iframe> | |
| </div> <!-- end DIV - left side content --> | |
| <!-- Bars for showing Speaking-mode --> | |
| <div class="bar" id="speaking_Bars" | |
| style="float:left; width: 300px; height:4px; background: none; opacity: 0.25; position:absolute; top: 230px; left: 1044px; z-index: 4" > | |
| <div class="bar" id="spk_bars1" style="float:left; width: 10px; height:4px; background: rgba(32, 77, 98, 0.5); position:absolute;top: 0px;"> | |
| </div> | |
| <div class="bar" id="spk_bars2" style="float:left; width: 10px; height:4px; background: rgba(32, 77, 98, 0.5); position:absolute;top: 10px;"> | |
| </div> | |
| <div class="bar" id="spk_bars3" style="float:left; width: 10px; height:4px; background: rgba(32, 77, 98, 0.5); position:absolute;top: 20px;"> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| var timerId; | |
| var count = 0; | |
| var bar1; var bar2; var bar3; | |
| var mySpan = document.getElementById("myspan"); //# for updating Count of refreshes | |
| var bar_div = document.getElementById('speaking_Bars'); //# for "Is Speaking" bars anim | |
| //# When content page is fully loaded, then refresh after 750 milliseconds | |
| function onFrameLoaded() | |
| { | |
| let timerId = setTimeout(reload_Content(), 750); //750 | |
| } | |
| function reload_Content() | |
| { | |
| //# update content of an I-frame | |
| document.getElementById('content_Iframe ').src = 'https://thispersondoesnotexist.com/image'; | |
| count++; mySpan.innerHTML = count.toString(); //# update count of refreshes. | |
| } | |
| //# On pressing "click here to speak"... | |
| function do_Speak ( ) | |
| { | |
| var msg = new SpeechSynthesisUtterance(); | |
| var voices = window.speechSynthesis.getVoices(); | |
| msg.voice = voices[ 0 ]; //choose speaker voice by index | |
| msg.text = "Hello Stack Overflow, how are you today? Please finish saying this entire sentence even during a page content refresh. ... test complete: "; | |
| msg.text += "Each time the page content refreshes, a new face will be computer generated by artificial intelligence... "; | |
| msg.text += "Image algorithm is created by. ... This person does not exist dot com"; | |
| msg.pitch = 1.5; msg.volume = 0.75; msg.rate = 1; | |
| //# Speech event listeners (eg: Start & End) | |
| msg.onstart = speak_start; msg.onend = speak_end; | |
| //# Basic Animation to notify that Speech is being spoken | |
| tmp_timer = setInterval( function() | |
| { | |
| bar1 = document.getElementById('spk_bars1'); | |
| bar1.style.width = getRandom(50, 300)+'px'; | |
| bar2 = document.getElementById('spk_bars2'); | |
| bar2.style.width = getRandom(50, 300)+'px'; | |
| bar3 = document.getElementById('spk_bars3'); | |
| bar3.style.width = getRandom(50, 300)+'px'; | |
| }, | |
| 100); | |
| speechSynthesis.speak(msg); | |
| } | |
| //# Supporting functions | |
| function getRandom(min, max) { return Math.floor(Math.random() * (max-min+1) + min); } | |
| function speak_start(event) { bar_div.style.opacity = 1.0; } | |
| function speak_end(event) { bar_div.style.opacity = 0.0; clearInterval(tmp_timer);} | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment