To test the app, from the root of the application folder, run this:

$ npm run dev
or
$ yarn dev

This will launch our application. From the home page, click on Create Thread and create a new thread named Audio API Test, or any name you like. Once we create a new thread and navigate to the view thread page, we should see the new reply section, as shown here:

When we click on Reply with Audio, we should see a popup where we can record an audio file, and then preview it and download it. Once we click on the record button, we should see the browser asking for user permissions to capture audio, if we have not already done so:

Once permission has been given, the recording begins:

Now, when we click on Reply, the audio will get uploaded to our server first, and then our server will upload the same audio to Cloud Speech API to get the transcription. If everything goes as expected, this audio is uploaded to Cloudinary, a public URL of this audio is fetched, and the description for this audio is constructed and sent back. And, this is how the final message will look:

I said This is a sample recording while I am taking a screenshot of the popup and this is what Speech API recognized. You can try recording various audio samples and test the complete flow end to end.

To wrap up this chapter, we are going to push the code to Heroku.