HTML5 Siri

HTML5 Siri. Only Google Chrome supports it.

by Ken Z

HTML

<script src="http://demos.flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js"></script>
<h1>HTML5 Siri</h1>
<label>
    <input type="text" x-webkit-speech />
</label>

<p>
Possible commands:
<ul>
    <li>Ask for time</li>
    <li>"Say ____"</li>
    <li>"Ask me if I am ____"</li>
    <li>Ask its name (woot!)</li>
    </ul>
</p>
<p>
Examples:
<ul>
    <li>"What time is it?"</li>
    <li>"What time?"</li>
    <li>"Say Hi"</li>
    <li>"Ask me if I am hungry for a hamberger"</li>
    <li>"What's your name?"</li>
    </ul>
</p>
<p>
Supports:<br>
Browsers that supoort Speech-to-Text, ex: Google Chrome.
</p>
<div id="opt"></div>

CSS

*{
    box-sizing: border-box;
}
body{
    font-family: 'Arial';
}
h1{
    margin:0px auto;
    text-align: center;
}
input{
    margin: 100px 0 30px 50%;
    width: 40px;
    height:50px;
    font-size: 50px;
    border: 0px;
    background: lightyellow;
    outline: none;
    box-shadow: 0px 2px 7px #999;
    border-radius: 3px;
    cursor: pointer;
}
input:active{
    box-shadow: inset 0px 2px 5px #555;
}
.dialog{
    width:75%;
    height:100px;
    clear:both;
    background:#EEE;
    padding: 5px;
    margin-bottom: 10px;
}
.dialog.you{
    float:right;
}
.dialog.siri{
    float:left;
}

JavaScript

var vars = {
    "txt": $("input").attr("value"),
    "known": false,
    "regexp": {
        "say": /^say (.+)$/i,
        "ask": /^ask me if I am (.+)$/i,
        "time": /^(what is|what's|whats|what)( the)? time( is it)?( now)?$/i,
        "name": /^(What( is|'s|s) your name|Who are you)$/i,
        "badword": /(fuck|shit|bitch|ass)/i,
        "hi": /^(hi|hello|what(')?s up)$/i
    }
}

setInterval(function() {
    if ($("input").attr("value") != vars.txt) {
        vars.txt = $("input").attr("value");
        main();
    }
}, 200);

function main() {
    var txt = vars.txt,
        reg = vars.regexp;
    print(txt, false);
    for (var key in reg) {
        if (reg[key].test(txt) && txt != "") {
            var match = txt.match(reg[key])[1];
            switch (key) {
            case "say":
                print(match, true);
                known();
                break;
            case "ask":
                print("Are you " + match + "?", true);
                known();
                break;
            case "time":
                print("The time is " + new Date() + ".", true);
                known();
                break;
            case "name":
                print("Who me? I am Siri!", true);
                known();
                break;
            case "badword":
                print("Hey! Watch your language!", true);
                known();
                break;
            case "hi":
                print("Hi there!", true);
                known();
                break;
            }
        }
    }
    if (!vars.known) {
        print("I don't know what do you meant by \"" + txt + "\".", true)
    }
    reset();
}

function print(txt, siri) {
    var ele = $("<div>").addClass("dialog").html(txt).appendTo("div#opt").css("opacity", 0).animate({
        "opacity": 1
    }, 700);
    if (siri) {
        ele.addClass("siri");
    } else {
        ele.addClass("you");
    }
}

function known(ask) {
    vars.known = true
}

function...