This demo application includes the VoiceWidget which uses the usePorcupine react hook to allow listening for keywords. The keywords are handled via the keywordEventHandler callback function that updates a React useState hook, and then renders the results.
If you decline microphone permission in the browser, or another such issue prevents Porcupine from starting, the error will be displayed.
The widget shows the various loading and error states, as well as mounting/unmounting the VoiceWidget with a toggle, demonstrating the complete lifecycle of Porcupine with in a React app.
This project was bootstrapped with Create React App.
Porcupine requires a valid Picovoice AccessKey at initialization. AccessKey acts as your credentials when using
Porcupine SDKs.
You can get your AccessKey for free. Make sure to keep your AccessKey secret.
Signup or Login to Picovoice Console to get your AccessKey.
Use yarn or npm to install the dependencies, and the start script with a language code
to start a local web server hosting the demo in the language of your choice (e.g. de -> German, ko -> Korean).
To see a list of available languages, run start without a language code.
yarn
yarn start ${LANGUAGE}(or)
npm install
npm run start ${LANGUAGE}Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits. You will also see any lint errors in the console.
Enter your access key and press on Init Porcupine to start listening for the selected keyword.