Testing Twilio's Text-to-Speech Engine Using Twilio Client

Twilio Client is more than just a phone in your browser, it’s an audio pipe into Twilio. So in addition to being able to create a “soft phone”, you can make all kinds of other interesting applications. In this tutorial we’ll make a simple text-to-speech (TTS) tester.

Every now and then, I see a post in the forum or an e-mail to help@twilio.com asking how to test Twilio’s text-to-speech engine. The person wants to hear how a piece of dialogue will sound in the male and female voices. Up until now, the answer has always been write it out as TwiML, tie it to a phone number, and give the number a call. But for folks working on getting their wording just right, constantly dialing, editing, and redialing is a pain. And for developers working internationally, it’s both tedious and costly. Using Twilio Client, we can change all that.

For this tutorial we’ll create a simple HTML form that let’s a person type out some text and choose between male and female voices. When they submit the form, Twilio Client will connect to Twilio and speak the text the person typed out in the browser–no need to pick up a phone and only a fraction of the cost.

To get started, we’ll write some TwiML that uses <Say> to speak any text passed to it.

[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 $dialogue; ?></Say>
</Response>
[/php]

Then, we’ll go to our Twilio Apps page and create a new app for our TwiML. Let’s call it “TTS Tester”. Take note of the app’s SID, we’ll need it later in the tutorial.

Next, we’ll create the form a person can use to enter text to be spoken.

[html]
<html>
<head>
<title>TTS Tester</title>
</head>
<body>
<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>
</body>
</html>
[/html]

Finally, we’ll tie the two together using Twilio Client. When a person submits the form, we’ll use some Javascript to collect the input and then use Twilio Client to send that information to our TTS Tester Twilio app and speak the text right in the browser.

[php]
<?php
require_once(‘TwilioCapability.php’);

// Your account SID. Find it at the top of your Dashboard page.
$ACCOUNT_SID = ‘ACXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX’;
// Your auth token. Also on the top of your Dashboard.
$AUTH_TOKEN = ‘XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX’;
// The App SID for the TTS Tester app. We made this in the section above.
$APP_SID = ‘APXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX’;

$token = new TwilioCapability($ACCOUNT_SID, $AUTH_TOKEN);
// Set the permissions to allow your code to make outbound
// connections to Twilio.
$token->allowClientOutgoing($APP_SID);
?>
<html>
<head>
<title>TTS Tester</title>
<!– Some jQuery to make our lives easier –>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<!– The Twilio Client Javascript library –>
<script type="text/javascript" src="http://static.twilio.com/libs/twiliojs/1.0/twilio.js"></script>

<script type="text/javascript">

// Initialize Twilio Client
Twilio.Device.setup("<?php echo $token->generateToken();?>");

$(document).ready(function() {
// When someone clicks the submit button, speak.
$("#submit").click(function() {
speak();
});
});

function speak() {
// Get the values of the form.
var dialogue = $("#dialogue").val();
var voice = $(‘input:radio[name=voice]:checked’).val();

// Disable the button while we’re speaking.
$(‘#submit’).attr(‘disabled’, ‘disabled’);

// Send the form values to our TTS Tester app and use
// Twilio Client to speak the text in the browser.
Twilio.Device.connect({ ‘dialogue’ : dialogue, ‘voice’ : voice });
}

// When we’re done speaking the text, enable the button again.
Twilio.Device.disconnect(function (conn) {
$(‘#submit’).removeAttr(‘disabled’);
});

</script>
</head>
<body>
<!– Same code as the prior section –>
<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>
</body>
</html>
[/php]

And that’s all there is to it. You can grab the source code on github and enhance it with features like a textarea instead of a text field and additional options for the French, German, and Spanish accented voices.

Fun and Profit

Every week we hold a developer contest with awesome prizes. This week, it’s all about Twilio Client. Build an interesting application using Twilio Client and you could win a ticket to the Twilio <Conference> and a MacBook Air! Get all the details here.