We recently launched a new Async Audio API that you can use to process audio files and generate transcription and insights such as topics, action items, follow-ups and questions. In this blog, we will show you how to use the Async Audio App in your React application.
Requirement
Before we get started, you will need to make sure to have:
- A Symbl account
- Node >= 8.10 and npm >= 5.6 for React’s dependencies
- react >= 16.8.0 and react-dom >= 16.8.0 for Material-UI’s peer dependencies
Setup React Project
To create a project with Material-UI CSS library, run
Go to ./src folder and delete all files except index.js, and App.js. Clean the import statements in both files and return Hello World in App.js to test the application as shown below:
./src/index.js
./src/App.jsIf you go to
http://localhost:3000 in the browser, you should be able to see “Hello World”.
Getting Started
We will be creating a React app that uploads an audio file and returns topics from that audio. We will be using Async Audio API to process an audio file, Job API to retrieve the status of an ongoing async audio request and Conversation API to return the topics.
We will stick with a good React folder structure, so create a components folder inside ./src with the following folders and files.
Add the following inside
index.js files
.../Audio/index.js
.../Topics/index.jsIn this tutorial, we will not be making the api request for authentication from a server – we will be hardcoding the access token inside the auth.json which can be used temporarily for the app. Replace [ACCESS_TOKEN] with your temporary access token from generated from POST Authentication request using your appId and appSecret from the Symbl Platform. You can use the Postman app to generate this access token as shown in this Youtube Video.
Building The App
Initialize Context Store
We are creating the .store.js to store our global state using Context API. The reason why use the Context API is that we want the Topics component to only to make an API request when there’s a new id state from the Audio component but we cannot pass the state in between components with props.
If we are not using context for global state management, we will have to place the Topics component under the Audio component and pass down the state using props. While this will also work, it will create an additional nested folder which is not a good practice.
Create idContext, loadingContext, and successContext like the following in our store.js file.
./src/store.js
Wrap <App/> with <Store/> inside index.js file.
./src/index.js
Creating UI for uploading Audio
Let’s create an input button in the Audio component to upload the audio file by writing the following code in theAudio.js file.
.../Audio/Audio.js
In the above code snippet, we are creating a
<Button/> with onClick event listener that will call an <input/> form through React’s useRef so that we can upload our audio file. The <input/> form will only accept audio MIME type files such as “audio/mpeg”, “audio/wav” and “audio/wave”.
The <input/> form has an onChange event listener that will update the file state with the new audio file path. It is important to note that we are using useRef here in order to get the reference object of the uploaded audio file instead of a shallow copy of the file path which will appear as a string of “C://fakepath/audiofilename.wav”.
Upon uploading, when the loading state is true, it will render a <CircularProgress/> until the api call in the custom hook useAudioAsyncAPI is completed.
Fetch Async Audio API and Job API in useEffect
Let’s code the fetch request using fetch in react’s useEffect inside the .hooks.js file.
.../Audio/hooks.js
Creating UI for Topics Generated
Of course, we will need to create a UI to display the topics generated from the Conversation API. We will use <Chip/> from Material-UI to display each topic.
.../Topics/Topics.js
Fetch Conversation API in useEffect
Once the id state is updated or changed, we will make API request to Symbl’s Conversation API using the Conversation ID returned from the previous useEffect hook. Let’s code the fetch request to generates the Topics like the following:
.../Topics/hooks.js
In the code above, when the
id state is true, we are making API calls using fetch to Symbl’s Conversation API specifically, GET Topics by specifying the Conversation ID in the API URL that will return the topics generated from the uploaded audio file.
We can delete .../Topics/style.js since we don’t need it.
Rendering Audio and Topics components
We only want to render Topics components after we uploaded the audio and topics generated, and only populate the UI with the topics. For this, we can again use the global state id and write a conditional rendering statement using &&. We can remove the previous “Hello World” statement.
./src/App.js
Let’s add some responsive layout styling with padding using Material-UI’s
<Grid/> and <Box/>.
./src/App.js
Run The App
And that’s it! Now you have a fully functional react app that can take an audio file — in mono audio format —, process it, show loading progress while it is been processed, and display all the topics keywords within the conversation in the audio file. You can go to [<http://localhost:3000>](<http://localhost:3000>) to view the running app and test it.
You can find the full open source code for this app on our Github.
Check out our API docs if you want to customize this integration further using the APIs that Symbl provides.