2018-06-05 12:15:48 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
|
|
|
<meta name="description" content="">
|
|
|
|
|
<meta name="author" content="">
|
|
|
|
|
|
2018-06-05 14:18:25 +00:00
|
|
|
<title>Mozillia - Text2Speech engine</title>
|
2018-06-05 12:15:48 +00:00
|
|
|
|
|
|
|
|
<!-- Bootstrap core CSS -->
|
|
|
|
|
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css"
|
|
|
|
|
integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous" rel="stylesheet">
|
|
|
|
|
|
|
|
|
|
<!-- Custom styles for this template -->
|
|
|
|
|
<style>
|
|
|
|
|
body {
|
|
|
|
|
padding-top: 54px;
|
|
|
|
|
}
|
|
|
|
|
@media (min-width: 992px) {
|
|
|
|
|
body {
|
|
|
|
|
padding-top: 56px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
2018-06-05 14:18:25 +00:00
|
|
|
|
2018-06-05 12:15:48 +00:00
|
|
|
<body>
|
2018-12-11 14:10:56 +00:00
|
|
|
<a href="https://github.com/mozilla/TTS"><img style="position: absolute; z-index:1000; top: 0; left: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png" alt="Fork me on GitHub"></a>
|
2018-06-05 12:15:48 +00:00
|
|
|
|
|
|
|
|
<!-- Navigation -->
|
2018-12-11 14:10:56 +00:00
|
|
|
<!--
|
2018-06-05 12:15:48 +00:00
|
|
|
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
|
|
|
|
|
<div class="container">
|
|
|
|
|
<a class="navbar-brand" href="#">Mozilla TTS</a>
|
|
|
|
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
|
|
|
|
|
<span class="navbar-toggler-icon"></span>
|
|
|
|
|
</button>
|
|
|
|
|
<div class="collapse navbar-collapse" id="navbarResponsive">
|
|
|
|
|
<ul class="navbar-nav ml-auto">
|
|
|
|
|
<li class="nav-item active">
|
|
|
|
|
<a class="nav-link" href="#">Home
|
|
|
|
|
<span class="sr-only">(current)</span>
|
|
|
|
|
</a>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</nav>
|
2018-12-11 14:10:56 +00:00
|
|
|
-->
|
2018-06-05 12:15:48 +00:00
|
|
|
|
|
|
|
|
<!-- Page Content -->
|
|
|
|
|
<div class="container">
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-lg-12 text-center">
|
2019-04-15 14:13:33 +00:00
|
|
|
<img class="mt-5" src="https://user-images.githubusercontent.com/1402048/52643646-c2102980-2edd-11e9-8c37-b72f3c89a640.png" alt=></img>
|
2018-06-05 12:15:48 +00:00
|
|
|
<ul class="list-unstyled">
|
|
|
|
|
</ul>
|
2019-04-15 14:13:33 +00:00
|
|
|
<input id="text" placeholder="Type here..." size=45 type="text" name="text">
|
2018-06-05 12:15:48 +00:00
|
|
|
<button id="speak-button" name="speak">Speak</button><br/><br/>
|
|
|
|
|
<audio id="audio" controls autoplay hidden></audio>
|
|
|
|
|
<p id="message"></p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Bootstrap core JavaScript -->
|
|
|
|
|
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
|
|
|
|
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></script>
|
|
|
|
|
<script>
|
|
|
|
|
function q(selector) {return document.querySelector(selector)}
|
|
|
|
|
q('#text').focus()
|
|
|
|
|
q('#speak-button').addEventListener('click', function(e) {
|
2018-06-05 14:15:57 +00:00
|
|
|
text = q('#text').value
|
|
|
|
|
if (text) {
|
|
|
|
|
q('#message').textContent = 'Synthesizing...'
|
|
|
|
|
q('#speak-button').disabled = true
|
|
|
|
|
q('#audio').hidden = true
|
|
|
|
|
synthesize(text)
|
|
|
|
|
}
|
|
|
|
|
e.preventDefault()
|
|
|
|
|
return false
|
2018-06-05 12:15:48 +00:00
|
|
|
})
|
|
|
|
|
function synthesize(text) {
|
|
|
|
|
fetch('/api/tts?text=' + encodeURIComponent(text), {cache: 'no-cache'})
|
|
|
|
|
.then(function(res) {
|
|
|
|
|
if (!res.ok) throw Error(res.statusText)
|
|
|
|
|
return res.blob()
|
|
|
|
|
}).then(function(blob) {
|
|
|
|
|
q('#message').textContent = ''
|
|
|
|
|
q('#speak-button').disabled = false
|
|
|
|
|
q('#audio').src = URL.createObjectURL(blob)
|
|
|
|
|
q('#audio').hidden = false
|
|
|
|
|
}).catch(function(err) {
|
|
|
|
|
q('#message').textContent = 'Error: ' + err.message
|
|
|
|
|
q('#speak-button').disabled = false
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
</html>
|
