DEV Community

Cover image for Using The web-voice-command npm Package I Just Published
matoval
matoval

Posted on

Using The web-voice-command npm Package I Just Published

npm package: web-voice-command
The Web Speech API is an exciting glimpse into the future of the web. There are a ton of cool ideas I have for using voice to control the web. I will be build some in the next few weeks using the web-voice-command package that I just published.

Goal for this package

My goal is to make it easier to implement the Web Speech API. With this package installed you are able to integrate voice commands and voice-to-text in a few lines of code. Web Speech only works in Chrome at the moment

How to use it

The package has four methods you can call.

  • setOptions: Used to set options.

  • results: Returns all voice inputs.

  • startStop: Used to start and stop listening.

  • wordList: Returns only words you listed.

setOptions()
Default options are:

  let options = {
    persistentListening: false,
    listenOnLoad: false,
    language: 'en-US'
  }
Enter fullscreen mode Exit fullscreen mode

setting language use BCP 47 Language Codes

ar-SA Arabic Saudi Arabia
cs-CZ Czech Czech Republic
da-DK Danish Denmark
de-DE German Germany
el-GR Modern Greek Greece
en-AU English Australia
en-GB English United Kingdom
en-IE English Ireland
en-US English United States
en-ZA English South Africa
es-ES Spanish Spain
es-MX Spanish Mexico
fi-FI Finnish Finland
fr-CA French Canada
fr-FR French France
he-IL Hebrew Israel
hi-IN Hindi India
hu-HU Hungarian Hungary
id-ID Indonesian Indonesia
it-IT Italian Italy
ja-JP Japanese Japan
ko-KR Korean Republic of Korea
nl-BE Dutch Belgium
nl-NL Dutch Netherlands
no-NO Norwegian Norway
pl-PL Polish Poland
pt-BR Portuguese Brazil
pt-PT Portuguese Portugal
ro-RO Romanian Romania
ru-RU Russian Russian Federation
sk-SK Slovak Slovakia
sv-SE Swedish Sweden
th-TH Thai Thailand
tr-TR Turkish Turkey
zh-CN Chinese China
zh-HK Chinese Hong Kong
zh-TW Chinese Taiwan
Use the setOptions function to change options.

 webVoiceCommand.setOptions({
  persistentListening: true,
  listenOnLoad: true,
  language: 'ro-RO' //set language to ro-RO Romanian Romania
})
Enter fullscreen mode Exit fullscreen mode

results()
The results method is used to get all voice inputs and will return multiple arrays with each array separated by pauses in voice inputs.

 webVoiceCommand.results(function(result){
  console.log(result)
})
Enter fullscreen mode Exit fullscreen mode

With the voice input of "hello world" the results method will return:

(2) ["hello", "world"]
Enter fullscreen mode Exit fullscreen mode

startStop()
The startStop method is used to start and stop listening and is used with a DOM event. In this example we will use two buttons, one for start and another for stop. You can also use the same element as a toggle.

<button value='start' onClick={handleClick}>Start</button>
<button value='stop' onClick={handleClick}>Stop</button>
Enter fullscreen mode Exit fullscreen mode

Now we call the startStop method in the handleClick function. The first parameter is the number of DOM elements and the second is the value "start" or "stop".

function handleClick(event) {
  webVoiceCommand.startStop(2, event.target.value)
}
Enter fullscreen mode Exit fullscreen mode

This will turn listening on/off.

wordList()
The wordlist method is used with a list of words you want the user to use. It can be used with or without actionWords. actionWords are used to trigger lists of words to search through. I will show wordList with and without actionWords.

The wordlist method takes three parameters,

  • words: Array of objects.
  • withActions: A boolean.
  • callback: Returns an array of matched words if you are not using actionWords or a single word if you are using actionWords.

with actionWords

const words = [
  {
    actionWord: {
      name: 'pick',
      options: [
        {
          word: 'blue',
          alternateWord: []
        }, 
        {
          word: 'red',
          alternateWord: []
        }, 
        {
          word: 'yellow',
          alternateWord: []
      }]
    }
  },
  {
    actionWord: {
      name: 'select',
      options: [
        {
          word: 'home',
          alternateWord: []
        },
        {
          word: 'about',
          alternateWord: []
        },
        {
          word: 'contact',
          alternateWord: []
        }
      ]
    }
  }
]

const withActions = true

webVoiceCommand.wordList(words, withActions, function(result) {
console.log(result)
})
Enter fullscreen mode Exit fullscreen mode

With the voice input of "pick blue" the wordList method will return:

blue
Enter fullscreen mode Exit fullscreen mode

without actionWords

const words = [
    {
      word: {
      name: 'red',
      alternateWord: []
      }
    },
    { 
      word: {
        name: 'blue',
        alternateWord: []
      }
    },
    {
      word: {
        name: 'yellow',
        alternateWord: []
      }
    }
  ]

const withActions = false

webVoiceCommand.wordList(words, withActions, function(result) {
console.log(result)
})
Enter fullscreen mode Exit fullscreen mode

With the voice input of "red blue yellow" the wordList method will return:

(3) ["red", "blue", "yellow"]
Enter fullscreen mode Exit fullscreen mode

Conclusion

I will be improving this package as feedback comes in and as I work with it more. My next article will be on a game I am building using the web-voice-command package. All game control inputs will be voice inputs.

Top comments (9)

Collapse
 
felipperegazio profile image
Felippe Regazio

Thats pretty cool! Do you think that would be hard to add support for other languages?

Collapse
 
matoval profile image
matoval

What language?

Collapse
 
felipperegazio profile image
Felippe Regazio

Portuguese

Thread Thread
 
matoval profile image
matoval

I'll add the option to pick your language today. I'll let you know when I push it live.

Thread Thread
 
felipperegazio profile image
Felippe Regazio

thats perfect, thank you!

Thread Thread
 
matoval profile image
matoval

I added the option to change the language. I show the codes you can use in the readMe.

Thread Thread
 
felipperegazio profile image
Felippe Regazio

thats awesome @matoval thank you. ill sure try to use and contribute with your project if i can. have a nice day : )

Collapse
 
miketalbot profile image
Mike Talbot ⭐

Very nice indeed. Thanks for sharing this...

Collapse
 
matoval profile image
matoval

You're welcome. I'm really excited to see how voice in the browser can improve users interaction with the web.