gif-talkr
Version:
Turn gif files into talking avatars for use with TTS or audio.
99 lines (92 loc) • 2.81 kB
HTML
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>
TTS GIF Example
</title>
<meta name="description" content="Example of using GIF files to bring text to speech voices to life in your browser.">
<script type="text/javascript" src="./libgif.js"></script>
</head>
<style>
/* the superGifCanvas elements can be styled if you need to*/
/*
.superGifCanvas {
width:100%;
}
*/
* {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.guierrormessage {
color: #FF0000;
}
.guioption{
width: 280px;
padding: 0.2em;
font-size: 1em;
display: inline-block;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1) inset;
}
#giferrormessage {
display: inline-block;
}
#newgifbutton {
font-size: 1.0rem;
padding: 0.5rem 0.6em;
background: #69c773;
border-bottom: 1px solid #498b50;
color: white;
-webkit-font-smoothing: antialiased;
font-weight: bold;
margin: 0;
height: 35px;
text-align: center;
}
#texttospeakinput {
width:96%;
}
.superGifCanvas{
max-width: 100%;
}
</style>
<body>
<center>
<div id="ttsoptions">
<div>
<label>Voice:</label>
<select id="voiceSelecter" class="guioption"></select>
</div>
<div>
<input type="text" id="texttospeakinput" value="Pretty cool. I didn't know gifs could talk." class="guioption" onClick="this.setSelectionRange(0, this.value.length)" >
<div id="texterrormessage" class="guierrormessage"></div>
</div>
<div>
<button id="newgifbutton">GIF</button>
<input type="text" id="gifurlinput" value="https://i.imgur.com/ork8hoP.gif" class="guioption" onClick="this.setSelectionRange(0, this.value.length)">
<div id="giferrormessage" class="guierrormessage"></div>
</div>
</div>
<div id="instructions">Click on the image below to hear the message.</div>
<script type="text/javascript">
</script>
<div >
<a href="javascript:playsyncronized()">
<div id="imagecontainer">
<img id="exampleimg" src="https://i.imgur.com/ork8hoP.gif" rel:animated_src="https://i.imgur.com/ork8hoP.gif" rel:auto_play="0" />
</div>
</a>
</div>
<br>
<div id="footer">
<h3>More Information</h3>
<div><a href="https://github.com/talkr-app/gif-talkr">Github Project</a></div>
<div><a href="https://imgur.com/a/NRZVQ">Sample GIFs</a></div>
<div><a href="https://talkrapp.com">Talkr</a></div>
<script type="text/javascript" src="./example.js"></script>
</div>
</center>
</div>
</body>
</html>