Skip to content

React component for audio navigation and audio utilities on the web

License

Notifications You must be signed in to change notification settings

WebPaquitos/react-audio-assistant

Repository files navigation

React Audio Assistant npm version npm package

This packages' purpose is to enable audio navigation and interaction in your website/webapp.

As Siri or Google Assistant are to the smartphone, so is this to the web.

This package is heavily dependent on DialogFlow.

An option to integrate with redux is also present.

WARNING: Experimental technology

This package is currently only working on the Chrome Browser. Other browsers are yet to give support to the Web Speech Recognition API that has been in development for quite some time.

Instructions

  1. The first step in the process is to create an account at DialogFlow and configure an agent suited for your website/webapp).
  2. Get the client access token for your DialogFlow app to use later in this package.
  3. yarn add react-audio-assistant or npm i --save react-audio-assistant
  4. Import the component and use it where you want in the page (the component is fixed positioned).

Creating a DialogFlow Agent

Head over to DialogFlow and create your account.

After this is done, create a new agent (which requires you to create a new project on google console too).

Now is the time to create an Intent. Intents are the building blocks of logic for our application navigation.

Intent Creation

Then enter in the intent details screen and configure the intent to suit your needs. In this example case, we are using a Navigate Intent, because we want to navigate our website using our voice.

Intent Creation

Intent Creation

You also need an entity to identify the query you want. Create an Entity.

Intent Creation

Enter in the entity details screen and configure your entity accordingly, training it a bit too in the process.

Intent Creation

After all this is done, access the settings page for the project and copy the client access token, you will need it to make the requests to the platform.

Intent Creation

Demo Project

A demo project is available here.

Example

A simple use case without Redux:

import React, { Component } from 'react';
import { ReactAudioAssistant } from 'react-audio-assistant';

export default class YourComponent extends Component {
    render() {
        return (
            <div>
                <p>This is a div with my custom component stuff</p>
                <ReactAudioAssistant
                    token={YOUR_DIALOG_FLOW_TOKEN}
                    navigate={(target) => console.log(target)}/>
            </div>
        );
    }
}

A simple use case with Redux:

// somewhere in your components
import React, { Component } from 'react';
import { ReactAudioAssistantWithRedux } from 'react-audio-assistant';

export default class YourComponent extends Component {
    render() {
        return (
            <div>
                <p>This is a div with my custom component stuff</p>
                <ReactAudioAssistant
                    token={YOUR_DIALOG_FLOW_TOKEN}
                    navigate={(target) => console.log(target)}/>
            </div>
        );
    }
}

// in your main reducer
import { combineReducers } from 'redux';
import { audioAssistant } from 'react-audio-assistant';

export default combineReducers({
    audioAssistant,
});

License

MIT