DEV Community

Cover image for Day 12: Always Listening Voice Commands with React.js
Picovoice profile image Dilek Karasoy
Dilek Karasoy for Picovoice

Posted on

Day 12: Always Listening Voice Commands with React.js

#100daysofcode #challenge #react #webdev

Wake words are the most-known example for always listening commands. Echo smart speakers and iPhones always listen for the wake words Alexa and Hey Siri to activate the software for listen to further voice commands.

Always listening commands are not limited to wake words. Airlines can add always listening commands such as "Book a Flight" or "Check in" directly to their websites instead of starting with "Hey Airline X".

Setup the Project

  1. Create: 
npx create-react-app porcupine-react
Enter fullscreen mode Exit fullscreen mode
  1. Install: 
npm install @picovoice/porcupine-react @picovoice/web-voice-processor
Enter fullscreen mode Exit fullscreen mode
  1. Download: Run the following from the project folder to turn the binary model into a base64 string. Don't forget to replace ${DOWNLOADED_MODEL_PATH} with yours (e.g. ~/Downloads/porcupine_params.pv). 
npx pvbase64 -i ${DOWNLOADED_MODEL_PATH} -o src/porcupine_params.js
Enter fullscreen mode Exit fullscreen mode
  1. Run 
yarn start
Enter fullscreen mode Exit fullscreen mode

Train Wake Word Models

  1. Sign up for Picovoice Console
  2. Visit Porcupine Page on Picovoice Console
  3. Select English
  4. Type in Hey Jarvis or the phrase you want.
  5. Test it out on your browser.
  6. When you are happy, click on the train button.
  7. Select Web (WASM) as the platform.
  8. Click on Download. A .zip file will be downloaded.
  9. Once you unzip, inside the folder, you see a .ppn a file. That's your speech model! Transform it into a base64 string. Don't forget to replace ${DOWNLOADED_PPN_PATH} with the path to downloaded file (e.g. ~/Downloads/Hey-Jarvis_en_wasm_v2_1_0/Hey-Jarvis_en_wasm_v2_1_0.ppn on my Ubuntu machine) 
npx pvbase64 \
-i ${DOWNLOADED_PPN_PATH} \
-o src/hey_jarvis.js \
-n heyJarvisKeywordModel
Enter fullscreen mode Exit fullscreen mode

Wire it up

  1. Copy your AccessKey from the Picovoice Console
  2. Create a file within src called VoiceWidget.js and paste the below into it. The code uses Porcupine's hook to create and start the wake word detection. Peplace ${ACCESS_KEY} with yours. 
import {useEffect, useState} from "react";
import {usePorcupine} from "@picovoice/porcupine-react";
import heyJarvisKeywordModel from "./hey_jarvis"
import modelParams from "./porcupine_params";
export default function VoiceWidget() {
  const [keywordDetections, setKeywordDetections] = useState([]);
  const {
    keywordDetection,
    isLoaded,
    isListening,
    error,
    init,
    start,
    stop,
    release
  } = usePorcupine();
  const initEngine = async () => {
    await init(
      ${ACCESS_KEY},
      {
        "base64": heyJarvisKeywordModel,
        "label": "Hey Jarvis"
      },
      {base64: modelParams}
    );
    start()
  }
  useEffect(() => {
    if (keywordDetection !== null) {
      setKeywordDetections((oldVal) =>
        [...oldVal, keywordDetection.label])
    }
  }, [keywordDetection])
  return (
    <div className="voice-widget">
      <h3>
        <label>
          <button
            className="init-button"
            onClick={() => initEngine()}
          >
            Start
          </button>
        </label>
      </h3>
      {keywordDetections.length > 0 && (
        <ul>
          {keywordDetections.map((label, index) => (
            <li key={index}>{label}</li>
          ))}
        </ul>
      )}
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode
  1. Modify the App.js to display the VoiceWidget and click start: 
import './App.css';
import VoiceWidget from "./VoiceWidget";
function App() {
  return (
    <div className="App">
      <h1>
        Porcupine React Demo
      </h1>
      <VoiceWidget />
    </div>
  );
}
export default App;
Enter fullscreen mode Exit fullscreen mode

Looking for more?
Explore other languages on the Picovoice Console and check out for fully-working demos with Porcupine on GitHub.

Top comments (0)

Read next

nozibul_islam_113b1d5334f profile image

list of the most common JavaScript string methods

Nozibul Islam -

hreuven profile image

CSS: masonry layout

Reuven Hozias -

kiolk profile image

Day 44. Timestamp

Kiolk -

rodik profile image

Enhanced CLI Capabilities in NestJS Boilerplate

Rodion -