index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web Speech API Demo</title>
<style>
html, body, #map {
height: 100%;
padding: 0;
margin: 0;
font-family: Verdana, Arial, sans-serif;
}
</style>
<link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.11/themes/css/cartodb.css" />
<script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.11/cartodb.js"></script>
</head>
<body>
<div id="map"> </div>
<script>
var lang = 'en-US';
var final_transcript = '';
var final_words = '';
var ignore_onend = false;
var recognition = new webkitSpeechRecognition();
recognition.continuous = true;
recognition.interimResults = true;
recognition.onstart = function() {
console.log('start')
recognizing = true;
};
recognition.onerror = function(event) {
console.log(event)
};
var offSent = false;
recognition.onend = function() {
recognizing = false;
console.log(final_words)
$('.cartodb-searchbox .text').val(final_words)
$('.cartodb-searchbox form').submit()
setTimeout(function(){ recognition.start(); final_transcript = ''; final_words = ''; }, 2800);
};
recognition.onresult = function(event) {
var interim_transcript = '';
if (offSent == false){
offSent = true;
setTimeout(function(){ recognition.stop(); }, 800);
}
for (var i = event.resultIndex; i < event.results.length; ++i) {
if (event.results[i].isFinal) {
final_transcript += event.results[i][0].transcript;
} else {
interim_transcript += event.results[i][0].transcript;
}
}
final_transcript = final_transcript;
final_words = final_transcript;
};
var current_style;
function main(){
var url = 'https://team.cartodb.com/api/v2/viz/becbe840-a43a-11e4-86d6-0e018d66dc29/viz.json';
cartodb.createVis('map', url, { shareable: true,
title: true,
description: true,
search: true,
tiles_loader: true, https: true})
.done(function(vis, layers) {
var v = cdb.vis.Overlay.create('search', vis, {})
v.show();
$('#map').append(v.render().el);
recognition.lang = lang;
recognition.start();
});
}
window.onload = main;
</script>