Build the future of communications.
Start building for free

"javascript" posts

  • By Phil Nash
    Text to speech in the browser with the Web Speech API speech-synth-header.png

    The Web Speech API has two functions, speech synthesis, otherwise known as text to speech, and speech recognition. With the SpeechSynthesis API we can command the browser to read out any text in a number of different voices.

    From a vocal alerts in an application to bringing an Autopilot powered chatbot to life on your website, the Web Speech API has a lot of potential for web interfaces. Follow on to find out how to get your web application speaking back to you.

    What you'll need

    If you want to build this application as we learn about the SpeechSynthesis API then you'll need a couple of things:

    Once you're ready, create a directory to work in and download this HTML file and this CSS file to it. Make sure they are in ...

    Read More
  • By Sam Agnew
    Playing Pokemon via SMS with Node.js and Twilio Copy of Generic Blog Header 3(2).png

    Pokemon filled many childhoods with joy. For some of us as adults, Node.js does the same. What better way to spend a fun afternoon than combining the two?

    Let’s walk through how to build your own version of Twitch Plays Pokemon powered by text messages using the Twilio API, Node.js and Lua scripting for the Visual Boy Advance emulator.

    Getting Equipped

    Before moving on, you'll need to set up your environment. First make sure you have Node.js and npm installed.

    If you're not on Windows, install wine to be able to run the emulator we need, as only the Windows version has Lua scripting functionality.

    If you’re on a Mac, you can install Wine using Homebrew with the following command:

    brew install wine
    

    You might have issues getting the emulator to run by default, so make sure you have a 32-bit prefix set by running ...

    Read More
  • By Dominik Kundel
    Creating a virtual photo booth using Twilio, WhatsApp & Cloudinary ueiPKYUnYGNhEDFMWyk3KgruLhuc2iu1GEA5JD3lUxeZL84E1GmuH5w4UOejAXzZdj7NK7_owncknk3e9-IPSlaGEvt19TclzBKxFkx2eU-el2cwJrNfPqXCldzqrW08DCEreTNV

    If you've ever been to Berlin, chances are high that you've seen multiple photo booths in bars and on the street. Berlin and photo booths just belong together. This year for JSConf EU we wanted to build our own virtual photo booth, powered by Twilio for WhatsApp. In this post, we'll look at how we built the digital part of the photo booth using Twilio and Cloudinary.

    Let's build a purely digital version of this photo booth where when a person sends in an image, we'll perform some manipulations on that picture and send it back.

    Prerequisites

    Before we get started, make sure you have the following:

    If you prefer to view the next steps as a video to follow along, make sure to check out this ...

    Read More
  • By Tilde Thurium
    Detect Robocalls with Twilio Lookup, Node.js and the Nomorobo Spam Score Add-on Detect Robocalls with Twilio Lookup, Node.js and the Nomorobo Spam Score Add-on

    Robocalls: nobody likes them, except maybe the robots. Twilio is working hard to eliminate robocalls. For the moment we need additional ways of fighting back. Let’s build a tool with Node.js, Nomorobo, and Twilio Lookup to detect robocalls. It’s easier than a Voight-Kampff test, I promise.

    Getting Started

    What you’ll need:

    Nomorobo is a company that maintains a huge database of known spammers and bots, as well as providing a service for filtering out unwanted calls. To take advantage of these features, install the Nomorobo add-on from the Twilio Console. 

    Click the install button and agree to the terms of service.  Keep the unique name as nomorobo_spamscore. Under USE IN, check the Lookups box and click Save.

    Making The Initial Lookup

    Install the Twilio Node helper library ...

    Read More
  • By Nathaniel Okenwa
    Create a Smart Voicemail with Twilio, JavaScript and Google Calendar 6RDc-eMExBn8vtkgQRwJxsbID95IbJXkGqac1ZoC8vMmh40ejzYE0H0RD1yoyU64-7sQHZwNABCgxkmymMgmiXigQvcqs5B4nelE6RkAneOPJ-DfU30ClMG24vUDqrHnZZH3jKQ1

    We’ve all been there, in an important meeting, you’ve forgotten to mute your phone and all eyes turn to you as you frantically search through your pockets to silence it. That feeling of embarrassment is only matched by the frustration of listening to your voicemail. I dread hearing the robotic voice telling me what numbers to press only to be presented with the sound of somebody hanging up the call.

    To take the hassle out of handling missed calls, today we are going to look at how to create a virtual office manager that is aware of your busy schedule, to handle calls and voice messages for you.

    What We Need

    • A Twilio Account (Get one here for Free)
    • A Twilio Phone Number
    • A Google Calendar
    • Google Calendar API Key

    Before We Begin

    To start off, we need to create a Google Project and enable the Google Calendar ...

    Read More
  • By Sam Agnew
    Parsing an Incoming Twilio SMS Webhook with Node.js Copy of Product Template - SMS-4.png

    When responding to an incoming SMS message, you have access to a variety of information about the message through the body of the webhook request that Twilio sends you.

    Here is all the code you need to grab data from an incoming SMS webhook request from the Twilio API and respond with another text message:

    const http = require('http');
    const express = require('express');
    const { urlencoded } = require('body-parser');
    const MessagingResponse = require('twilio').twiml.MessagingResponse;
    
    const app = express();
    app.use(urlencoded({ extended: false }));
    
    app.post('/sms', (req, res) => {
      const twiml = new MessagingResponse();
    
      // Access the message body and the number it was sent from.
      console.log(`Incoming message from ${req.body.From}: ${req.body.Body}`);
    
      twiml.message('The Robots are coming! Head for the hills!');
    
      res.writeHead(200, {'Content-Type': 'text/xml'});
      res.end(twiml.toString());
    });
    
    http.createServer(app).listen(3000, () => {
      console.log('Express server listening on port 3000');
    });
    

    Simply responding to ...

    Read More
  • By Maciej Treder
    Asynchronous JavaScript: Understanding Callbacks Asynchronous JavaScript: Understanding Callbacks

    By design, JavaScript is a synchronous scripting language. In fact, many of the widely used asynchronous functions in JavaScript are not part of the core language. Understanding how asynchronous features work in the JavaScript ecosystem, including the role played by external APIs, is an essential part of using the language effectively.

    This post will show you how to use asynchronous functionality in JavaScript. It’s also going to explain an important difference between the way code execution works in JavaScript and other languages and frameworks. Understanding this difference is essential to understanding how to do asynchronous programming with JavaScript.

    Understanding JavaScript asynchronous code

    JavaScript programs rely on a JavaScript runtime environment for execution. Browsers, like Chrome and Firefox, and application servers, like Node.js, include a runtime environment as part of the application. This enables websites to run JavaScript in client browsers and standalone JavaScript applications to run in Node ...

    Read More
  • By Maciej Treder
    Asynchronous JavaScript: Organizing Callbacks for Readability and Reusability cxgwWEzJkPC0ZPM2fWcHu3BrGZXaMUO2Z0tUwOu9UTctbND9UrJpqwisJe7EOp9UZlf6sUZhhnH80lvOQadVfLyAfaswgFqm0BB9rs6FD9beeFkQYLMHSwNBo1kNwgkMMrBcHX4l

    Asynchronous programming is an essential part of being a complete JavaScript programmer. Understanding the code execution flow in JavaScript is the foundation of understanding how it can handle asynchronous tasks. And being able to program asynchronous tasks enables you to take advantage of the extensive array of functions provided by JavaScript runtime engines and external APIs. With those tools you can connect your JavaScript programs with web APIs across the internet and effectively manage those—sometimes tenuous—connections.

    With power comes complexity. Using JavaScript callbacks to implement asynchronous functionality can quickly create a series of deeply nested function calls. This post will show you how to write and organize your JavaScript callbacks to maximize the readability, maintainability, and reusability of your asynchronous functions.

    As an old programming saying goes:

    Any fool can write code that a computer can understand. Good programmers write code that humans can understand.

    The first part ...

    Read More
  • By AJ Saulsberry
    JavaScript Deep Dive: Building Scalable and Secure Microservices with Node.js A3hJWCs53xJOPBLkV9uN1QhaMsozG5ArjvE8QRGXj4wd_RQaLd_CpiIJGPbUZPD4ZqiNEuI533eiSqY8xMhWG5NIwRYw7mIsYJj7kdyNUA2u4GDISuFIexd65OKq0Cv0t5ROY2aS

    Many of the posts here on the Twilio blog provide just-in-time learning to help you accomplish a specific software development task, like integrating Twilio Verify into ASP.NET Core Identity. These posts give you the information to get a task done quickly.

    We also publish other posts that, taken collectively, help you make architectural decisions and build whole systems of software, not just individual modules. These related posts can rightfully be considered “long reads”. You’ll want to set aside time to get the most out of reading the posts and building their case study projects.

    We’re introducing Deep Dive posts to make it easier for you to access these professional development resources. Sometimes a Deep Dive will be a series of posts by a single author. On other occasions we’ll curate a list of posts from a variety of internal and external sources. On every occasion they ...

    Read More
  • By Phil Nash
    An introduction to the MediaRecorder API Copy of Photo blog Header 1-2.png

    On the web we can capture media streams from the user's camera, microphone and even desktop. We can use those media streams for real time video chat over WebRTC and with the MediaRecorder API we can also record and save audio or video from our users directly in a web browser.

    To explore the MediaRecorder API let's build a simple audio recorder app with just HTML, CSS and JavaScript.

    Getting started

    To build this application all we need is a text editor and a browser that supports the MediaRecorded API. At the time of writing, supported browsers include Firefox, Chrome and Opera. There is also work ongoing to bring this API to Edge and Safari.

    To get started, create a folder to work in and save this HTML file and this CSS file to give us something to start with. Make sure they are in the same folder and the ...

    Read More
  • Newer
    Older
    Sign up and start building
    Not ready yet? Talk to an expert.