Text-to-Speech API help!

Text-to-Speech API help!


Hi all! I’m making an engaging and interactive online textbook. I would like the text to be read aloud to the user, but am having trouble implementing a text-to-speech api.

HTML: (I used bootstrap if that makes a difference for implementing)

This gives me a play button on my page. I would like the user to be able to press the button to initiate the text-to-speech:

<span class="glyphicon glyphicon-play" id='button' aria-hidden="true"></span>

I’ve tried a lot of different ways of implementing the JS with no luck.

Thanks for all of your help!


Can you share your code, so we can take a look at what you have tried so far?


Hi randelldawson, here is the latest version:


<script src="//code.jquery.com/jquery.min.js"></script>
<script src="articulate.js"></script>

 <span class="glyphicon glyphicon-play" id='button' aria-hidden="true"></span>




My html seems to be disappearing when I try to include it?


I meant all your code (html, css, and JavaScript) and not just one line. I need to see that you are loading any needed external libraries to be able to use articulate function show above. If you have a Codepen or JSFiddle url, that would be best.

Do you see any errors in the browser’s console (Ctrl+Shft+J in Chrome)?


My apologies! I uploaded to jsfiddle: https://jsfiddle.net/#&togetherjs=dAv67B0D6n

Nothing at all is coming up in console


When I load that JSFiddle it is empty.


That is strange, I tried again, now it should work: https://jsfiddle.net/brookealynn6/zvndx655/#&togetherjs=dAv67B0D6n


You are loading two different versions of jQuery into your project. Loading multiple versions can cause odd side effects. I recommend sticking with the latest version and delete the one in the head section.

First time (in the head section):

    <script src="https://code.jquery.com/jquery-3.1.1.slim.js" integrity="sha256-5i/mQ300M779N2OVDrl16lbohwXNUdzL/R2aVUXyXWA=" crossorigin="anonymous"></script>

Second time (in the body section):

<!--     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> -->

You have at least one syntax issue affecting your code running. One such error is in the following line.

var jsonObj3 = JSON.parse('{Chapter3" : "A binary search tree can be used to implement a simple sorting algorithm. We insert all the values we wish to sort into a new ordered data structure—in this case a binary search tree—and then traverse it in order. The worst-case time of binary trees is O(n)^2. There are several schemes for overcoming this flaw with simple binary trees; the most common is the self-balancing binary search tree. If this same procedure is done using such a tree, the overall worst-case time is O(n log n),"}');

You are missing a " before Chapter 3".

Once you fix the above issue, you will have other errors show up in the console that you need to address one at a time. Once you resolve all the console errors and still can not get it working, reply back with more questions.

On a side note, why are you using JSON.parse to create the different objects. The following accomplishes the same thing:
var jsonObj = { Chapter1 : "A binary search tree is a rooted binary tree, whose internal nodes each store a key (and optionally, an associated value) and each have two distinguished sub-trees,commonly denoted left and right. The tree additionally satisfies the binary search property, which states that the key in each node must be greater than or equal to any key stored in the left sub-tree, and less than or equal to any key stored in the right sub-tree. Frequently, the information represented by each node is a record rather than a single data element. However, for sequencing purposes, nodes are compared according to their keys rather than any part of their associated records. The major advantage of binary search trees over other data structures is that the related sorting algorithms and search algorithms such as in-order traversal can be very efficient; they are also easy to code."};

Also, instead of having a different variable for each chapter, I would put them all in the same object like:

var jsonObj = {
  Chapter1: "text string #1",
  Chapter2: "text string #2",
  Chapter3: "text string #3"

The you can access a specific chapter the same way as you were doing, but using the same object (jsonObj).


I’ve edited your post for readability. When you enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

This is why your HTML was invisible in your first post.


Thank you so much for your quick responses and help! I will fix these changes and post followup questions here. I appreciate this so much thank you!


Thank you for letting me know!