How to Set Up a Music Recognition Feature in FlutterFlow

Create a Firestore collection called recognized_tracks with fields: userId (String), title (String), artist (String), album (String), albumArtUrl (String), spotifyUrl (String), recognizedAt (Timestamp). Next, sign up at audd.io and copy your API token. In your Firebase project, store the AudD token as an environment variable for Cloud Functions using firebase functions:config:set audd.token='your_token_here'. Never put the API key in FlutterFlow client code — it must stay server-side in the Cloud Function. Create a composite index on recognized_tracks for userId (ascending) and recognizedAt (descending) to support the history query.

Add the record package to your FlutterFlow project dependencies (record: ^5.0.0 in Custom Code settings). Create a Custom Action called recordAudioClip that returns a String (the base64-encoded audio data). Inside the action, initialize a Record instance, check and request microphone permission using Record.hasPermission, then start recording with await record.start(encoder: AudioEncoder.aacLc, samplingRate: 44100). Use a Future.delayed of 5 seconds, then stop the recording with await record.stop(). Read the recorded file bytes and convert to base64 with base64Encode. Return the base64 string. On the main recognition page, wire this Custom Action to the Recognize button's On Tap Action Flow. Store the returned base64 string in a Page State variable called audioData.

1// Custom Action: recordAudioClip
2// Return Type: String (base64-encoded audio)
3
4import 'dart:convert';
5import 'dart:io';
6import 'package:record/record.dart';
7
8Future<String> recordAudioClip() async {
9  final record = AudioRecorder();
10  
11  if (!await record.hasPermission()) {
12    throw Exception('Microphone permission denied');
13  }
14  
15  final dir = await getTemporaryDirectory();
16  final path = '${dir.path}/recognition_clip.m4a';
17  
18  await record.start(
19    const RecordConfig(
20      encoder: AudioEncoder.aacLc,
21      sampleRate: 44100,
22      bitRate: 128000,
23    ),
24    path: path,
25  );
26  
27  await Future.delayed(const Duration(seconds: 5));
28  final result = await record.stop();
29  
30  if (result == null) return '';
31  final bytes = await File(result).readAsBytes();
32  return base64Encode(bytes);
33}

Create a Cloud Function called recognizeSong that accepts an HTTP POST request with the base64 audio data in the request body. The function decodes the base64 string back to bytes, sends a multipart POST request to the AudD API endpoint (https://api.audd.io/) with the audio file and your API token. Parse the JSON response to extract the song title, artist, album, release date, and any available Spotify or Apple Music links. Return the parsed result as a JSON response to the FlutterFlow client. Handle error cases: if the API returns no match, return a structured response with a recognized field set to false. If the API returns an error (invalid token, rate limit), return an appropriate error message. In FlutterFlow, create an API Call definition pointing to your Cloud Function URL, with the request body containing the audioData base64 string.

1// Cloud Function: recognizeSong
2const functions = require('firebase-functions');
3const fetch = require('node-fetch');
4const FormData = require('form-data');
5
6exports.recognizeSong = functions.https.onCall(async (data) => {
7  const { audioBase64 } = data;
8  const token = functions.config().audd.token;
9  const audioBuffer = Buffer.from(audioBase64, 'base64');
10
11  const form = new FormData();
12  form.append('api_token', token);
13  form.append('file', audioBuffer, {
14    filename: 'clip.m4a',
15    contentType: 'audio/mp4',
16  });
17  form.append('return', 'spotify');
18
19  const response = await fetch('https://api.audd.io/', {
20    method: 'POST',
21    body: form,
22  });
23  const result = await response.json();
24
25  if (result.status === 'success' && result.result) {
26    return {
27      recognized: true,
28      title: result.result.title,
29      artist: result.result.artist,
30      album: result.result.album,
31      albumArtUrl: result.result.spotify?.album?.images?.[0]?.url || '',
32      spotifyUrl: result.result.spotify?.external_urls?.spotify || '',
33    };
34  }
35  return { recognized: false };
36});

Create a page called MusicRecognition. Center the layout with a Column, mainAxisAlignment center. First child: a Lottie Animation widget loaded from a pulse/ripple animation JSON file (upload to your FlutterFlow assets or use a URL from lottiefiles.com). Set the Lottie widget size to 200x200 and wrap it in a Conditional Visibility container that shows only when a Page State variable isListening is true. Below the Lottie, add a large circular Container (width 120, height 120, borderRadius 60) with a solid primary color background, containing an Icon (Icons.mic, size 48, white). On Tap Action Flow: set isListening to true, call the recordAudioClip Custom Action, store result in audioData Page State, call the recognizeSong API with audioData, store the API response in Page State variables (title, artist, albumArtUrl, spotifyUrl, recognized), set isListening to false. Below the button, add a result card wrapped in Conditional Visibility (show when recognized is true): a Container with rounded corners holding a Row with an Image widget (Network Image bound to albumArtUrl, 80x80, borderRadius 8) and a Column with title in titleMedium bold, artist in bodyMedium secondary, and album in bodySmall. Below the card, add a Button labeled 'Listen on Spotify' that triggers a Launch URL action with the spotifyUrl. Add another Conditional Visibility container for the not-recognized state showing 'Song not recognized — try again' with a Retry button.

After a successful recognition (recognized is true), add an action in the Action Flow to create a Firestore document in recognized_tracks with userId set to currentUserUid, title, artist, album, albumArtUrl, spotifyUrl from the Page State variables, and recognizedAt set to the server timestamp. Create a second page called ListeningHistory. Add a Backend Query on the page: query recognized_tracks where userId equals currentUserUid, ordered by recognizedAt descending. Display results in a ListView. Each list item is a Row containing an Image (albumArtUrl, 56x56, rounded), a Column with title in titleSmall and artist in bodySmall, and a trailing Text showing the relative time (use a Custom Function timeAgo that returns strings like '2 min ago', '3 hours ago', 'Yesterday'). On tap of any list item, trigger a Launch URL action with the spotifyUrl. Add a BottomNavigationBar or AppBar action to switch between the MusicRecognition and ListeningHistory pages. Add an empty state widget for users with no history yet: a centered Column with an Icon (Icons.music_off), a Text saying 'No songs recognized yet', and a Button navigating to the recognition page.

1// Custom Function: timeAgo
2// Return Type: String
3// Parameters: timestamp (DateTime)
4
5String timeAgo(DateTime timestamp) {
6  final now = DateTime.now();
7  final diff = now.difference(timestamp);
8  if (diff.inMinutes < 1) return 'Just now';
9  if (diff.inMinutes < 60) return '${diff.inMinutes} min ago';
10  if (diff.inHours < 24) return '${diff.inHours} hours ago';
11  if (diff.inDays < 7) return '${diff.inDays} days ago';
12  return '${(diff.inDays / 7).floor()} weeks ago';
13}