Javascript Snippets

Talky to your Ghosty

Add speech interactions to your blog posts with these itsy bitsy javascripties! AnnYang is a tiny javascript library that lets your visitors control your site with voice commands. It supports multiple languages, has no dependencies, weighs just 2kb and is free to use. And there are more...

Jen Wallace

May 19, 2020 • 4 min read

(This one has only been verified to work on Chrome. Scroll down for links to more voice control scripts.)

Try it right now... say Show my report.

To get this simple example working, in the editor for this post, I simply inserted 2 HTML cards:

<script src="//cdnjs.cloudflare.com/ajax/libs/annyang/2.6.0/annyang.min.js"></script>

<style>
    
    #myreport {
        position:fixed;
        z-index:1000;
        bottom:-600px;
        right:10px;
        width:33vw;
        -webkit-transform:rotate(-15deg);
        -moz-transform:rotate(-15deg);
        -ms-transform:rotate(-15deg);
        -o-transform:rotate(-15deg);
        transform:rotate(-15deg);
        -webkit-box-shadow:2px 1px 6px 1px #555;
        box-shadow:2px 1px 6px 1px #555
    }
    
    .hide {
        display:none
    }
    
</style>


<script>
  "use strict";

  // first we make sure annyang started succesfully
  if (annyang) {

    // define the functions our commands will run.
    var showMy = function(type) {
      $('#myreport').show().animate({
        bottom: '-100px'
      }).delay('3000').animate({
        bottom: '-600px'
      });
    }

    // define our commands.
    var commands = {
      'show :type report':    showMy,
    };

    // Add voice commands to respond to
    annyang.addCommands(commands);

    // Start listening.
    annyang.start();
  } else {
    $(document).ready(function() {
      $('#unsupported').fadeIn('fast');
    });
  }

  var scrollTo = function(identifier, speed) {
    $('html, body').animate({
        scrollTop: $(identifier).offset().top
    }, speed || 1000);
  }
  </script>



<p class="voice_instructions">Try it right now... say Show my report.</p>
<img src="https://www.talater.com/annyang/images/tpscover.jpg" id="myreport" class="hide">

And there are others...

5 Voice Control JavaScript Libraries for Developers

We can even add some facial recognition and artificial intelligence into the mix...