DEV Community

Mayur Bhatti
Mayur Bhatti

Posted on

WebLex - Using voice to control a website with Amazon Alexa

Introduction:

With advances in Information Technology, modern communication tools, like voice bots, have become integral to user interactions. A prominent example is Amazon Alexa — a smart voice assistant developed by Amazon that can perform a wide array of tasks. Alexa enables users to set alarms, create reminders, play music, answer questions, browse the internet, and control smart home devices with just a voice command. Beyond personal use, Alexa’s functionality can even be embedded into websites. Here’s where WEBLEX comes in.

Objective — WEBLEX aims to make website interactions more accessible and efficient by allowing users to control web content using Alexa voice commands. Users can seamlessly perform various tasks, such as navigating menus, displaying images, reading website content aloud, managing sign-in/sign-off, and scrolling—all with simple spoken prompts.

Scope — Voice-controlled website navigation can be incredibly beneficial across various scenarios. Imagine having the ability to navigate a recipe website hands-free while cooking or a doctor reviewing a patient’s medical images and test results through voice commands. These use cases demonstrate the potential of voice navigation to enhance user experiences in unique, hands-free environments.

Now Let’s first see in short how Amazon Alexa works??

Alexa Working

A user can access content in a skill by invoking it with Alexa. Alexa is always up for acquiring new skills. When a user speaks to any Alexa-enabled device and uses the wake word, “Alexa,” the device sends the speech to the Alexa service in the cloud. Alexa analyzes the user’s voice, determines what they want, and then makes a request to the skill that can assist them. Speech recognition and natural language processing are handled by the Alexa service. Your skill is deployed as a cloud service. Through an HTTPS enabled request-response mechanism, Alexa communicates with the skill. Alexa skill receives a post request with JSON body whenever they are requested by the user.

  • Wake word: Alexa starts listening to your commands once you say the wake word.
  • Launch word: Invocation of the skill will likely follow a launch word, which triggers Alexa to initiate the skill invocation.
  • Invocation name: A user invokes a skill’s invocation name in order to interact with it. For example, to use the Daily Horoscope skill, the user could say, “Alexa, open my daily horoscope.”
  • Utterance: Utterances are spoken requests made by users. Invocation of a skill, inputs for a skill, and confirmation of Alexa’s actions are all possible through spoken requests. Consider the many ways your users could form their requests.
  • Prompt: When you talk to Alexa, you can send her a string of text that asks for information. Whenever you respond to a user, you include the prompt text.
  • Intent: A user’s spoken intent is fulfilled by an intent. Slots are optional arguments that can be attached to intents.
  • Slot Value: Slots are input values entered by the user during their spoken request. By providing these values, Alexa can determine the speaker’s intent.

Working of WebLex:

architecture

The flow of WebLex involves several steps that enable Alexa to control website content effectively:

  1. The user speaks the wake word, "Alexa."
  2. Alexa processes the wake word, listens to the user’s voice, and sends the command to the Alexa service.
  3. Alexa uses its interaction model to route the request appropriately.
  4. The backend, powered by an AWS Lambda function using Node.js, links the frontend with Alexa.
  5. Alexa sends a JSON-formatted request to the Lambda function, which stores relevant data in a database.
  6. The Lambda function evaluates the JSON request to determine a response, pulling data from the database as needed.
  7. An API then retrieves the Lambda function’s output, allowing the website to access this information and display it for the user.

Future Enhancement:

  • Live Website Integration: Embedding WebLex functionality into a production-ready website.
  • Cloud Deployment: Hosting WebLex on a cloud platform for increased scalability and accessibility.

References:

Top comments (0)