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.
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.
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.
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.
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);
<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>
<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');
});
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.
<?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.