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!

Hi randelldawson, here is the latest version:

HTML:

<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>

JS:

$(button).articulate('speak');

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

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

Nothing at all is coming up in console

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

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.

markdown_Forums

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!