Build

An Introduction to Voice-controlled Apps in JavaScript

3 min readStephen Blum on Jul 2, 2018
Try PubNub Today

Free up to 1MM monthly messages. No credit card required.

Subscribe to our newsletter

By submitting this form, you are agreeing to our Terms and Conditions and Privacy Policy.

Learn how to build your own voice-powered app and control devices remotely in JavaScript with the Spoken SDK and PubNub.

Your voice is a powerful tool. Using the new Spoken SDK, you can capture and transmit your voice to remote control devices and apps. Using the PubNub Network, your voice transcript is transmitted to the target remote device.  You will be able to build your own voice-powered app and control devices remotely by the time your done reading.

Badger Badger Badger

Badger Badger Badger Badger Badger Badger Badger Badger Badger Mushroom MUSHROOM!
Try it out: https://stephenlb.github.io/badger
Get free API Keys: https://dashboard.pubnub.com/signup

Voice capture technology is here and it’s so good. How good? The Spoken SDK can understand your voice at 109% of what the human ear can gather. You can control apps using your voice. This makes apps easier to use when driving or when impaired visually.

Capture Voice Commands

You can capture your voice commands calling the spoken.listen() method. This method requests your microphone access. Once the voice capture starts your computer starts translating your speech into text. This is commonly referred as Speech-to-Text.

spoken.listen().then( transcript => {
    pubnub.publish({ message : transcript });
} );

Once the transcript is captured, you can transmit the result to a remote computer or IoT device, like a lamp. You can say: “Turn on the hallway lights.”. You can also say: “Badger Badger Badger.”.

Receive Voice Commands

Using any one of the PubNub SDKs you can receive commands driven by your voice.

pubnub.subscribe({ channels: ['badger'] });
pubnub.addListener( { message : transcript => {
    // DO SOMETHING HERE WITH YOUR VOICE TRANSCRIPT
    console.log(transcript);
} );

Building Apps with Voice Controls

You can create many new apps using voice technologies. Start by reviewing this list.

  • Taking meeting notes
  • Writing documents
  • Controlling things remotely (IoT)
  • Chatting with chatbots
  • Sudo make me a sandwich
Badger Mushroom Snake

Now you can build voice-powered apps really easy using our new Spoken SDK.

Drop-in Voice SDK with Ready-to-use Code

Get free API Keys: https://dashboard.pubnub.com/signup

You can use the following code to add voice-controls to your app:

Voice Command App (Step 1 of 2)

Use this code on the device with the microphone.

<script src="https://stephenlb.github.io/spoken/spoken.js"></script>
<script src="https://cdn.pubnub.com/sdk/javascript/pubnub.4.21.2.min.js"></script>
<script>( async e => { 'use strict';
const subscribe_key = '_SUBSCRIBE_API_KEY_';
const publish_key   = '__PUBLISH_API_KEY__';
const data_channel  = 'badger';
// Event Stream Network
const pubnub = new PubNub({
    publishKey   : subscribe_key,
    subscribeKey : publish_key
});
// Transmit your captured voice transcription
spoken.listen().then( transcript => {
    pubnub.publish({ message : transcript, channel : data_channel });
} ).catch( e => console.info('Already listening.') );
})()</script>

Remote Device App (Step 2 of 2)

Use this code on the remote device like an IoT light bulb.

<script src="https://cdn.pubnub.com/sdk/javascript/pubnub.4.21.2.min.js"></script>
<script>( async e => { 'use strict';
const subscribe_key = '_SUBSCRIBE_API_KEY_';
const publish_key   = '__PUBLISH_API_KEY__';
const data_channel  = 'badger';
// Event Stream Network
const pubnub = new PubNub({
    publishKey   : subscribe_key,
    subscribeKey : publish_key
});
pubnub.subscribe({ channels: [data_channel] });
pubnub.addListener( { message : transcript => {
    // DO SOMETHING HERE WITH COMMAND
    console.log(transcript);
} );
})()</script>

That’s it! Now you can create a voice-controlled device in just a few minutes.

More from PubNub

Can Empathy Exist in the Metaverse
News May 16, 20221 min read

Can Empathy Exist in the Metaverse

A roundtable discussion led by PubNub’s COO, Casey Clegg, exploring the topics of what it means to be human in a virtual world.

PubNub Staff

PubNub Staff

How to Advance Telehealth and Virtual Care Technologies
News May 2, 20221 min read

How to Advance Telehealth and Virtual Care Technologies

Dr. Joe Kvedar, Chair of the Board for the American Telemedicine Association, joins our COO, Casey Clegg, to discuss why...

PubNub Staff

PubNub Staff

Another Step Towards Data Security: ISO-27001 Implementation
BuildMay 2, 20221 min read

Another Step Towards Data Security: ISO-27001 Implementation

Today, we are glad to announce that we are currently in the process of implementing ISO-27001 security standards.

PubNub Staff

PubNub Staff