Step-by-Step Guide: Building a Shazam Clone with Adalo

This comprehensive tutorial will walk you through building a functional music recognition app using Adalo's no-code platform. While you'll need external APIs for the actual song identification, you'll learn how to create a working app with audio recording, music recognition, song details display, and user history tracking.

Key Takeaways

• Building a Shazam-like app in Adalo requires integrating external music recognition APIs like ACRCloud or AudD
• Total setup time is estimated at 8-15 hours for a basic MVP
• Monthly costs include the Adalo Professional plan at $65/month plus the cost of a music recognition API
• ACRCloud has an audio fingerprint database of millions of tracks and is a market leader in recognition accuracy
• Custom Actions require Adalo's Professional plan minimum for API integration
• The Microphone Recorder component supports Android and iOS through the marketplace

Prerequisites and Initial Setup

Step 1: Create Your Adalo Account and App

1. Go to Adalo.com and sign up for a free account
2. Click "Create New App"
3. Choose "Mobile App" (music recognition works best on mobile)
4. Name your app (e.g., "MusicID" or "SongFinder")
5. Select "Start from Scratch" (no music recognition templates exist)

Step 2: Set Your App Theme

1. Choose a primary color that reflects your brand
2. Select a secondary color for buttons and CTAs
3. Pick a modern, readable font
4. Click "Continue" to enter the app builder

Step 3: Understand the Technical Requirements

Before building, know that Adalo doesn't have native music recognition. You'll need:

• An external music recognition API (ACRCloud or AudD)
• The Microphone Recorder component from the marketplace
• Custom Actions to connect to the API
• An Adalo Professional plan ($65/month) for Custom Actions access

Building the Database Structure

Step 4: Enhance the Users Collection

1. Click the Database icon in the left sidebar
2. Click on "Users" collection (already exists)
3. Add these properties by clicking "+ Add Property":
   
   • Profile Image (Image)
   • Total Searches (Number)
   • Premium Status (True/False)
   • Created Date (Date & Time - Automatic)

Step 5: Create the Songs Collection

1. Click "+ Add Collection"
2. Name it "Songs"
3. Add these properties:
   
   • Song Title (Text)
   • Artist Name (Text)
   • Album Name (Text)
   • Album Art URL (Text)
   • Spotify URL (Text)
   • Apple Music URL (Text)
   • Release Year (Number)
   • Genre (Text)
   • ACRCloud ID (Text - for caching results)

Step 6: Create the Search History Collection

1. Click "+ Add Collection"
2. Name it "Search History"
3. Add properties:
   
   • Search Date (Date & Time - Automatic)
   • Recognition Success (True/False)
   • API Response Time (Number - in seconds)

Step 7: Set Up Database Relationships

1. In Search History collection:
   
   • Add relationship to Users: Many-to-One (A User can have many searches)
   • Add relationship to Songs: Many-to-One (A Song can appear in many searches)

This relational database structure allows you to track user behavior and cache frequently identified songs to reduce API calls.

Installing Required Components

Step 8: Install the Microphone Recorder Component

1. Go to the Adalo Marketplace
2. Search for "Microphone Recorder"
3. Click "Install" on the component (pricing varies)
4. This component supports Android and iOS, unlike the web-only default recorder

Step 9: Install the Audio Player Component

1. In the marketplace, search "Audio Player"
2. Install the free Audio Player component
3. This allows users to play back identified songs if you add preview clips

Step 10: Sign Up for ACRCloud API

1. Visit ACRCloud.io and create a free account
2. Create a new project in the dashboard
3. Copy your API Access Key and Access Secret
4. Note the API endpoint URL (typically https://identify-eu-west-1.acrcloud.com/v1/identify)

Creating User Authentication

Step 11: Build the Welcome Screen

1. On the default screen, rename it to "Welcome"
2. Add an Image for your app logo
3. Add Text: "Identify any song in seconds"
4. Add two Buttons:
   
   • "Sign Up" → Link to new screen "Sign Up"
   • "Login" → Link to new screen "Login"

Step 12: Create Sign Up Screen

1. Add new screen "Sign Up"
2. Add Form component:
   
   • Connect to Users collection
   • Include fields: Email, Password, Full Name
3. Add a Checkbox: "I agree to Terms of Service"
4. Submit button → Link to "Home" screen
5. Add Text link: "Already have an account? Login"

Step 13: Create Login Screen

1. Add new screen "Login"
2. Add Form component with Email and Password
3. Submit button uses the built-in "Login" action
4. On success → Navigate to "Home" screen
5. Add "Forgot Password?" link

Building the Main Interface

Step 14: Create the Home Screen

1. Add new screen "Home"
2. Add a large circular Button in the center:
   
   • Label: "Tap to Identify"
   • Icon: Microphone
   • Background: Gradient or solid color
3. Below the button, add Text: "Listening... 10 seconds"
4. Set visibility condition: Only show when recording is active

Step 15: Add the Microphone Recorder Component

1. Drag the Microphone Recorder component onto the Home screen
2. Configure settings:
   
   • Recording Duration: 10 seconds (optimal for recognition accuracy)
   • Audio Format: Base64 WAV (required by most APIs)
   • Auto-stop: True
3. Connect the "Start Recording" action to your main button
4. Store the recorded audio in a temporary custom property

Step 16: Build the Results Screen

1. Add new screen "Song Result"
2. Add Image component for album art:
   
   • Source: Current Song → Album Art URL
   • Size: 300x300 pixels
3. Add Text components:
   
   • Song Title (large, bold)
   • Artist Name (medium)
   • Album Name (smaller)
4. Add action buttons:
   
   • "Open in Spotify" → Link to Current Song → Spotify URL
   • "Open in Apple Music" → Link to Current Song → Apple Music URL
   • "Save to My Songs" → Create relationship to user

Setting Up the Music Recognition API

Step 17: Create Custom Action for ACRCloud

1. In Settings, go to Custom Actions
2. Click "+ Add Custom Action"
3. Name it "Identify Song"
4. Set Method: POST
5. Set URL: Your ACRCloud endpoint
6. Add Headers:
   
   • Content-Type: application/json
   • access_key: Your ACRCloud Access Key
   • access_secret: Your ACRCloud Access Secret

Note: You'll need the Professional plan ($65/month or $52/month annually) to access Custom Actions.

Step 18: Configure the API Request Body

1. In the Custom Action body, add:

{

  "audio": "{recorded_audio_base64}",

  "sample_bytes": "{audio_length}",

  "data_type": "audio"

}

2. Map the recorded_audio_base64 parameter to your audio recording property
3. Set expected response format to JSON
4. Map response fields to your Songs collection:
   
   • metadata.music[0].title → Song Title
   • metadata.music[0].artists[0].name → Artist Name
   • metadata.music[0].album.name → Album Name
   • metadata.music[0].external_metadata.spotify.album.images[0].url → Album Art URL

Step 19: Handle API Responses

1. Add a Conditional Action after the API call:
   
   • If Response Status = 200 (Success):
     
     • Create new Song record (if not already in database)
     • Create Search History record (Success = True)
     • Navigate to "Song Result" screen
   • If Response Status ≠ 200 (Failed):
     
     • Create Search History record (Success = False)
     • Navigate to "Not Found" screen

The API typically responds in a few seconds for most songs.

Step 20: Add Loading State

1. On the Home screen, add a Loading Indicator
2. Set visibility:
   
   • Show when: Recording is complete AND API call is in progress
3. Add Text: "Analyzing audio..."
4. This improves user experience during the 3-8 second API latency

Creating Additional Features

Step 21: Build Search History Screen

1. Add new screen "My History"
2. Add List component connected to Search History:
   
   • Filter: User = Logged In User
   • Sort by: Search Date (Newest First)
3. For each list item, display:
   
   • Song → Album Art (small thumbnail)
   • Song → Title
   • Song → Artist
   • Search Date (formatted as "2 days ago")
4. Click action → Navigate to Song Result screen

Step 22: Create "Not Found" Screen

1. Add new screen "Song Not Found"
2. Add sad icon or illustration
3. Add Text: "We couldn't identify that song"
4. Add helpful tips:
   
   • "Try in a quieter environment"
   • "Record at least 10 seconds"
   • "Make sure the music is clearly audible"
5. Add Button: "Try Again" → Navigate back to Home

Step 23: Add Usage Tracking

1. On successful identification, update user's Total Searches:
   
   • Current Total Searches + 1
2. For free users, add a limit check:
   
   • If Total Searches ≥ 50 AND Premium Status = False:
     
     • Show upgrade prompt
     • Navigate to "Upgrade to Premium" screen
3. This monetization strategy helps cover API costs

Step 24: Implement Song Caching

To reduce API calls and costs:

1. Before calling ACRCloud API, check if song exists in database
2. Add a Custom Action to search Songs collection by audio fingerprint
3. If match found in cache:
   
   • Skip API call
   • Load song from database
   • Update Search History
4. If not found:
   
   • Call ACRCloud API
   • Store result in Songs collection for future lookups

Optimizing Performance

Step 25: Compress Audio Files

1. Configure Microphone Recorder to use lower bitrate (64kbps is sufficient)
2. Limit recording duration to 10 seconds (optimal balance between accuracy and file size)
3. This reduces upload time and API response latency

Step 26: Add Error Handling

1. Set API timeout to 10 seconds
2. If timeout occurs:
   
   • Show error message: "Request timed out, please try again"
   • Log failed attempt in Search History
3. Handle common errors:
   
   • No microphone permission → Show permission request
   • No internet connection → Show offline message
   • API rate limit exceeded → Prompt user to wait or upgrade

Step 27: Optimize Database Queries

1. In Search History list, limit to 50 most recent records
2. Use pagination for longer history
3. Index frequently queried fields (User ID, Search Date)
4. This prevents performance issues with large datasets

Testing Your App

Step 28: Create Test Scenarios

1. Test with popular songs (high recognition rate)
2. Test with obscure tracks (check "not found" handling)
3. Test in noisy environments (validate audio quality requirements)
4. Test with very short recordings (< 5 seconds)
5. Test API rate limit behavior

Step 29: Test on Multiple Devices

1. Use Adalo's mobile app for iOS testing
2. Test on Android devices
3. Verify microphone permissions work correctly
4. Check that audio recording functions on all target platforms

Step 30: Monitor API Usage

1. Track your ACRCloud dashboard for usage metrics
2. Set up alerts when approaching request/month limit
3. Monitor API response times to ensure they stay under 5 seconds
4. Review failed recognition rate (should be < 10%)

Publishing Your Music Recognition App

Step 31: Prepare for Launch

1. Upgrade to at least the Starter plan ($45/month or $36/month annually) for native app publishing
2. Obtain Apple Developer account ($99/year) for iOS
3. Pay Google Play registration fee ($25 one-time)
4. Add privacy policy explaining microphone usage and data storage
5. Include terms of service mentioning third-party API usage

Step 32: Configure App Store Settings

1. Create app icons (1024x1024 for iOS, 512x512 for Android)
2. Write app description emphasizing instant song identification
3. Take screenshots on various device sizes
4. Set app category: Music & Audio
5. Choose age rating (typically 4+)

Step 33: Submit to App Stores

1. In Adalo, go to Publish section
2. Select iOS or Android
3. Upload required certificates and provisioning profiles
4. Submit for review
5. Typical approval time: 1-3 days for Google Play, 2-7 days for App Store

Learn more about publishing your app on multiple platforms.

Scaling and Monetization

Step 34: Upgrade API Tier When Needed

When you exceed identifications per month:

1. Upgrade to ACRCloud Starter or Pro tier
2. Track your monthly usage to predict when upgrades are necessary

Step 35: Implement Premium Features

Consider these monetization options:

1. Freemium model: 50 free identifications, then $2.99/month unlimited
2. Ad-supported: Show ads between searches for free users
3. One-time purchase: $4.99 for lifetime unlimited searches
4. Use IAPHUB integration for in-app purchases

Step 36: Add Advanced Features

As your app grows, consider adding:

1. Offline mode: Cache frequently identified songs for offline access
2. Social sharing: Let users share identified songs to social media
3. Playlist creation: Allow users to build playlists from search history
4. Lyrics display: Integrate lyrics API for full song experience
5. Music trends: Show most identified songs this week

Why Adalo Is Perfect for Music Recognition Apps

Adalo's no-code platform empowers makers to bring their music app ideas to life without writing a single line of code. The platform's strength lies in its true drag-and-drop interface and built-in database, making it ideal for building a Shazam clone.

What sets Adalo apart for music recognition projects is the ability to seamlessly integrate external APIs like ACRCloud while managing your entire app data in one place. The platform processes over 20 million data requests every day with 99%+ uptime, ensuring your music identification app remains reliable even as you scale.

The component marketplace provides ready-made solutions like the Microphone Recorder that would take weeks to build from scratch. Combined with responsive design capabilities, your app works beautifully across iOS, Android, and web browsers.

For founders without technical expertise, Adalo represents the fastest path from concept to published music app. The Professional plan includes everything needed for Custom Actions and API integration, while the platform's visual workflow builder makes complex logic accessible to anyone who can make a slide deck.

Frequently Asked Questions

Can Adalo really build an app like Shazam without writing any code?

Yes, but with important caveats. Adalo handles the entire app interface, database, and user management without code. However, the actual music recognition requires integrating an external API like ACRCloud since Adalo doesn't have native audio analysis capabilities. The Custom Actions feature lets you connect to these APIs through a visual interface—no coding required.

How does Adalo handle the audio processing for music recognition?

Adalo doesn't process the audio directly. The Microphone Recorder component captures audio from the device microphone and converts it to base64 format. This audio data is then sent via Custom Actions to a third-party service like ACRCloud, which performs the actual fingerprint matching against their database of millions of tracks. The API returns song metadata (title, artist, album), which Adalo displays in your app interface.

What kind of recognition accuracy can I expect with ACRCloud?

ACRCloud is a market leader in recognition accuracy for mainstream music. Recognition typically completes in 2-5 seconds, though this depends on audio quality, internet connection, and API server load. The service works best with at least 10 seconds of clear audio and recognizes songs even with background noise, though quieter environments yield better results.

Is my Adalo app ready for publication on both iOS and Android app stores?

Yes, but you'll need the Starter plan minimum ($45/month or $36/month annually) for native mobile publishing. Adalo handles the technical app building process, but you must provide Apple Developer credentials ($99/year) and Google Play Developer account ($25 one-time). Your app must also comply with store requirements including privacy policies for microphone access and proper attribution for third-party services like ACRCloud. The approval process typically takes 1-3 days for Google Play and 2-7 days for the App Store.