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.js
If you go to https://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.js
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 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
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.