Introduction
Many Web sites, particularly those that feature articles or blog posts, employ specially crafted print style sheets. That way, a user can print out the relevant content without wasting paper on navigation, ads, or anything else not germane to the overall subject matter of the Web page.
Articulate.js, a jQuery plugin, is what I consider the narrative equivalent — with as little as one line of code, it enables developers to create links that allow users to click, sit back, and listen to the browser read aloud the important content of a Web page. In some ways, it can turn a thoughtful essay or article into a mini podcast. And because it uses built-in JavaScript functionality, no browser extensions or other system software is needed.
Give it a try and use the following buttons to voice the above — with a little extra at the end:
Visit the desktop version of this Web site for demos and a developer's guide.
How Does It Work?
Articulate.js uses the Speech Synthesis interface of the Web Speech API, which is now part of JavaScript in most major browsers, including the latest versions of Edge, Safari, Chrome, Opera, Firefox, iOS Safari, and Chrome for Android. Here are the current usage stats from caniuse.com.
The lightweight Articulate.js plugin (about 6K) allows you to leverage the powerful selector options of jQuery to specify which parts of the Web page that you want spoken. For example, depending on how the Web page is organized, a single line of code, like the following, can direct the browser to speak the entire contents of an article or blog post:
$('article').articulate('speak')
Or how about only the primary headers and paragraphs:
$('h1,h2,p').articulate('speak')
Internally, Articulate.js clones the matched set of elements and all their descendant elements and text nodes. It then parses this clone using a default set of rules, deciding what should be spoken and ignored, then adding the appropriate pauses to make everything sound more like a narrative.
And it's completely configurable. With Articulate.js, you can, among other things:
- Create links allowing the user to pause, resume, and stop speaking.
- Change the rate and pitch of the speaking voice.
- Specify HTML tags to be spoken that would otherwise be ignored, and vice versa.
- Perform a search and replace within the text, which is helpful for abbreviations. For example, you can specify that all instances of
i.e.
to be spoken asthat is
. - Specify blocks of text to be ignored. For example, a sentence that reads
click here for more information
does not need to be spoken. - Specify words to be spelled out.
- Specify copy in specially crafted comment tags to be spoken that is otherwise hidden on the screen.
General Notes
You will notice that the Speech Synthesis interface is subtly different across browsers and operating systems. For example, the default rate of speech will sound somewhat faster on an iPhone as opposed to its desktop implementations. Developers can provide input sliders or radio buttons for users to fine-tune their experience.
In addition, depending on the operating system and device, browsers expose different voices to the Speech Synthesis interface,
and these voices can be selected to override the default native
voice. The latest release now includes methods that allow
the developer to create dropdown menus automatically that allow the user to choose a different voice.
Also, only one voice can be heard at a time — no multitracking like in a music studio. This is a limitation of the Web Speech API rather than Articulate.js.
Use Cases
The inspiration for Articulate.js came from the idea that with a simple click, I can enjoy having Web site articles read to me when it's not convenient or desirable to be staring at a screen — particularly when using my phone. Maybe while lying in the park with my eyes closed or while I'm preoccupied with preparing dinner. The goal was to allow developers to make the appropriate customizations so that it sounds less like a screen reader and more like a friend is reading the Web page to you.
Of course, Articulate.js can be used as a voice option for anything on the page, from enunciating a single word to conveying content not displayed on the screen. If you're interested, download the source code and experiment. And, most importantly, have fun with it!
About Adam Coti
I've been a freelance front-end Web developer for twenty years. My availability varies, but feel free to contact me if you're interested in the services I offer. My Web site with portfolio and client list is at www.purefreedom.com. Also, take a look at some recent articles I've written for CSS-Tricks.