DEV Community

C I R L O R M ⚡
C I R L O R M ⚡

Posted on

How to build Shazam-like app in React Native

We are building a Content Recognition app using ACR-CLOUD API. You can use acrcloud in almost any language, they have an android SDK that can be use with react native if you know to do it. We are going to use their Python SDK rather because it's much easier to implement.
We will be building a back-end in python which will handle all the automatic recognition and a front-end in react native which will handle the audio input.

Alt Text

Concept

How will our application work?
ACR-Cloud allows us to scan audio files and it will recognize the song playing, unlike popular methods where the song is listened to in real-time and recognized, we are going to record the audio and scan it but we will create the impression that we are listening to it in real-time.
On our frontend, we will record a 10 sec audio clip and send it to our backend which will perform the automatic recognition and send back the response to the front-end, all this happens in less 20 sec which means processing of the clip takes less then 10 sec on the server.

Back-end in Python

For the back-end I used Flask to create a simple REST API that handle a file upload.
The API saves the file and passes the filepath to the recognizer. The recognizer returns a JSON object, this object is then returned to the frontend.

GITHUB github repo

Front-end in React Native

Our app uses expo-av for audio recording, the recording is done in 10 sec duration and the file is sent to the API on the back-end, the response contains all the details about the song found including it's spotify ID.
We are going to use the spotify ID to make another API request to the spotify search endpoint using the ID, this will return another JSON object which we use to display the song found, these include: artist name, song title, cover photo URL and spotify link.

GITHUB github repo

Top comments (3)

Collapse
 
yanaclrd profile image
yanaclrd

Thank you for publishing information about the possibility of creating a Shazam-type application. Cleveroad also researched this topic and described the algorithm for the operation of applications of this type.

Collapse
 
catsinhats profile image
Jay

@cirlorm_io looks like the repositories are missing

Collapse
 
cristobalbl86 profile image
Cristobal Buenrostro

repos are not available, can you share them again?
I'm struggling with something similar but I'm trying to use the api from Rapidapi.