PORTFOLIO

Website Voice Assistant

Garrett Berger - Website Design & Website Development - September 13, 2018

See the Pen EeRLmj by GarrettBerger (@garrettberger) on CodePen.

Thanks for making it to our company's second blog post! My name is Garrett Berger Lead Designer and Co-CEO of Delta Vel and I will be walking you through the following tutorial. In this post, we will be going over how to incorporate voice commands into your website using Javascript.

 

Time to get started.

 

First, we will start by setting you up with what you need. Start by creating an HTML input button and also give it an id name like so:

 

<input type="button" id="button">

 

Next, we will add the voice command code to your project. Copy and paste the code below into your projects setting code (body).

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/annyang/2.6.1/annyang.min.js"></script>
<script>
if (annyang) {
// Let's define a command.
var commands = {
'hello': function() { alert('Hello world!'); }
};

// Add our commands to annyang
annyang.addCommands(commands);
// Start listening.
annyang.start();
}
</script>

 

Great job! It should now work like the preview at the top of this page!