Skip to content

Instantly share code, notes, and snippets.

@marchawkins
Created March 18, 2014 04:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save marchawkins/9613799 to your computer and use it in GitHub Desktop.
Save marchawkins/9613799 to your computer and use it in GitHub Desktop.
Using the datejs library (http://www.datejs.com/) to process natural language speech and return a specific date, and speak the result with the html 5 speech synthesis api. There seems to be a few bugs when combining relative dates ("today", "tomorrow") with times; all times seem to render as AM. Slight bug with the speech as it sometimes says "X…
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-12">
<p>Click a date below:</p>
<ul>
<li><a href="#" title="Today" class="date-link">Today</a></li>
<li><a href="#" title="Tomorrow" class="date-link">Tomorrow</a></li>
<li><a href="#" title="Tomorrow at 7am" class="date-link">Tomorrow at 7:00 AM</a></li>
<li><a href="#" title="Yesterday at 5pm" class="date-link">Yesterday at 5:00 PM</a><br/><small><em>This is broken, always displayed as 5am</em></small></li>
<li><a href="#" title="Next Monday" class="date-link">Next Monday</a></li>
<li><a href="#" title="March 30th" class="date-link">March 30th</a></li>
<li><a href="#" title="March 30th at 8pm" class="date-link">March 30th at 8:00 PM</a></li>
<li><a href="#" title="5 Days from Now" class="date-link">+ 5 days</a></li>
</ul>
</div><!-- .col -->
<div class="col-md-8 col-sm-8 col-xs-12">
<div class="panel panel-default">
<div class="panel-heading">Natural Language Demo</div>
<div class="panel-body">
<p>Full JS date:<br/><input id="date-full-output" class="form-control"/></p>
<p>Spoken date:<br/><input id="date-spoken-output" class="form-control"/></p>
</div>
</div>
</div><!-- .col -->
</div><!-- .row -->
<script src="/assets/js/date.js"></script>
<script>
"use strict";
$(document).ready(function() {
$("a.date-link").click(function(event){
event.preventDefault();
var relativeDate = $(this).text(); // grab the text contained in the link
processDate(relativeDate); // process this text as a date
});
function processDate(myDate) {
if(myDate) {
var fullDate = Date.parse(myDate); // parse the date with DateJS
$("#date-full-output").val(fullDate); // write the returned date object to the textfield
var monthNames = new Array(12); // create array containing names of months
monthNames[0] = "January";
monthNames[1] = "February";
monthNames[2] = "March";
monthNames[3] = "April";
monthNames[4] = "May";
monthNames[5] = "June";
monthNames[6] = "July";
monthNames[7] = "August";
monthNames[8] = "September";
monthNames[9] = "October";
monthNames[10] = "November";
monthNames[11] = "December";
var weekdayNames = new Array(7); // create array containing names of days
weekdayNames[0] = "Sunday";
weekdayNames[1] = "Monday";
weekdayNames[2] = "Tuesday";
weekdayNames[3] = "Wednesday";
weekdayNames[4] = "Thursday";
weekdayNames[5] = "Friday";
weekdayNames[6] = "Saturday";
var hourNames = new Array(13); // create array containing names of hours
hourNames[0] = "twelve"; // we need 'twelve' here to account for 'midnight' (hour 0)
hourNames[1] = "one";
hourNames[2] = "two";
hourNames[3] = "three";
hourNames[4] = "four";
hourNames[5] = "five";
hourNames[6] = "six";
hourNames[7] = "seven";
hourNames[8] = "eight";
hourNames[9] = "nine";
hourNames[10] = "ten";
hourNames[11] = "eleven";
hourNames[12] = "twelve";
var ordinal = "";
var dayNum = fullDate.getDay(); // get day number of month
if(dayNum > 3 && dayNum < 21) { // determine correct ordinal based on day of month
ordinal = "th";
}
switch (dayNum % 10) {
case 1: ordinal = "st";
case 2: ordinal = "nd";
case 3: ordinal = "rd";
default: ordinal = "th";
}
var spokenDate = weekdayNames[fullDate.getDay()] + ", " + monthNames[fullDate.getMonth()] + " " + fullDate.getDate() + ordinal + ", " + fullDate.getFullYear(); // build a speakable date
$("#date-spoken-output").val(spokenDate); // write the spoken date string to the textfield
speakText(spokenDate);
} else {
$("#date-output").text('Please choose a date.');
}
}
// function to speak a response
var speakText = function(response) {
// setup synthesis
var msg = new SpeechSynthesisUtterance();
var voices = window.speechSynthesis.getVoices();
msg.voice = voices[2]; // Note: some voices don't support altering params
msg.voiceURI = 'native';
msg.volume = 1; // 0 to 1
msg.rate = 1; // 0.1 to 10
msg.pitch = 2; // 0 to 2
msg.text = response;
msg.lang = 'en-US';
speechSynthesis.speak(msg);
}
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment