Wake Word Detection with Next.js

A wake word engine is a tiny algorithm designed to continuously analyze an audio stream for a specific wake word, triggering the activation of your voice assistant as soon as it's detected.

“Hey Siri”, “Alexa”, and “OK Google” have become some of the most recognizable wake words due to major tech companies not providing options aside from their own proprietary wake words. However, businesses often find it preferable to have a custom wake word that aligns with their own brand identity. Fortunately, Picovoice's Porcupine Wake Word Detection engine enables developers to create and train custom wake words in seconds, for free.

In this article, we will demonstrate how to add a custom wake word to a Next.js application.

Demo Project

1. Project Setup

Create a new Next.js application:

npx create-next-app@latest

You will be prompted to configure some basic settings. Feel free to use the default option for each prompt.

Next, install the required dependencies:

npm install @picovoice/porcupine-react @picovoice/web-voice-processor

Launch the local server to access your page on http://localhost:3000:

npm run dev

2. Picovoice Console

Sign up for a free Picovoice Console account and copy your AccessKey from the main dashboard.

Navigate to the Porcupine page to create your custom wake word. For detailed step-by-step instructions, refer to the Porcupine Console tutorial or watch the video tutorial.

Once you've created and downloaded your wake word, you will find a .zip folder in your downloads that contains a file with a .ppn extension. Unzip this folder and move the .ppn file into your project's /public directory.

3. Application

Download the Porcupine model file and put this file into the /public directory of your project.

In page.tsx, import the usePorcupine hook. This hook returns all the necessary values and functions you need to integrate wake word functionality into your project:

import { usePorcupine } from "@picovoice/porcupine-react"

const {
  keywordDetection,
  isLoaded,
  isListening,
  error,
  init,
  start,
  stop,
  release,
} = usePorcupine()

To initialize Porcupine with the model and custom wake word, call init with the following parameters:

await init(
  "${ACCESS_KEY}",
  { publicPath: "${KEYWORD_PUBLIC_PATH}", label: "${KEYWORD_LABEL}" },
  { publicPath: "${MODEL_PUBLIC_PATH}" }
)

Make sure to replace ${ACCESS_KEY} with your own AccessKey from your Picovoice Console account. Also make sure to replace ${KEYWORD_PUBLIC_PATH} with the path to the keyword file (.ppn file), and ${MODEL_PUBLIC_PATH} with the path to the model file (.pv file).

The label property is a string that will be returned when your wake word gets detected. This can be used to distinguish between wake words if your application is listening for more than one. If your wake word is "Hey Porcupine", you would probably want to set your label accordingly as "Hey Porcupine".

Once initialized, call start to begin listening for your wake word:

await start()

To stop listening for your wake word, call stop:

await stop()

To see a minimal working example, replace the contents of page.tsx with the code below.

// page.tsx
"use client"

import { useEffect, useState } from "react"
import { usePorcupine } from "@picovoice/porcupine-react"

export default function Home() {
  const [keyword, setKeyword] = useState<string | null>(null)

  const { keywordDetection, isLoaded, isListening, error, init, start, stop } =
    usePorcupine()

  const startPpn = async () => {
    if (!isLoaded) {
      await init(
        "${ACCESS_KEY}",
        { publicPath: "${KEYWORD_PUBLIC_PATH}", label: "${KEYWORD_LABEL}" },
        { publicPath: "${MODEL_PUBLIC_PATH}" }
      )
    }

    await start()
  }

  useEffect(() => {
    if (keywordDetection !== null) {
      setKeyword(keywordDetection.label)

      setTimeout(() => {
        setKeyword(null)
      }, 3000)
    }
  }, [keywordDetection])

  useEffect(() => {
    if (error) {
      alert(error)
    }
  }, [error])

  return (
    <main>
      <button onClick={startPpn} disabled={error !== null || isListening}>
        {isListening ? `Listening for "${KEYWORD_LABEL}"` : "Start"}
      </button>
      <button onClick={stop} disabled={error !== null || !isListening}>
        Stop
      </button>
      <div>{keyword ? `"${keyword}" detected!` : ""}</div>
    </main>
  )
}

Click the "Start" button and say your custom wake word into your microphone to see Porcupine in action!

Additional Languages

Picovoice's Porcupine Wake Word Detection engine supports many more languages in addition to English. For instructions on using models in other languages, refer to the Porcupine React Quick Start guide.