Talky to your Ghosty

(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...

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