"Speech"
Bootstrap 3.3.0 Snippet by kenyeung

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!-- CSS Styles -->
<style>
.speech {border: 1px solid #DDD; width: 300px; padding: 0; margin: 0}
.speech input {border: 0; width: 240px; display: inline-block; height: 30px;}
.speech img {float: right; width: 40px }
</style>
<div>
<div id="container-ios9" class="container">
<img src="http://pngimg.com/upload/iphone_PNG5735.png" />
<div class="iphone-display"></div>
<img onclick="startDictation()" src="https://clare.ai/Images/logo/mic.png" style="position: absolute;width: 100px;top: 255px;left: 154px;" />
<!--<img onclick="startDictation()" src="//i.imgur.com/cHidSVu.gif" style="position: absolute;width: 100px;top: 255px;left: 154px;" />-->
</div>
</div>
<!--https://github.com/caffeinalab/siriwavejs-->
<!-- Search Form -->
<form id="labnol" method="get" action="https://www.google.com/search">
<div class="speech">
<input type="text" name="q" id="transcript" placeholder="Speak" />
<!--<img onclick="startDictation()" src="//i.imgur.com/cHidSVu.gif" />-->
</div>
<input id="output" />
</form>
<!--<script src="http://caffeinalab.github.io/SiriWaveJS/siriwave.js"></script>-->
<script src="http://caffeinalab.github.io/SiriWaveJS/siriwave9.js"></script>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
body {
font-family: 'Helvetica Neue', Helvetica, sans-serif;
font-weight: 100;
background: #fff;
color: #000;
text-align: center;
}
#title {
font-size: 120px;
font-weight: 100;
margin-top: 30px;
margin-bottom: 40px;
}
h1, h2, h3 {
font-weight: 100;
}
#panel {
font-size: 14px;
}
#panel input {
display: block;
margin: 0 auto;
width: 300px;
margin-bottom: 40px;
}
.container {
display: inline-block;
width: 400px;
margin: 0;
position: relative;
}
.container > img {
width: 100%;
}
.container .iphone-display {
/*background: #111;*/
/*background-size: cover;*/
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
function speak(text) {
var msg = new SpeechSynthesisUtterance();
msg.lang = "zh-HK";
msg.text = text;
msg.volume = 1;
msg.rate = 1;
msg.pitch = 1;
msg.voice = speechSynthesis.getVoices().filter(function (voice) {
return voice.lang == "zh-HK";
})[0];
console.log(msg);
window.speechSynthesis.speak(msg);
}
function startDictation() {
if (window.hasOwnProperty('webkitSpeechRecognition')) {
var recognition = new webkitSpeechRecognition();
recognition.continuous = false;
recognition.interimResults = false;
// recognition.lang = "en-US";
recognition.lang = "yue-Hant-HK";
recognition.start();
recognition.onresult = function(e) {
document.getElementById('transcript').value
= e.results[0][0].transcript;
recognition.stop();
// document.getElementById('output').value = e.results[0][0].transcript;
$.get("http://snapdeal.clare.ai/api/facebook/talk",
{
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Now UI Dashboard PRO

Questions / Comments: