JavaScript SpeechSynthesis API

JavaScript SpeechSynthesis API

As the web continues to be the medium for all users, standards bodies need to continue to provide new APIs to enrich user experience and accessibility. One underused API for unsighted users is speechSynthesis, an API to programmatically direct the browser to audibly speak any arbitrary string.

The Code

You can direct the browser to utter speech with window.speechSynthesis and SpeechSynthesisUtterance:

window.speechSynthesis.speak(
    new SpeechSynthesisUtterance('Hey Jude!')
)

speechSynthesis.speak will robotically tell the user anything you provide as a SpeechSynthesisUtterance string. Support for this API is available in all modern browsers.

I wouldn’t consider speechSynthesis as a replacement for native accessibility tools, but this API could be used to improve what native tools provide!

Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring
  • Camera and Video Control with HTML5

    Camera and Video Control with HTML5

    Client-side APIs on mobile and desktop devices are quickly providing the same APIs.  Of course our mobile devices got access to some of these APIs first, but those APIs are slowly making their way to the desktop.  One of those APIs is the getUserMedia API…

  • Regular Expressions for the Rest of Us

    Regular Expressions for the Rest of Us

    Sooner or later you’ll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In…

  • MooTools TextOverlap Plugin

    MooTools TextOverlap Plugin

    Developers everywhere seem to be looking for different ways to make use of JavaScript libraries. Some creations are extremely practical, others aren’t. This one may be more on the “aren’t” side but used correctly, my TextOverlap plugin could add another interesting design element…

  • Introducing MooTools Dotter

    Introducing MooTools Dotter

    It’s best practice to provide an indicator of some sort when performing an AJAX request or processing that takes place in the background. Since the dawn of AJAX, we’ve been using colorful spinners and imagery as indicators. While I enjoy those images, I am…


Source link
Shopping Cart
Scroll to Top