Audio Commands

Experiment with audio commands with Annyang and WaveSurfer

by craigcav

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/annyang/2.4.0/annyang.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/SpeechKITT/0.3.0/speechkitt.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/wavesurfer.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/wavesurfer.js/1.2.3/plugin/wavesurfer.microphone.min.js"></script>
<div id="waveform"></div>

CSS

#skitt-ui {
  height: 80px;
}

JavaScript

annyang.addCommands({
  'add new ticket': function() {
    alert('I\'m going to add a new ticket now!');
  }
});

// Tell KITT to use annyang
SpeechKITT.annyang();

// Define a stylesheet for KITT to use
SpeechKITT.setStylesheet('//cdnjs.cloudflare.com/ajax/libs/SpeechKITT/0.3.0/themes/flat.css');

SpeechKITT.setInstructionsText('Example:');
SpeechKITT.setSampleCommands(['Add New Ticket']);

// Render KITT's interface
SpeechKITT.render();

var wavesurfer = WaveSurfer.create({
  container: '#waveform',
  waveColor: 'violet'
});

var microphone = Object.create(WaveSurfer.Microphone);

microphone.init({
  wavesurfer: wavesurfer
});

microphone.on('deviceReady', function(stream) {
  console.log('Device ready!', stream);
});
microphone.on('deviceError', function(code) {
  console.warn('Device error: ' + code);
});

annyang.addCallback('start', microphone.start.bind(microphone));
annyang.addCallback('end', microphone.stop.bind(microphone));