Integration of Indian Language Text-to-Speech Synthesis System to Website

Version 1.2, August 2019

Email: tts-mumbai@cdac.in, Phone: 022- 26201604 Ext 561

As a part of Technology Development for Indian Languages (TDIL) Program, under Ministry of Electronics and Information Technology(MeitY), Govt of India, Indian Language Text to Speech Consortium (headed by IIT Madras) developed TTS voices for Thirteen Indian Languages, viz. Hindi, Marathi, Tamil, Telugu, Malayalam, Kannada, Bengali, Odia, Gujarati, Rajasthani, Assamese, Manipuri, and Bodo, and Indian English. Now a framework has been developed, jointly by CDAC Mumbai and IIT Madras, to integrate the TTS voices into website. You may check the live demo at below urls:

http://tdil-dc.in/ttsapi/demo/

http://tdil-dc.in/ttsapi/demo/hindi.html

You will see a speaker icon at the right side top corner. Click on it, after few moments system would start reading aloud the content of the webpage. System highlights the text being spoken. By default it starts reading from the start in a sequential manner. Now, if you move the cursor on website, section of the text would get highlighted, and if you click on the highlighted area, system would speak aloud the corresponding text. Just refresh the page to stop.

You may enable this facility in your website, and for this just few lines of code need to be added in header section of the website.

After integration of this code,send us an email at tts-mumbai@cdac.in mentioning domain name of your website. We would put it into allowed domain list. This facility is being provided free of cost.>

Advantages of implementing TTS

Some Government websites where framework has been integrated

https://mdoner.gov.in
https://dpe.gov.in
https://epramaan.gov.in
https://cca.gov.in
https://www.delhitourism.gov.in
https://indiapost.gov.in
https://localization.gov.in

Steps to enable Text to Speech (TTS) feature into website

1. Attach below code to header section of your website, just above title tag:

<!---talkify start -->

<div style="float: right !important">

 <button id="button1" onclick="myFunction()"><img> <img src="https://tdil-dc.in/ttsapi/Talkify-master/speaker.png"  width="25" height="25" /></button>

<audio id="myAudio">

<source src="https://tdil-dc.in/ttsapi/Talkify-master/sample.ogg" type="audio/ogg">

<source src="https://tdil-dc.in/ttsapi/Talkify-master/sample.mp3" type="audio/mpeg">

</audio>

</div>

<script type="text/javascript" src="https://tdil-dc.in/ttsapi/Talkify-master/jquery-2.1.3.js"></script>

 <link rel="stylesheet" type="text/css" href="https://tdil-dc.in/ttsapi/Talkify-master/styles/talkify-playlist.css">

<link rel="stylesheet" type="text/css" href="https://tdil-dc.in/ttsapi/Talkify-master/styles/talkify-common.css">

<link rel="stylesheet" type="text/css" href="https://tdil-dc.in/ttsapi/Talkify-master/styles/talkify-audiocontrols.css">

<script type="text/javascript" src="https://tdil-dc.in/ttsapi/Talkify-master/dist/talkify.min.js"></script>

<style type="text/css">

    .talkify-audio-control {

  color: black;

}

.fa-2x {

  font-size: 20px !important;

}

 </style>

<script type="text/javascript">

function myFunction() {

document.getElementById("button1").disabled = true;

var x = document.getElementById("myAudio");

 x.play();

talkify.config.remoteService.host = 'https://tdil-dc.in/ttsapi';

talkify.config.remoteService.speechBaseUrl = '/indictts/';

talkify.config.remoteService.apiKey = 'f81de3ac-c229-41f7-8df6-0d3efdf39951';

talkify.config.ui.audioControls = {

  enabled: true, //<-- Disable to get the browser built in audio controls

  container: document.getElementById("player-and-voices")

};

  var player = new talkify.TtsPlayer()

    .enableTextHighlighting();

 var playlist = new talkify.playlist()

    .begin()

    .usingPlayer(player)

    .withRootSelector('*')

    .withTextInteraction()

    .build()

    .play();

}

</script>

<script src="https://tdil-dc.in/ttsapi/demo/28b687dd3d.js"></script>

  <script>

  if (window.parent && window.parent.parent){

    window.parent.parent.postMessage(["resultsFrame", {

      height: document.body.getBoundingClientRect().height,

      slug: "woqw6b6g"

    }], "*")

  }

</script>

<!---talkify end-->

2. Once you add this code, small speaker icon will appear on top right corner of website. Once you click on it, system would start reading the website, in sequential manner.

3. Now, if you move cursor on website, section of text would get highlighted, and if you click on highlighted area system would speak aloud the corresponding text

4. Size of Speaker icon can be adjusted by changing height and width in below line:

             <img src="http://tdil-dc.in/ttsapi/Talkify-master/speaker.png" width="25" height="25" />

5. At present system supports: Hindi, Marathi, Tamil, Telugu, Malayalam, Kannada, Odia, Bengali, Gujarati, and Indian English

6. System automatically detects the language of text and uses TTS voice of corresponding language

7. When system speaks aloud, words being spoken gets highlighted also

8. You may stop it any time by refreshing the page

Troubleshooting:

1. You hear the following message:

"sorry your website is not registered with us..."

Solution: To avail this service, website domain name needs to be registered with us. Send us email at tts-mumbai@cdac.in mentioning your domain name. We will put this domain name into the allowed list.

2. You hear only starting music, after that there is no speech output for content of the webpage.

Solution: Right click on the webpage, press Inspect element, select console and see the messages:

If you find messages related to Content Security Policy or mixed content and because of which Talkify's javascript/css files are not getting loaded from tdil-dc.in, then try the following :

a. put the following tag in header section of website:

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src https://tdil-dc.in 'unsafe-inline';script-src * 'unsafe-inline' 'unsafe-eval'">

b. If the above does not work, download Talify-master directory from the below link, put it at your website server and update the path of javascript/css files accordingly in the section of code that you have added in header section.

Talkify-master