Introduction to the

Text messages and audio recordings can be a great way to continue communication without accidentally picking up the phone. Twilio uses Twilio’s markup Language (TwiML) through the voice API to simplify this process and handle incoming calls accordingly.

TwiML provides [< Record >] (https://www.twilio.com/docs/voice/twiml/record), a verb, it can Record the voice of the caller, transcription, and can automatically generate text directly sent to your mobile phone. For those of you who are always on the move or too lazy to check your voicemail, you’ll never miss a message again. In this tutorial, you will learn how to transcribe voice calls into text messages using Twilio’s voice API and programmable SMS.

The premise condition

  • Node.js
  • A free Twilio account (Sign up for free using this link and get $10 credit when you upgrade your account
  • A Twilio phone number
  • A smartphone to test your app
  • Twilio CLI

Project Settings

In this section, you’ll set up a new Node.js application. To keep things organized, create a folder called _voice-to-sms_ to store all the application files. From your terminal or command prompt, navigate to your favorite directory and type.

mkdir voice-to-text
cd voice-to-text
npm init -y
Copy the code

This command will create your project file and build your Node project by creating a _package.json_ file that will contain your project’s metadata and package dependencies.

Install dependencies

Your next step is to install all the dependencies you need for your project. You will need.

  • Express for routing and handling incoming requests
  • Twilio’s Node Helper Library, which interacts with Twilio’s API to receive calls and send SMS messages
  • Dotenv to store and access environment variables

To install these dependencies, go back to your terminal and type the following command.

npm install express twilio dotenv
Copy the code

Now that you have installed your dependencies, you will need to import and initialize them. To do that, create a new file named _index.js_ in your current directory with the following command.

touch index.js
Copy the code

Now open the _index.js_ file with your favorite IDE and place the following code in the file.

require('dotenv').config();
const VoiceResponse = require('twilio').twiml.VoiceResponse;
const express = require('express');
const app = express();
app.use(express.urlencoded({ extended: true }));
Copy the code

This code will import and initialize the package you installed earlier. app.use(express.urlencoded({ extended: true })); Is a piece of middleware that processes and parses incoming request objects as strings to your application.

Environment variables and Twilio account credentials

Dotenv is used to access environment variables, where you will store Twilio credentials needed to interact with the API. Go back to your terminal and create the _. Env_ file with the following command.

touch .env
Copy the code

To connect to Twilio’s API, you will need your account SID, Auth Token and your Twilio phone number. These values can be safely stored in the. Env file. Open your. Env file and paste the following into it.

TWILIO_ACCOUNT_SID=XXXXXXX 
TWILIO_AUTH_TOKEN=XXXXXXX
TWILIO_NUMBER=XXXXXXX
Copy the code

After copying, replace XXXXXX with your actual account credentials, which can be found in the Twilio console. When entering your Twilio phone number, make sure it’s in E.164 format.

Now that you have the environment variables set up, you can import and initialize Twilio’s Node library with account credentials that have been loaded into the _. Env_ file. Go back to _index.js_ and place the following code where you initialized the other packages.

const twilio = require('twilio')(
   process.env.TWILIO_ACCOUNT_SID,
   process.env.TWILIO_AUTH_TOKEN
);
Copy the code

The next step is to start coding your application

Create Express Routes

You will need to create a method to handle and respond to incoming calls. Express will allow you to create routes to handle these requests.

Your application is set up in such a way that once your Twilio number receives a call, it will first route to the _/ Transcribe_ endpoint. This endpoint will process and transcribe the call, then send a callback of the transcribed content to the _/ SMS_ endpoint, and then send the transcribed content to your personal phone number.

Place the following scaffolding code in your index.js file.

app.post('/transcribe'.(req, res) = >{}); app.post('/sms'.(req, res) = >{}); app.listen(3000.() = > {
   console.log('Express server listening on port 3000');
});
Copy the code

_/transcribe_route

The _/transcribe_ route is called whenever there is a POST request on your server. Every time your Twilio number receives a call, the code will attempt to transcribe the voice message left by the user. Insert the highlighted code below into your _/transcribe_ route.

app.post('/transcribe, (req, res) => { const twiml = new VoiceResponse(); twiml.say('Hello. Please leave a message after the beep.'); twiml.record({ transcribeCallback: '/sms'}); twiml.hangup(); res.type('text/xml'); res.send(twiml.toString()); });Copy the code

The above code creates a variable named TwiML from TwiML’s voice response object. TwiML tells Twilio how to handle incoming calls or text messages. After creating this variable, TwiML responds to the caller by saying, “Hello. Please leave a message after the beep.

TwiML then uses the

verb to create an audio Record of the caller’s response and ends when the caller hangs up or the recording reaches 120 seconds. TwiML verbs can also be modified with various attributes.

In this code, the transcribeCallback property is used, which tells the

verb to transcribe the audio Record and performs a callback (via POST request) of the text transcription to the _/ SMs_ path. TwiML will not make a POST request to the given transcribeCallback URL if the recording is missing or absent.

Once the recording ends, the code will tell TwiML to hang up, and once the text transcribed, the _/ SMS_ route should receive a callback.

Before we continue, it’s important to mention that there are various legal considerations for recording a phone call or voice message, and you have to make sure you follow local, state, and federal laws when recording anything.

_ / sms_ route

If and once the recording is transcribed, it is sent to the _/ SMS_ endpoint, which will send the text transcribed as a SMS to your personal phone number. Insert the highlighted code below into your _/sms_ route.

app.post('/sms'.(req, res) = > {
   const from = req.body.From;
   const transcription = req.body.TranscriptionText;

   twilio.messages
   .create({
       body: `Message from: The ${from} - ${transcription}`.from: process.env.TWILIO_NUMBER,
       to: '<YOUR_PHONE_NUMBER>'
    })
   .then(message= > console.log(message.sid));
});
Copy the code

Replace

with your personal phone number and make sure it’s in E.164 format.

In the code above, both the transcribed recording and the received phone number are parsed from the body of the POST request. The code then uses the previously initialized Twilio object to create and send a short message to your personal number. The message contains a transcript of the text and the phone number received from it.

Now that your application is complete, save and close your _index.js_ file.

Test your application

Finally, it’s time to test your application! Open your terminal, navigate to your project directory, and run the following command.

node index.js
Copy the code

You should see a log statement on the terminal that says Express Server Listening on Port 3000.

Now that your application is running on your local server _ (localhost:3000_), you need to tell Twilio where to send POST requests from Twilio’s number.

Configure Webhook with ngrok

Since your local server only runs on your computer, Twilio can’t connect to it because it can’t access the Internet. To solve this problem, you need to create an ngrok tunnel, which will start a forwarding URL_ between the Internet and _localhost:3000_. Open the second terminal window and log in to the Twilio CLI.

twilio login
Copy the code

This command will prompt you to enter your Twilio account SID and your Auth Token. Once logged in, create a Webhook using the following command, taking care to replace the placeholders with your actual Twilio phone number.

twilio phone-numbers:update "+TWILIO_NUMBER" --voice-url="http://localhost:3000/transcribe"
Copy the code

This command will start a tunnel that allows you to receive requests from the Internet and send them to your server. Normally, in a production application, you would set up a Webhook on a dedicated server hosted online, but for testing purposes, you will use a local server. You may receive a warning that your computer will be exposed to the Internet, if so, go ahead. You should receive a response that looks something like this.

Copy the voice URL and navigate to the Twilio Phone number section of the Twilio console. Click on the Twilio number you’ve been using for this project and scroll down to the voice and fax sections. IN the A CALL COMES IN section, you’ll probably see the forward URL you generated, if not, paste the URL you just copied and make sure the HTTP POST is selected IN the drop-down menu on the right. Your voice and fax sections should look like this, but with your forwarding url.

After making the changes, click the “Save” button.

Send a voice message to your Twilio number

Now that your application is up and running, you’re ready to test it! Call your Twilio number, leave a message, and hang up. Wait a few seconds for your voice message to be transcribed and you will receive a text message with the transcribed message and who sent it! The message should have read: “Hello, who is calling?

It should look something like this.

What’s next for voice to SMS transcription?

When a voice call doesn’t work or you prefer text, the Twilio voice API makes sure you stay connected. Now that you have this tutorial in your Twilio toolkit, you can send transcripts of calls directly to your SMS. To keep this program functional, you can set up calls from your personal number to be transferred to your Twilio number. You can even use the Twilio feature to set up your serverless application without having to run the Express server.

I wish you a happy construction!