Reading Time: 2 minutes

I’ve been frustrated with a lot of different things this week, so I decided to take my mind off of things for a few minutes and play with something new today. In doing so, I may have created the most obnoxious use of two JavaScript APIs imaginable. Don’t do this at home. Or anywhere else, for that matter.

Good Ideas come from Good APIs

There’s two, lesser-known and under-appreciated JavaScript APIs called Page Visibility and Speech Synthesis. They’re both rather simple APIs that can open up a world of options. Let’s briefly discuss.

Page Visibility

Page Visibility is the really tiny little JavaScript API that’s been hanging around in our browsers for a little while. It’s a property that’s assigned to the document that tells you if someone is actively viewing the page. If you pull up your JavaScript console and try document.hidden you should get the boolean value false returned.

Even better, there’s also a visibilitychange event that fires when the value of document.hidden changes:

          var evtname = visProp.replace(/[H|h]idden/,'') + 'visibilitychange';
          document.addEventListener(evtname, _this.functions.handleVischange);

So not only can you find out if someone is currently looking at your page, you can find out if they got tired of looking at it, too.

Speech Synthesis

Speech Synthesis is brand new to the web browser and currently only works in Chrome. FireFox has allusions to it, though. If you inspect the FireFox document object in the console, there’s some undocumented speech object in there. The fundamentals of the speech API are that you need to create an “utterance” and then speak that utterance, like so:

var msg = new SpeechSynthesisUtterance('Hello World');
window.speechSynthesis.speak(msg);

The tutorial over at HTML5Rocks.com shows that there’s plenty of options for the utterance that you’ve created. You can change the voice, the rate, the pitch, and even the language of your utterance before you speak it.

Bad Ideas

These two APIs are pretty darn nifty. There’s lots of very good things you could do with either of them. The good ideas with these APIs abound. But there’s also a bad idea…a very bad idea:

Merge the two.

• Tell the user, “don’t go, I need you!” every time the user looks at another page.
• Tell the user, “I knew you’d come back” every time the user comes back to your page

You know…like this (just open another tab):

Please

Don’t actually do this. This may be the most obnoxious thing you can do with JavaScript on the internet. Find another way. Please.

For the kittens?