Text to Speech in website for free

Hello,

We are going to make our website able to talk.  lots of people hate reading so we are adding a feature into our website that website can read the text for user. When the user click Read this for me button it will start read the content

so here am sharing the code . before that we are using responsive voice for that. and its a free service. so lets go and create an account and get our key

https://app.responsivevoice.org/login

So lets code

<script src="https://code.responsivevoice.org/responsivevoice.js?key=6AqfGK6s"></script> <!-- replace with KEY-->
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
 
<textarea id="text" cols="45" rows="3" >
<!-- replace with your text START-->
Web designers generally have nothing to do with creating content for their projects. Even so, the look of a site can be incomplete if no words are included. Web designers need to find ways to incorporate copyright-free content into their designs to provide clients with a look that is as finished as possible.

Creating a prototype website that also contains copy and images is the only way to help the client understand what the concept behind your design is. Without these elements, the finished product can look quite odd, and the client won’t be able to mentally project his own content uploaded on the site.
<!-- replace with your text  END-->
</textarea>
 

<select id="voiceselection"></select> 
 
<input 
  onclick="responsiveVoice.speak($('#text').val(),$('#voiceselection').val());" 
  type="button" 
  value="Read this for me" 
/>
 
<script>
        //Populate voice selection dropdown
        var voicelist = responsiveVoice.getVoices();
        var vselect = $("#voiceselection");
        $.each(voicelist, function() {
                vselect.append($("<option />").val(this.name).text(this.name));
        });
</script>

<script src="https://code.responsivevoice.org/responsivevoice.js?key=6AqfGK6s"></script>  <!-- replace with KEY-->
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script> 
function getSelectionText() {
    var text = "";
    if (window.getSelection) {
        text = window.getSelection().toString();
    // for Internet Explorer 8 and below. For Blogger, you should use &amp;&amp; instead of &&.
    } else if (document.selection && document.selection.type != "Control") { 
        text = document.selection.createRange().text;
    }
    return text;
}
$(document).ready(function (){ // when the document has completed loading
   $(document).mouseup(function (e){ // attach the mouseup event for all div and pre tags
      setTimeout(function() { // When clicking on a highlighted area, the value stays highlighted until after the mouseup event, and would therefore stil be captured by getSelection. This micro-timeout solves the issue. 
         responsiveVoice.cancel(); // stop anything currently being spoken
         responsiveVoice.speak(getSelectionText()); //speak the text as returned by getSelectionText
      }, 1);
   });
});
</script>

Hope this helpful for you ..