Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<html>
<head>
<title>API Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
var accessToken = "<your agent's client access token>";
var baseUrl = "https://api.api.ai/v1/";
$(document).ready(function() {
$("#input").keypress(function(event) {
if (event.which == 13) {
event.preventDefault();
send();
}
});
$("#rec").click(function(event) {
switchRecognition();
});
});
var recognition;
function startRecognition() {
recognition = new webkitSpeechRecognition();
recognition.onstart = function(event) {
updateRec();
};
recognition.onresult = function(event) {
var text = "";
for (var i = event.resultIndex; i < event.results.length; ++i) {
text += event.results[i][0].transcript;
}
setInput(text);
stopRecognition();
};
recognition.onend = function() {
stopRecognition();
};
recognition.lang = "en-US";
recognition.start();
}
function stopRecognition() {
if (recognition) {
recognition.stop();
recognition = null;
}
updateRec();
}
function switchRecognition() {
if (recognition) {
stopRecognition();
} else {
startRecognition();
}
}
function setInput(text) {
$("#input").val(text);
send();
}
function updateRec() {
$("#rec").text(recognition ? "Stop" : "Speak");
}
function send() {
var text = $("#input").val();
$.ajax({
type: "POST",
url: baseUrl + "query?v=20150910",
contentType: "application/json; charset=utf-8",
dataType: "json",
headers: {
"Authorization": "Bearer " + accessToken
},
data: JSON.stringify({ q: text, lang: "en" }),
success: function(data) {
setResponse(JSON.stringify(data, undefined, 2));
},
error: function() {
setResponse("Internal Server Error");
}
});
setResponse("Loading...");
}
function setResponse(val) {
$("#response").text(val);
}
</script>
<style type="text/css">
body { width: 500px; margin: 0 auto; text-align: center; margin-top: 20px; }
div { position: absolute; }
input { width: 400px; }
button { width: 50px; }
textarea { width: 100%; }
</style>
</head>
<body>
<div>
<input id="input" type="text"> <button id="rec">Speak</button>
<br>Response<br> <textarea id="response" cols="40" rows="20"></textarea>
</div>
</body>
</html>
@Curlytv

This comment has been minimized.

Copy link

Curlytv commented May 28, 2016

NIce

@saeemahmedpt

This comment has been minimized.

Copy link

saeemahmedpt commented Jun 29, 2016

Hi,
I am new to this entire JS and HTML, so what I did, I just copied the entire code into a file saved it as a ".HTML" and and when I clicked on the speak button nothin is happening.

Please help me.

@PotterSys

This comment has been minimized.

Copy link

PotterSys commented Jul 4, 2016

@saeemahmedpt try uploading the HTML file to a web server, as Audio API is not available if you load the file locally

@comarius

This comment has been minimized.

Copy link

comarius commented Jul 25, 2016

None of the api ai samples are working....

@Akashpatel579

This comment has been minimized.

Copy link

Akashpatel579 commented Aug 5, 2016

change your access token with Developer access token or Client access token .... @comarius

@Gabrieldenys

This comment has been minimized.

Copy link

Gabrieldenys commented Aug 26, 2016

Guys if anyone is having problems with the audio, that is because as mentioned before Audio API is not available locally, you must host the file, this can be done on your local machine using nodejs with expressJS (https://scotch.io/tutorials/use-expressjs-to-deliver-html-files) or Python (http://www.linuxjournal.com/content/tech-tip-really-simple-http-server-python). You can also use a dedicated server, many are available online

@guillaumegarcia13

This comment has been minimized.

Copy link

guillaumegarcia13 commented Oct 3, 2016

Loading your script without protocol avoids http/https switch issue
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

@yarcowang

This comment has been minimized.

Copy link

yarcowang commented Oct 6, 2016

It works, but i got warning...so how to add session id?

    "metadata": {
      "warning": "IMPORTANT: Please use unique session ID for each client. Otherwise you may experience unstable behaviour."
    },

em... i added sessionId and also change q to query, it seems they prefer query:

                data: JSON.stringify({ query: text, lang: "en", sessionId: "fe172d70-7c2e-4cb7-99fd-7a745edb9622"}),
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.