Skip to content

Instantly share code, notes, and snippets.

@thefrontender

thefrontender/HTML5-dictate

Created November 9, 2011 05:26
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save thefrontender/1350500 to your computer and use it in GitHub Desktop.
Save thefrontender/1350500 to your computer and use it in GitHub Desktop.
Download ZIP
A quick dictation demo using new Speech, Blobs, Drag n Drog APIs from HTML5. Use latest version of Chrome.
Raw
HTML5-dictate
<!doctype html>
<html>
<head>
<title>Dictation with HTML5 - Using Speech, Blobs, Drag & Drop APIs</title>
</head>
<body>
<input id="dictate" type="text" speech x-webkit-speech />
<textarea id="post"></textarea>
<a href="#" id="dragout" draggable="true">Save Text file (drag to desktop)</a>
<script>
BlobBuilder = window.MozBlobBuilder || window.WebKitBlobBuilder || window.BlobBuilder;
URL = window.webkitURL || window.URL;
var source = document.getElementById('dictate'),
post = document.getElementById('post'),
file = document.getElementById("dragout"),
bb;
source.addEventListener('webkitspeechchange', function(e) {
// console.log(e);
post.value += '\n' + this.value;
}, false);
file.addEventListener("dragstart", function(e){
bb = new BlobBuilder();
bb.append(post.value);
blobUrl = URL.createObjectURL(bb.getBlob());
file.href = blobUrl;
file.dataset.downloadurl = "text/plain:dictation.txt:" + blobUrl;
e.dataTransfer.setData("DownloadURL", this.dataset.downloadurl);
//URL.revokeObjectURL(blobUrl);
}, false);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment