Wondering what’s next for npm?Check out our public roadmap! »

    react-audio-assistant

    1.0.2 • Public • Published

    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

    Install

    npm i react-audio-assistant

    DownloadsWeekly Downloads

    29

    Version

    1.0.2

    License

    MIT

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar