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>
Text to Speech Highlighted Selected Text
Use this code for read text when we highlighting it ..
<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 ..

Ajith Jojo Joseph

Hire Me for Freelancing $30/Hour ,
Contact via email : [email protected]

Share with your friends:

Comments are closed.

Export html table to excel, pdf, csv format using Datatable

Do you know how to export html table to excel, pdf, CSV, or excel format using Datatable? If you don’t […]

August 4, 2022

Instagram Hashtag API PHP and JavaScript Integration with RapidAPI

Do you know how to integrate Instagram Hashtag API with your website? In this tutorial, I will show you how […]

August 2, 2022

How to host React Application into Cpanel – Routes not working Htaccess fix

Do you know how to host react applications into Cpanel? After building your react application. you will get an index.html […]

July 28, 2022

How to get user Public IP Address using Javascript

Do you know how to get the user IP address using javascript? I will show you how. Today we are […]

July 27, 2022

Digital Marketing Toolkit

Get Free Access to Digital Marketing Toolkit. You can use all our tools without any limits

Get Free Access Now