isabella232 / dialogflow-audio-recorder-nodejs

A simple web app to record audio and a Dialogflow agent to playback the audio as an Action.

Project Status

This sample is no longer maintained. It's here for archive purposes only.

Actions on Google: Audio Recorder Demo

This is a simple Assistant Action, built using Dialogflow, to playback an audio recording. The recording is made using a simple web app.

Setup Instructions

Before you begin

Make sure to perform these prerequisite steps:

1. Install Firebase SDK Version 4.x.x with npm install --global [email protected].
2. Select a project by running firebase use --add using alias default in the sample directory.

For troubleshooting these steps, you can refer to the latest setup instructions for Cloud Firestore.

Obtain the audio recorder libraries

Copy the following files from WebAudioRecorder.js into the public\javascript folder:

1. OggVorbisEncoder.min.js.mem
2. WebAudioRecorder.min.js
3. WebAudioRecorderOgg.min.js

Steps

1. Click on the Add to Dialogflow button below and follow the prompts to create a new project:

1. Click on the gear icon to see the Project ID in the settings.
2. Go to the Firebase console and select the project that was created.
   1. In the Database section, click Create database under Cloud Firestore.
   2. Select Locked mode for the Cloud Firestore Security Rules and then click Enable.
   3. In the Authentication section, under the Sign in method tab, enable the Google sign-in method and click Save.
      1. Make sure One account per email address is set to Prevent creation of multiple accounts with the same email address which should be selected by default.
   4. From the project overview page in the Firebase console, click Add Firebase to your web app.
3. Go to the command line to publish the project to Firebase Hosting:
   1. Run firebase deploy to deploy the project.
   2. Take note of the hosting URL where the project has been published. It should look like https://${PROJECT}.firebaseapp.com
4. Test the audio recorder web app:
   1. Load the hosting URL in a browser.
   2. Click on the Google sign-in button to login into the web app.
   3. Click on the microphone button and give the browser permission to record audio.
   4. Say a few words and then click on the microphone button again to stop recording.
5. In Dialogflow, on the left navigation menu in Dialogflow click on Fulfillment.
6. Click on the Deploy button and wait for the deployment to complete.
7. Select Integrations from the left navigation menu and open the Integration Settings menu for Actions on Google.
8. Enable Auto-preview changes and Click Test. This will open the Actions on Google simulator.
9. Type Talk to my test app in the simulator, or say OK Google, talk to my test app to any Actions on Google enabled device signed into your developer account.

For more detailed information on deployment, see the documentation.

References & Issues

• Questions? Go to StackOverflow, Assistant Developer Community on Reddit or Support.
• For bugs, please report an issue on Github.
• Actions on Google Documentation
• Actions on Google Codelabs.
• Webhook Boilerplate Template for Actions on Google.

Make Contributions

Please read and follow the steps in the CONTRIBUTING.md.

License

See LICENSE.

Terms

Your use of this sample is subject to, and by using or downloading the sample files you agree to comply with, the Google APIs Terms of Service.