Twilio Voice Recordings

Announcements

Design Notebooks

Let’s take a few minutes to review your Design Notebook entries from last week.

Partner Meetings

Project Teach

Tracy Perron has provided contact info for the Nursing School students working on site at Project Teach. I’ll share that contact info with the Team Teach directly.

Columbus School

Tracy Perron has arranged for Mission Slim-possible to have direct access to the school nurse at Columbus. I’ll share her contact info with the team.

History Department

Team Infinitime should make direct contact with the history department to collect user research.

Twilio Voice Recordings

Twilio’s Text-to-Speech engine is cool, but…

  • Language limitations (even Alice supports only 26 languages/dialects)
  • Sometimes we want greater flexibility with specific voices, i.e. celebrities
  • Synthesized speech just isn’t as authentic/compelling/trusted as natural human speech

Today we’ll be using Twilio’s <Play> and <Record> TwiML verbs.

  1. Download the source code for this week’s examples from the class Github Organization.
  2. Unzip the  repository on your local machine and upload the contents to a new folder in the ‘www’ folder on your TCNJ web account.
  3. Let’s try out the examples one by one.

Basic Voice Playback

Instead of using Twilio’s text-to-speech engine, let’s play back a recorded message.

  1. After you’ve uploaded the basic-voice.xml file to your TCNJ web account, log into Twilio, click into your number detail page, and edit the Voice request url for your number to point to ‘basic-voice-playback.xml’.
  2. Call your Twilio number.
  3. What happened?
<!-- basic-voice-playback.xml -->
<?xml version="1.0" encoding="UTF-8"?>
<Response>
    <Play>http://www.mediamesis.net/imm/3hellos2.wav</Play>
</Response>

Twilio <Play> documentation

Gathering Input

Now let’s use the <Play> verb with <Gather>.

  1. Upload matrix.xml and checkpill.php to your TCNJ web account and edit the Voice request url in the Twilio Dashboard for your number to point to your edited file.
  2. Call your Twilio number.
  3. What happened?
 <!-- matrix.xml -->
<?xml version="1.0" encoding="UTF-8"?>
<Response>
    <Gather action="./check_pill.php" method="get" finishOnKey="*">
        <Play>http://www.mediamesis.net/imm/redpill.mp3</Play>
        <Say>Press 1 to take the red pill.</Say>
        <Say>Press 2 to take the blue pill.</Say>
    </Gather>
</Response>
 /* checkpill.php */
<?php
$pill = $_REQUEST['Digits'];

header("content-type: text/xml");
echo "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n";

if($pill == 1){ // red pill
    echo "<Response>";
    echo "<Play>http://www.mediamesis.net/imm/bluepill.mp3</Play>";
    echo "</Response>";
} else if($pill = 2) { // blue pill
    echo "<Response>";
    echo "<Play>http://www.mediamesis.net/imm/matrix66.mp3</Play>"
    echo "</Response>";
} else { // other
    echo "<Response>";
    echo "<Say>Sorry, I didn't understand your selection. Please try again.</Say>"; 
    echo "<Redirect method=\"POST\">http://yourserver/matrix.xml</Redirect>";
    echo "</Response>";
}

“Please Leave a Message…”

Now let’s try building a simple answering machine.

  1. Upload voicemail.xml and record.php to your TCNJ web account and edit the Voice request url in the Twilio Dashboard for your number to point to your edited file.
  2. Call your Twilio number.
  3. What happened?
<!-- voicemail.xml -->
<?xml version="1.0" encoding="UTF-8"?>
<Response>
   <Say>Leave a message after the beep. Press the pound key when you're done recording.</Say>
  <Record 
      action="http://www.tcnj.edu/~thompsom/imm-470-03/voice-recordings/record.php"
      method="GET"
      maxLength="20"
      finishOnKey="#"
   />
</Response>
/* recording.php */
<?php
header("content-type: text/xml");
echo "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n";

$recording = $_REQUEST['RecordingUrl']; 
$duration = $_REQUEST['RecordingDuration'];
?>
<Response>
 <Say>Thanks for calling. Your message was <?php echo $duration; ?> seconds long. Here's the message you left.</Say>
 <Play><?php echo $recording; ?></Play>
</Response>

Twilio <Record> Documentation

Save a voicemail to SoundCloud

Workflow for Creating Voice Menu Recordings

Basic flow

  1. Start with a flow diagram
  2. Prototype it using <Say>
  3. Create a script for the voice talent
  4. Record the messages
  5. Implement using <Play>

What about foreign languages/dialects?

Challenges

Twilio

Review the Twilio Audio Recording Best Practices.

Using Audacity or other audio recording software, create a voice menu + leave-a-message app that presents the caller with information about an upcoming IMM event (e.g. HackTCNJ) and prompts them to record a message about the event.

Create menu options for:

  • Date, time and location
  • An overview description of the event
  • A sponsor listing
  • Request the caller leave-a-message about the event

Amazon Echo

Amazon Lambda + Amazon Developer Console

TCNJ Webserver + Amazon Developer Console

Deploy the Count Example skill (uses php on TCNJ web account)

  1. Create an Amazon Developer Account
  2. Create an Amazon Alexa Skill in the Developer Console
  3. Follow the Amazon Alexa with PHP Hello World tutorial

Cordova

Deploy a demo app to a connected iPhone

Timeline.js

  • Experiment with adding Soundcloud files to a Timeline.js timeline
  • Try uploading a Twilio voice recording to Soundcloud using the save2sc.php script

Assignment

Reading

Design Notebooks

  • Create a new slide in your notebook and title it “Year of the bot”
  • Close read the The search for the killer bot article
  • Write a paragraph or two commenting on the premise of the article. What evidence have you personally experienced that confirms or refutes the primary assertion of the article.

Questions for Your Partner Organization (team)

  • Create a list of questions for your Partner Organization about their services and most pressing communication problems.
  • Create another slide in your Design Notebook, titling it “Interview Questions” and today’s date., and drop in your list of questions from above.
  • Next week, you’ll combine your questions with those from your teammates to create a master list.

*Submit the link to your Design Notebook to Canvas before we meet again next week

Leave a Reply

Your email address will not be published. Required fields are marked *