A Pen by imran

Thumbnail
This awesome code was written by imran2, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright imran2 ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  imran</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="./css/home.css"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r66/three.js"></script>
<script src="//js.leapmotion.com/leap-0.6.0.min.js"></script>
<script src="//js.leapmotion.com/leap-plugins-0.1.6.1.js"></script>
<script src="//js.leapmotion.com/leap.rigged-hand-0.1.3.min.js"></script>
    <nav>
      <ul>
        <img class="logo2" src="https://i.imgur.com/Ra5sVdL.png" />
        <li><a href="index.html" data-hover="Home">Home</a></li>
        <li><a href="values.html" data-hover="Values">Values</a></li>
        <li><a href="test.html" data-hover="Test">Test</a></li>
        <li><a href="control.html" data-hover="Control">Control</a></li>
        <li><a href="info.html" data-hover="Info">Info</a></li>
      </ul>

      <div id="startRecBtn">
         <div class="switch">
    	    <input type="checkbox" name="toggle">
    	   <label for="toggle"><i></i></label>
    	   <span></span>
      </div>

    </nav>
</head>
  
  
<body>
</div>
     <div class="rec-status">Recogniser status:<span id="recStatus">not recognising</span></div>
<div id="labels"></div>
 <section id="cover" class="cover">
    <h1>
<img src="https://i.imgur.com/LO1hxCP.png"></img>
    </h1>
    <p>Scroll</p>
 </section>

 <div id="box" class="content">
  <div>
      <h2>Welcome to Air Leap</h2>
  </div>
 </div>

 <div id="box" class="content">
  <div>
      <h2>How to Get Started</h2>
      <img src="http://www.techforanyone.com/wp-content/uploads/2013/12/leap-motion-controller.png" />
    <p>This website is designed to allow you to use the leap motion device to control the webpage.
      <br><br>
      Step 1: Install leap motion on your computer by going to: 
    https://developer.leapmotion.com/downloads
      <br><br>
     Step 2: Then connect your leap motion device to a USB port on your computer. 
      <br><br>
      Step 3: Center the device in front of the monitor.
      <br><br>
      Step 4: Refresh the page and enjoy the power of Air Leap.
    </p>
  </div>
 </div>
  
  <dialog id="myDialog">This is a dialog window</dialog>


 <div id="box" class="content">
  <div>
      <h2>How to Control Air Leap</h2>
      <img src="http://main.makeuseoflimited.netdna-cdn.com/wp-content/uploads/2013/07/Leap-Motion-Splash-Screen.png" />
      <p>Here is a list of the different hand gestures you can make to control the webpage:
        <br>
        <br>
    
    - A circle with your index finger to refresh.
        <br>
        <br>
    - Two fingers pointed at the screen to scroll.
        <br>
        <br>
        - One finger tapping the screen to click.
        <br>
        <br>
        - Clap hands together to dim and brighten the screen.
        <br>
        <br>
        - Swipe hand back and forth to navigate pages.
        <br>
        <br>
        - Pinch finger and thumb together to zoom.
    </p>
  </div>
 </div>
  
  <div id="box" class="content">
  <div>
      <h2>Other Pages</h2>
      <img src="http://gaminrealm.com/wp-content/uploads/2013/07/81f7e_leap-motion1.jpg" />
      <p> Values Page: See different values for variables used by Air Leap.
        <br><br>
        Test Page: Test different functions on a page made for testing.
        <br><br>
        Control Page: Test speech functions and more.
        <br><br>
        Info Page: Get more information about Air Leap.
    </p>
  </div>
 </div>

 </div>
</body>
</html>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/imran2/a-pen-by-imran-waZmqv */
@import "compass";
sans-serif;

body {
  background-color: #FFFFFF;
}

.modal {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: transparent;
  display: none;
}

.modal-is-active {
  display: block;
  cursor: pointer;
}

.modal--body {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 40%;
  height: 200px;
  padding: 30px;
  background-color: #fff;
  border-radius: 3px;
  font-family: helvetica, sans-serif;
  font-weight: thin;
  font-size: 16px;
  text-align: center;
}

label {
  position: fixed;
  white-space: nowrap;
  z-index: 5;
}

nav {
  background:#231F20;
  top: 10px;
  position: fixed;
  width: 75%;
  height: 107.531px;
  border-radius: 8px;
  z-index: 1;
  /*box-shadow: 0 3px 5px     rgba(0,0,0,.25);*/
  /* box-shadow: 0px 10px 35px 0px     rgba(0,0,0,.5);*/
  /*box-shadow: 2px 2px 5px rgba(0,0,0,0.4);*/

  text-align: center;
  /* display: inline; */

  -webkit-box-shadow: 0 1px 3px 0 rgba(0,0,0,.24),
                      0 1px 2px 0 rgba(0,0,0,.24);
-moz-box-shadow:      0 1px 3px 0 rgba(0,0,0,.24),
                      0 1px 2px 0 rgba(0,0,0,.24);
box-shadow:           0 1px 3px 0 rgba(0,0,0,.24),
                      0 1px 2px 0 rgba(0,0,0,.24);

                        /*box-shadow: 3px 3px 20px rgba(0, 0, 0, .5);*/
}

nav ul li {
  display: inline-block;
  text-transform: uppercase;
  font-size: 1.17em;
  letter-spacing: 0.002rem;
}

nav ul li a {
  display: inline-block;
  padding: 1em;
  color: #00A69C;
  text-decoration: none;
  font-size:1.5vw;
  transition: transform 0.3s ease 0s;
  transform-origin: 50% 0px 0px;
  transform-style: preserve-3d;
}

nav ul li a:hover {
  background: #231F20;
  color: #000000;
  transform: rotateX(90deg) translateY(-22px);
}

nav ul li a::before {
  position: absolute;
  top: 100%;
  left: 0px;
  width: 100%;
  text-align: center;
  line-height: 80px;
  background: none repeat scroll 0% 0% #00A69C;
  color: #000000;
  content: attr(data-hover);
  transition: #6363CE 0.3s ease 0s;
  transform: rotateX(-90deg);
  transform-origin: 50% 0px 0px;
}

.logo2{
  position:fixed;
  left: 5%;
  top:0;
}

#startRecBtn{
  top: 10px;
  background:#231F20;
  position: fixed;
  width: 10%;
  right: 8px;
  padding: 2.33rem;
  border-radius: 8px;
  /*box-shadow: 0 3px 5px     rgba(0,0,0,.25);*/

  -webkit-box-shadow: 0 1px 3px 0 rgba(0,0,0,.24),
                      0 1px 2px 0 rgba(0,0,0,.24);
-moz-box-shadow:      0 1px 3px 0 rgba(0,0,0,.24),
                      0 1px 2px 0 rgba(0,0,0,.24);
box-shadow:           0 1px 3px 0 rgba(0,0,0,.24),
                      0 1px 2px 0 rgba(0,0,0,.24);
  /*box-shadow: 2px 2px 5px rgba(0,0,0,0.4);*/

  text-align: center;
  /* display: inline; */
}

.switch input {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  opacity: 0;
  z-index: 100;
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.switch {
  width: 80px;
  height: 33px;
  position: relative;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.switch label {
  display: block;
  width: 90%;
  height: 100%;
  position: relative;
  background: #29AAE2;
  border-radius: 30px 30px 30px 30px;
  box-shadow: inset 0 3px 8px 1px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.2);
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
}

.switch input ~ label i {
  display: block;
  height: 31.2px;
  width: 31.2px;
  position: relative;
  left: 0.5px;
  top: 1px;
  z-index: 5;
  border-radius: inherit;
  background: #00A69C;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 8px rgba(0, 0, 0, 0.3), 0 12px 12px rgba(0, 0, 0, 0.4);
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
}

.switch label + span {
  content: "";
  width: 15px;
  height: 15px;
  position: relative;
  transform: translate(-90%, -150%);
  line-height: 75%;
  display: inline-block;
  left: 80%;
  border-radius: 11px;
  background: #00A69C;
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.2), 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 10px rgba(185, 231, 253, 0), inset 0 0 8px rgba(0, 0, 0, 0.9), inset 0 -2px 5px rgba(0, 0, 0, 0.3), inset 0 -5px 5px rgba(0, 0, 0, 0.5);
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
  z-index: 2;
}
/* Toggle */

.switch input:checked ~ label + span {
  content: "";
  width: 15px;
  height: 15px;
  position: relative;
  transform: translate(-90%, -150%);
  line-height: 75%;
  display: inline-block;
  left: 80%;
  border-radius: 10px;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
  z-index: 2;
  background: #00A69C ;
  background: gradient-gradient(#ffffff, #77a1b9);
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 10px rgba(100, 231, 253, 1), inset 0 0 8px rgba( 61, 157, 247, 0.8), inset 0 -2px 4px rgba(185, 231, 253, 0.3), inset 0 -3px 8px rgba(185, 231, 253, 0.5);
}

.switch input:checked ~ label i {
  left: auto;
  left: 60%;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 7px rgba(0, 0, 0, 0.3), 0 8px 8px rgba(0, 0, 0, 0.3), inset -1px 0 1px #b9f3fe;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.cover {
  height: 100vh;
  box-sizing: border-box;
  background-color: #382633;
}

.cover h1 {
  transform: translate(-50%, -50%);
  padding: 5vw;
  background-color: #382633;
  line-height: 75%;
  color: #ff3747;
  display: inline-block;
  position: relative;
  left: 50.5%;
  top: 50%;
}

.cover p {
  padding: 2vw;
  bottom: 2vw;
  color: #00A69C;
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  text-align: center;
}

.cover p:before {
  content: "";
  bottom: 1vw;
  position: absolute;
  left: 50%;
  border-top: 6.5px solid #29AAE2;
  border-left: 6.5px solid transparent;
  border-right: 6.5px solid transparent;
  margin-left: -6.5px;
}

section {
  padding-top: 5vw;
  position: relative;
  display: block;
}

@media screen and (max-width: 300px) {
  section {
    padding-top: 15px;
  }
}
@media screen and (min-width: 1200px) {
  section {
    padding-top: 60px;
  }
}
section:last-of-type {
  padding-bottom: 5vw;
}

@media screen and (max-width: 300px) {
  section:last-of-type {
    padding-bottom: 15px;
  }
}
@media screen and (min-width: 1200px) {
  section:last-of-type {
    padding-bottom: 60px;
  }
}

#box {
  background:#0000FF;
	margin: 30px auto;
	width: 80%;
  height: auto;
	border-radius: 8px;
  box-sizing: border-box;
  -webkit-box-shadow: 0 1px 3px 0 rgba(0,0,0,.24),
                      0 1px 2px 0 rgba(0,0,0,.24);
-moz-box-shadow:      0 1px 3px 0 rgba(0,0,0,.24),
                      0 1px 2px 0 rgba(0,0,0,.24);
box-shadow:           0 1px 3px 0 rgba(0,0,0,.24),
                      0 1px 2px 0 rgba(0,0,0,.24);
}

#box:after {
    padding-top: 0%;
    content: '';
    display: block;
}

.content {
  z-index: 1;
  text-align: center;
}
.content div {
  background-color: #00A69C;
  padding-top: 2vw;
  box-sizing: border-box;
  display: inline-block;
  text-align: left;
  max-width: 100%;
  width: 100%;
}

@media screen and (max-width: 300px) {
  .content div {
    padding-top: 2px;
  }
}
@media screen and (min-width: 1200px) {
  .content div {
    padding-top: 2px;
  }
}
.content div h2, .content div img, .content div p, .content div hr {
  margin-bottom: 2vw;
}

@media screen and (max-width: 300px) {
  .content div h2, .content div img, .content div p, .content div hr {
    margin-bottom: 15px;
  }
}
@media screen and (min-width: 1200px) {
  .content div h2, .content div img, .content div p, .content div hr {
    margin-bottom: 60px;
  }
}
.content div img:last-child {
  margin-bottom: 0 !important;
}
.content div h2, .content div p {
  padding-right: 5vw;
  padding-left: 5vw;
}
@media screen and (max-width: 300px) {
  .content div h2, .content div p {
    padding-right: 15px;
  }
}
@media screen and (min-width: 1200px) {
  .content div h2, .content div p {
    padding-right: 60px;
  }
}
@media screen and (max-width: 300px) {
  .content div h2, .content div p {
    padding-left: 15px;
  }
}
@media screen and (min-width: 1200px) {
  .content div h2, .content div p {
    padding-left: 60px;
  }
}
.content div img {
  -webkit-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
  opacity: 0.95;
  width: 100%;
  height: auto;
}
.content div img:hover {
  opacity: 1;
}

h1,
h2,
h3,
p {
  letter-spacing: 0.05em;
  line-height: 100%;
  font-family: "Titillium Web", sans-serif;
  position: relative;
  margin-top: 0.5%;
}

h1,
h3 {
  text-transform: uppercase;
}

h1 {
  font-size: 12vw;
  color: #231F20;
}

h2 {
  font-size: 2vw;
  font-family: "Arial Black", Gadget, sans-serif;
  text-align: center;
  color: #231F20;
}

p {
  font-size: 1.17em;
}


/*Downloaded from https://www.codeseek.co/imran2/a-pen-by-imran-waZmqv */
var riggedHandPlugin;
var hand;
var index;
var confidence = "";
var circleProgress;
var completeCircles;
var e={};
var grab;
var count = 0;
// Leap Motion Settings
var last_frame;
var scene;
var action = null;
var last_action = null;
var start_action = 0;
var intent = false;
var delay_between_actions = 1;
var timeout = null;

// Track Leap Motion Connection
var now, last_poll = new Date().getTime() / 1000;
var connection;
var connection_lost_after = 5;

// Settings for Scroll Events
var width = window.innerWidth;
var height = window.innerHeight;
var scroll_speed = 20;
var scroll_smoothing = 4;

// Size for Finger Rendering in Pixels
var finger_size = 32;

// Colors for Fingers
var rainbow = new Array('#F80C12', '#FF3311', '#FF6644', '#FEAE2D', '#D0C310', '#69D025', '#12BDB9', '#4444DD', '#3B0CBD', '#442299');
var leap = '#9AC847';
var dark = '#000000';
var light = '#FFFFFF';

// Setup Default Settings for Leap Motion
var leap_motion_settings = {
	'fingers': 'yes',
	'color': 'rainbow',
	'scrolling': 'enabled',
	'history': 'enabled',
	'zoom': 'disabled',
  'rotation': 'disabled'
};

document.getElementById("myDialog").closeModal; 

function click_page(pointables){
  var finger = pointables[0];
	var last_finger = last_frame.pointables[0];
  
  console.log(finger);
}

// Two Finger Page Scrolling
function scroll_page(pointables)
{
	var finger = pointables[0];
	var last_finger = last_frame.pointables[0];


	var horizontal_translation = 0;
	var horizontal_delta = finger.tipPosition.x - last_finger.tipPosition.x;

	var vertical_translation = 0;
	var vertical_delta = finger.tipPosition.y - last_finger.tipPosition.y;

	if (horizontal_delta > 10)
	{
		horizontal_translation = scroll_speed;
	}
	else if (horizontal_delta < 10)
	{
    horizontal_translation = -scroll_speed;
	}

	if (vertical_delta > scroll_smoothing)
	{
		vertical_translation = scroll_speed;
	}
	else if (vertical_delta < -scroll_smoothing)
	{
		vertical_translation = -scroll_speed;
	}

	window.scrollBy(horizontal_translation, vertical_translation);
}

// Look for Hand Gestures to Navigate History
function navigate_history(gesture)
{
	if (gesture.type === 'swipe' && gesture.state === 'stop')
	{
		if (gesture.direction.x > 0)
		{
			history.forward();
			console.log('Next Page');
		}
		else if (gesture.direction.x < 0)
		{
			history.back();
			console.log('Previous Page');
		}
	}
}

function Scroll(frame){
       var n=document.body;
       var r={};
       var i={};
            for(var s=0, o=frame.pointables.length; s!=o; s++){
                 var u=frame.pointables[s];
                 var a=e[u.id];
                 var f=n.scrollTop;
                 if(document.hasFocus()){
                 if(u.tipPosition[1]-325>0){n.scrollTop=f-=150}
                 if(u.tipPosition[1]-125>0){n.scrollTop=f-=5}
                 if(u.tipPosition[1]-90<0){n.scrollTop=f+=5}
             }
        }
}

function Zoom(frame){
    var hand = frame.hands[0];
    if(hand.pinchStrength.toPrecision(2) > 0.8){
      document.body.style.zoom="250%";
      
    }else if(hand.pinchStrength.toPrecision(2) < 0.8 && hand.pinchStrength.toPrecision(2) > 0.6 ){
      document.body.style.zoom="200%";
    }
 else if(hand.pinchStrength.toPrecision(2) < 0.8){
      document.body.style.zoom="100%";
}

function dim(){
  if (count == 0){
    count +=1;
  }else if(count == 1){
    count = 0;
  }
}


var controllerOptions = {enableGestures: true};
var controller = Leap.loop(
controllerOptions,
{frame:function(frame){
Scroll(frame)
 if(frame.valid && frame.gestures.length > 0){  
  hand = frame.hands[0];
   var URLlink = "";
		var URLTarget = "";
		if (hand)
		{
			var screenPosition = hand.screenPosition(hand.palmPosition);
			// Use for testing only; 
			//var outputContent = "";
			//var outputgestureContent = "";
			var el = document.elementFromPoint(
				hand.screenPosition()[0],
				hand.screenPosition()[1]
			);

			if (el){
				// Use for testing only; 
				//outputContent += '<br>Topmost element: '+ el.tagName + ' #' + el.id +  ' .' + el.className + ' LINK: ' + el.href;
				//outputgestureContent = frame.gesture.type;
				if (!!el.href && el.href != "")
				{
					URLlink = el.href;
					if (el.target)
					{
						URLTarget = el.target;
					}else{
						URLTarget = "";
					}
				}
			}
			// Using for testing only; 
			// console.log(outputgestureContent + " " + URLlink + " " + URLTarget);
			// output.html(outputContent);
			// console.log(outputContent);
			// outputgesture.html(outputgestureContent);
			// var dot = Leap.vec3.dot(hand.direction, hand.indexFinger.direction);
			// console.assert(!isNaN(dot));
			// out.innerHTML = dot.toPrecision(2);
		}
  grab = hand.grabStrength.toPrecision(2);
   if(grab > 0.8){
     dim()
   }
  Zoom(frame)
  
  confidence = hand.confidence;
    frame.gestures.forEach(function(gesture){
      circleProgress = gesture.progress;
      completeCircles = Math.floor(circleProgress);
      if(confidence > .6 && gesture.state === 'stop'){
        switch (gesture.type){
          case "circle":
            if(completeCircles >= 5){
                window.location = location.href + '?upd=' + 123456;
                console.log("Reload");
              }
              break;
          case "screenTap":
              outputgestureContent = "";
              //location.href = URLlink;
              if (URLTarget != "")
              {
                window.open(URLlink,   URLTarget);
              }else{
                window.open(URLlink, "_self");
              }
              console.log("Screen Tap Gesture");
              break;
          case "swipe":
              navigate_history(frame.gestures[0]);
              console.log("Swipe Gesture");
              break;
        }
      }
    });
  }
}}).use('screenPosition', {
	scale: 0.70
});


  controller.use('riggedHand', {
    parent: window.scene,
    camera: window.camera,
    scale: 0.75,
    positionScale: 5,
    offset: new THREE.Vector3(0, -5, 0),
    renderFn: function() {},
    boneColors: function(boneMesh, leapHand) {
      
      if ((boneMesh.name.indexOf('Finger_') == 0) ) {
         return {
          hue: 0.564,
          saturation: leapHand.grabStrength,
          lightness: 0.5
         }
      }else{
       return {
        hue: 0.6,
        saturation: 0.2,
        lightness: 0.8,
      };
      }
    }
  });
  controller.connect();


//--Speech and sythesis

function say(text){
  var msg = new SpeechSynthesisUtterance();
  var voices = window.speechSynthesis.getVoices();
  msg.voice = voices[10];
  msg.voiceURI = 'native';
  msg.volume = 1; // 0 to 1
  msg.rate = 0.8; // 0.1 to 10
  msg.pitch = 0; //0 to 2
  msg.text = text;
  msg.lang = 'en-US';
  speechSynthesis.speak(msg);
}


	// Define a new speech recognition instance
	var rec = null;
	var recognizing = false;
	try {
		rec = new webkitSpeechRecognition();
	} 
	catch(e) {
    	document.querySelector('.msg').setAttribute('data-state', 'show');
    	startRecBtn.setAttribute('disabled', 'true');
    	startRecBtn.setAttribute('disabled', 'true');
    }
    if (rec) {
		rec.continuous = true;
		rec.interimResults = false;
		rec.lang = 'en';

		// Define a threshold above which we are confident(!) that the recognition results are worth looking at 
		var confidenceThreshold = 0.5;

		// Simple function that checks existence of s in str
		var userSaid = function(str, s) {
			return str.indexOf(s) > -1;
		}

          rec.onstart = function() {
            recognizing = true;
          };

		// Process the results when they are returned from the recogniser
		rec.onresult = function(e) {
			// Check each result starting from the last one
			for (var i = e.resultIndex; i < e.results.length; ++i) {
				// If this is a final result
	       		if (e.results[i].isFinal) {
	       			// If the result is equal to or greater than the required threshold
	       			if (parseFloat(e.results[i][0].confidence) >= parseFloat(confidenceThreshold)) {
		       			var str = e.results[i][0].transcript;
		       			console.log('Recognised: ' + str);
		       			// If the user said 'video' then parse it further
		       			if (userSaid(str, 'home')) {
							             document.getElementById("openModal").showModal(); 
		       			}else if(userSaid(str, 'values')) {
                            window.location.href = 'values.html';
                }else if(userSaid(str, 'test')) {
                            window.location.href = 'test.html';
                }else if(userSaid(str, 'control')) {
                            window.location.href = 'control.html';
                }else if(userSaid(str, 'info')) {
                            window.location.href = 'info.html';
                }
	       			}
	        	}
	    	}
		};

		// Start speech recognition
		var startRec = function() {
              if (recognizing) {
                stopRec()
                return;
              }
			rec.start();
			recStatus.innerHTML = 'recognising';
		}
		// Stop speech recognition
		var stopRec = function() {
			rec.stop();
			recStatus.innerHTML = 'not recognising';
		}
		// Setup listeners for the start and stop recognition buttons
		startRecBtn.addEventListener('click', startRec, false);
    }}

Comments