Get Started

Twilio Client Text to Speech

Twilio Client makes it easy to bring any TwiML functionality into the browser, including text to speech using the Say verb. Twilio Client can be used to offer a spoken version of your website content, rss feeds, read important updates, provide live commenting and more.

Usage

A user enters the text to be spoken into a text field and selects a male or female voice. The user clicks a button labelled 'Speak to Me', which will read the text out loud.

Concepts

This HowTo demonstrates browser calling using Twilio Client, specifying an outgoing connection to a Twilio Applications, and creating TwiML call logic using the <Say> verb.

Download

browser-text-to-speech.zip

Implementation

  1. Generate a Twilio Capability Token with permissions to make an outgoing connection
  2. Create javascript to setup a Twilio.Device and HTML input fields for the text to speak
  3. User clicks a button which triggers javascript to connect to the Application specified in the TwilioCapability. The the text to speak is sent as a parameter
  4. Twilio requests the requests the Voice URL specified in the Application which has responds with TwiML instructions to speak the text.
  5. Twilio establishes a connection Twilio and the user's browser and the user hears the text spoken.

Get Started

  • 1

    • Create a capability token to securely bind Twilio Client to your account and also give the device the ability to make outbound calls to a Twilio Application.

      • howtos/browser-text-to-speech/browser-text-to-speech.php
        require_once('Services/Twilio/Capability.php');
        
        $ACCOUNT_SID = 'ACxxxxxxxxxxxxxxx';
        $AUTH_TOKEN = 'xxxxxxxxxxxxxxxxx';
        $APP_SID = 'APxxxxxxxxxxxxxxx';
        $token = new Services_Twilio_Capability($ACCOUNT_SID, $AUTH_TOKEN);
        $token->allowClientOutgoing($APP_SID);
            
  • 2

    • Create HTML input fields for the text to be spoken, voice gender and submit buttons.
    • howtos/browser-text-to-speech/browser-text-to-speech.php
      		<p> 
      			<label for="dialogue">Text to be spoken</label> 
      			<input type="text" id="dialogue" name="dialogue" size="50"> 
      		</p> 
      		<p> 
      			<label for="voice-male">Male Voice</label> 
      			<input type="radio" id="voice-male" name="voice" value="1" checked="checked"> 
      			<label for="voice-female">Female Voice</label> 
      			<input type="radio" id="voice-female" name="voice" value="2"> 
      		</p> 
      		<p> 
      			<input type="button" id="submit" name="submit" value="Speak to me"> 
      		</p> 
          
    • Add javascript to setup a Twilio.Device with the capability token. Use jQuery to bind the click event of the submit button to javascript speak function.
    • howtos/browser-text-to-speech/browser-text-to-speech.php
      		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
      		<script type="text/javascript" src="//static.twilio.com/libs/twiliojs/1.1/twilio.min.js"></script>
       
      		<script type="text/javascript"> 
       
       			Twilio.Device.setup("<?php echo $token->generateToken();?>",{"debug":true});
      
      			$(document).ready(function() {
      				$("#submit").click(function() {
      					speak();
      				});
      			});
       
      			function speak() {
      				var dialogue = $("#dialogue").val();
      				var voice = $('input:radio[name=voice]:checked').val();
       
      				$('#submit').attr('disabled', 'disabled');
       
      				Twilio.Device.connect({ 'dialogue' : dialogue, 'voice' : voice });
      			}
       
      			Twilio.Device.disconnect(function (conn) {
      				$('#submit').removeAttr('disabled');
      			});
          
  • 3

    • When the user clicks the 'Speak to me' button, the javascript speak function is invoked. This function disables the submit button and tells Twilio.Device to connect. The value of the form fields are passed as parameters. When the Twilio device disconnects the submit button is re-enabled.
  • 4

    • Twilio requests the Voice Url specified in the Application for instructions on how to handle the call logic. The form parameters are included in the request.

    • The Voice URL specified in the Application will respond to Twilio's request with TwiML.

  • howtos/browser-text-to-speech/incoming_call.php
    <?php
    	header('Content-type: text/xml');
    	echo '<?xml version="1.0" encoding="UTF-8" ?>';
    
    	$dialogue = trim($_REQUEST['dialogue']);
    	$voice = (int) $_REQUEST['voice'];
    
    	if (strlen($dialogue) == 0)
    	{
    		$dialogue = 'Please enter some text to be spoken.';
    	}
    
    	if ($voice == 1)
    	{
    		$gender = 'man';
    	}
    	else {
    		$gender = 'woman';
    	}
    ?>
    <Response>
    	<Say voice="<?php echo $gender; ?>"><?php echo htmlspecialchars($dialogue); ?></Say>
    </Response>
        

Our TwiML performs text to speech using the <Say> verb, and includes a 'gender' attribute with the appropriate value that as specified in the form. For a complete overview of TwiML (Twilio's XML) see the TwiML documentation.

  • 5

    • Twilio processes the TwiML that was returned and speaks the text through the browser, then disconnects the call. Twilio.Device.disconnect callback will be invoked at this time and the submit button is re-enabled.