Skip to content

Instantly share code, notes, and snippets.

@alrra

alrra/index.html

Created September 28, 2013 13:08
Show Gist options
  • Save alrra/6741915 to your computer and use it in GitHub Desktop.
Save alrra/6741915 to your computer and use it in GitHub Desktop.
Download ZIP
Feature detection test for the Web Speech Synthesis API
Raw
index.html
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>Feature detection test for the Web Speech Synthesis API</title>
<style>
.no-js .content,
.feature .no,
.no-feature .yes,
.no-feature .example {
display: none;
}
</style>
<script>
(function (window, undefined) {
"use strict";
var docElement = document.documentElement,
SpeechSynthesisUtterance = window.webkitSpeechSynthesisUtterance ||
window.mozSpeechSynthesisUtterance ||
window.msSpeechSynthesisUtterance ||
window.oSpeechSynthesisUtterance ||
window.SpeechSynthesisUtterance;
function addClass(className) {
docElement.className = docElement.className + ' ' + className;
}
docElement.className = docElement.className.replace(/(^|\s)no-js(\s|$)/, '$1js$2');
if ( SpeechSynthesisUtterance !== undefined ) {
addClass('feature');
} else {
addClass('no-feature');
}
})(window);
</script>
</head>
<body>
<noscript>Please <a href="http://www.enable-javascript.com/" target="_blank">enable JavaScript</a>. Thank You! :D</noscript>
<div class="content">
<h1 class="yes">yap, it has support :D</h1>
<h1 class="no">nope, it doesn't have support :(</h1>
<div class="example">
e.g.:
<button type="button" id="btn">Click Me!</button>
</div>
</div>
<script>
(function (window, undefined) {
'use strict';
document.getElementById('btn').addEventListener('click', function () {
var speech,
SpeechSynthesisUtterance = window.webkitSpeechSynthesisUtterance ||
window.mozSpeechSynthesisUtterance ||
window.msSpeechSynthesisUtterance ||
window.oSpeechSynthesisUtterance ||
window.SpeechSynthesisUtterance;
if ( SpeechSynthesisUtterance !== undefined ) {
speech = new SpeechSynthesisUtterance()
speech.text = 'yes, I have support for this feature!';
speech.rate = .5;
speech.lang = "en-US";
speechSynthesis.speak(speech);
}
});
})(window);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment