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
./src folder and delete all files except
App.js. Clean the import statements in both files and return
Hello World in
App.js to test the application as shown below:
If you go to
https://localhost:3000 in the browser, you should be able to see “Hello World”.
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
In 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 generated from POST Authentication request using your
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.
successContext like the following in our
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 the
In the above code snippet, we are creating a
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”.
<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
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.
Fetch Conversation API in useEffect
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:
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.
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
[<https://localhost:3000>](<https://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.