Speak the text on a page

Posted on 2011-10-08
Last Modified: 2012-05-12
I want to create a simple web page that, when it runs, the computer "speaks" the text on the web page.

For example, I have Microsoft Narrator (an accessible tool for the blind) and it speaks the words on the web page, but it also speaks EVERYTHING about the browser, the URL, what menu options are available, etc.  I just want it to speak the text I have written.

I am pretty sure there should be a way to do this.  I would imagine there are some web pages that cater to the blind community.
Question by:knowlton
    LVL 35

    Expert Comment

    You can control the Opera browser completely via voice commands:

    I've never done that nor installed the required libraries, but to me it sounds like the "Read" command will actually only read text on the page.
    Additionally, you will have commands like "move down", "scroll down", "next heading" and "next element" to quickly navigate to the place you wish to hear.

    As this is a feature that the browser needs to support, I don't think you can control it from the developing or server side.
    LVL 5

    Author Comment

    I don't want a page the understands spoken commands.  But that is very interesting to find out that Opera has some support for it.

    I want a page that will read the text on a web page (or the alt property for an <img> tag, for example) -- but not like Microsoft Narrator, which reads EVERYTHING on the screen.
    LVL 35

    Assisted Solution

    I understood what you meant.
    Opera not only reacts to spoken commands, but also reads the text for you. I thought that would result from checking the link I posted.

    If you are interested in accessibility for the blind, then blind people not only need to hear the text, they also need to be able to get there in the first place - which is why Opera supports voice both actively and passively.
    LVL 81

    Accepted Solution

    may help :

    <textarea cols="80" rows="3">I want to create a simple web page that, when it runs, the computer speaks the text on the web page.</textarea>
    <br />
        var text = document.getElementsByTagName("textarea")[0].value.replace(/\s/g,"+");
        document.write('<iframe src="' + text + '" style="display:none"></iframe>');
    <br />

    Open in new window

    LVL 5

    Author Closing Comment


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Looking for New Ways to Advertise?

    Engage with tech pros in our community with native advertising, as a Vendor Expert, and more.

    Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
    Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
    In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
    The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

    759 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    12 Experts available now in Live!

    Get 1:1 Help Now