<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>

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;*/ /*position: absolute;*/ /*left: 68px;*/ /*right: 73px;*/ /*top: 127px;*/ /*bottom: 142px;*/ background: #111; background-size: cover; position: absolute; left: 78px; right: 82px; top: 118px; bottom: 128px; } .container canvas { position: absolute; bottom: 182px; left: 68px; right: 73px; }

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", { query: e.results[0][0].transcript }, function(data,status){ document.getElementById('output').value = data; speak(data); // alert("Data: " + data + "\nStatus: " + status); }); // document.getElementById('labnol').submit(); }; recognition.onerror = function(e) { recognition.stop(); } } } var $siri_ios9 = document.getElementById('container-ios9'); var SW9 = new SiriWave9({ width: 259, height: 40, speed: 0.2, amplitude: 1, container: $siri_ios9, autostart: true, });