SoundCloud API

Go to developers.soundcloud.com and check the current status of developer API access. If registration is open, sign in and request access for your app, providing a description of your use case (the more specific, the better — 'indie music artist portfolio app for FlutterFlow' is better than 'testing the API'). SoundCloud may take days to weeks to approve access, or access may be currently closed. If you have existing credentials from a previous app, log in to retrieve your client_id and client_secret from your app dashboard. Once you have credentials, test them immediately: make a curl or browser request to https://api.soundcloud.com/oauth2/token with your client_id, client_secret, and grant_type=client_credentials to confirm you can obtain a Bearer token. If this call returns a valid access_token JSON response, you're ready to build. If it returns an error, your credentials may have been revoked or the endpoint has changed — check SoundCloud's current developer documentation for the latest token URL and grant types supported. Store your client_id and client_secret in your password manager; they'll go into Firebase Secrets in the next step, never into FlutterFlow directly.

Your Firebase proxy handles two things: obtaining and caching the SoundCloud Bearer token, and acting as a pass-through that attaches the token to SoundCloud API requests made from FlutterFlow. Set your credentials as Firebase Secrets: firebase functions:secrets:set SOUNDCLOUD_CLIENT_ID and firebase functions:secrets:set SOUNDCLOUD_CLIENT_SECRET. The proxy function (see code) handles the OAuth client credentials token exchange at https://api.soundcloud.com/oauth2/token, caches the returned access_token (SoundCloud's tokens have a limited lifetime — check the expires_in value), and forwards GET requests from FlutterFlow to api.soundcloud.com with the Bearer token attached. For the caching layer: add a second Firebase scheduled Cloud Function (using onSchedule) that runs every 30 minutes, calls your most important SoundCloud endpoints (track listings, follower count, play stats for a specific user), and writes the results to Firestore. Your FlutterFlow app then reads from Firestore rather than calling SoundCloud directly for list displays. This protects against undocumented rate limits and makes your app load instantly from the Firestore cache. Only use the live proxy for real-time actions like streaming a specific track's stream URL. If building and maintaining this proxy is a concern, RapidDev's team builds FlutterFlow integrations with SoundCloud and similar APIs regularly — free scoping call at rapidevelopers.com/contact.

1// Firebase Cloud Function — SoundCloud proxy (Node.js)
2const { onRequest } = require('firebase-functions/v2/https');
3const { onSchedule } = require('firebase-functions/v2/scheduler');
4const { defineSecret } = require('firebase-functions/params');
5const fetch = require('node-fetch');
6const admin = require('firebase-admin');
7
8admin.initializeApp();
9const db = admin.firestore();
10
11const SC_CLIENT_ID = defineSecret('SOUNDCLOUD_CLIENT_ID');
12const SC_CLIENT_SECRET = defineSecret('SOUNDCLOUD_CLIENT_SECRET');
13const SC_USER_ID = '12345678'; // Your SoundCloud user ID — hardcode or make configurable
14
15async function getSoundCloudToken(clientId, clientSecret) {
16  // Check Firestore cache first
17  const tokenDoc = await db.collection('soundcloudCache').doc('token').get();
18  const cached = tokenDoc.data();
19  if (cached && cached.expiresAt > Date.now() + 60000) {
20    return cached.accessToken;
21  }
22  // Fetch new token
23  const res = await fetch('https://api.soundcloud.com/oauth2/token', {
24    method: 'POST',
25    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
26    body: new URLSearchParams({
27      client_id: clientId,
28      client_secret: clientSecret,
29      grant_type: 'client_credentials',
30    }),
31  });
32  const data = await res.json();
33  await db.collection('soundcloudCache').doc('token').set({
34    accessToken: data.access_token,
35    expiresAt: Date.now() + (data.expires_in || 3600) * 1000,
36  });
37  return data.access_token;
38}
39
40// Live proxy endpoint — use for stream URLs, individual track details
41exports.soundcloudProxy = onRequest(
42  { secrets: [SC_CLIENT_ID, SC_CLIENT_SECRET] },
43  async (req, res) => {
44    res.set('Access-Control-Allow-Origin', '*');
45    if (req.method === 'OPTIONS') return res.status(204).send('');
46
47    const token = await getSoundCloudToken(
48      SC_CLIENT_ID.value(),
49      SC_CLIENT_SECRET.value()
50    );
51    const { endpoint } = req.body;
52    const scRes = await fetch(`https://api.soundcloud.com${endpoint}`, {
53      headers: { Authorization: `OAuth ${token}` },
54    });
55    const data = await scRes.json();
56    return res.status(scRes.status).json(data);
57  }
58);
59
60// Scheduled cache refresh — runs every 30 minutes
61exports.refreshSoundCloudCache = onSchedule(
62  { schedule: 'every 30 minutes', secrets: [SC_CLIENT_ID, SC_CLIENT_SECRET] },
63  async () => {
64    const token = await getSoundCloudToken(
65      SC_CLIENT_ID.value(),
66      SC_CLIENT_SECRET.value()
67    );
68    const headers = { Authorization: `OAuth ${token}` };
69
70    // Cache tracks
71    const tracksRes = await fetch(
72      `https://api.soundcloud.com/users/${SC_USER_ID}/tracks?limit=50`,
73      { headers }
74    );
75    const tracks = await tracksRes.json();
76    await db.collection('soundcloudCache').doc('tracks').set({ data: tracks, updatedAt: Date.now() });
77
78    // Cache user profile (followers, play counts)
79    const userRes = await fetch(
80      `https://api.soundcloud.com/users/${SC_USER_ID}`,
81      { headers }
82    );
83    const user = await userRes.json();
84    await db.collection('soundcloudCache').doc('profile').set({ data: user, updatedAt: Date.now() });
85  }
86);

Rather than calling SoundCloud live from FlutterFlow for list displays, your app reads cached data from Firestore — which loads instantly and doesn't risk rate limits. In FlutterFlow, go to Settings & Integrations → Firebase and connect your Firebase project (add the GoogleService-Info.plist for iOS and google-services.json for Android via the Firebase panel). In Firestore, your data structure from the scheduled cache function is: soundcloudCache/tracks (document with a 'data' array of track objects) and soundcloudCache/profile (document with the user profile object). In FlutterFlow, create two Data Types: 'SCTrack' with fields id (Integer), title (String), artworkUrl (String), duration (Integer, milliseconds), playbackCount (Integer), streamUrl (String); and 'SCProfile' with fields username (String), followersCount (Integer), trackCount (Integer). On your track list screen, add a StreamBuilder-style query via FlutterFlow's Firestore Query — select the soundcloudCache collection, document tracks, and map the data array to the SCTrack Data Type using JSON paths. Add a ListView bound to the SCTrack list. For each item, show artwork (Network Image bound to artworkUrl), title, and play count. Add a refresh button that calls the soundcloudProxy API Call with endpoint /users/{userId}/tracks as a manual refresh option alongside the scheduled auto-refresh.

1{
2  "FlutterFlow Firestore Config": {
3    "Collection": "soundcloudCache",
4    "Documents": [
5      {
6        "ID": "tracks",
7        "Fields": {
8          "data": "Array of SCTrack objects",
9          "updatedAt": "Timestamp"
10        }
11      },
12      {
13        "ID": "profile",
14        "Fields": {
15          "data": "SCProfile object",
16          "updatedAt": "Timestamp"
17        }
18      }
19    ],
20    "SCTrack Data Type": {
21      "id": "Integer",
22      "title": "String",
23      "artworkUrl": "String (artwork_url)",
24      "playbackCount": "Integer (playback_count)",
25      "duration": "Integer (ms)",
26      "streamUrl": "String (stream_url)"
27    }
28  }
29}

While most data comes from the Firestore cache, some actions require live SoundCloud API calls — primarily fetching the stream URL for a specific track (which may be time-limited or user-specific) and any real-time lookups. Set these up as FlutterFlow API Calls targeting your Firebase proxy. In FlutterFlow, click API Calls in the left nav → + Add → Create API Group. Name it 'SoundCloudProxy' and set the Base URL to your Firebase Cloud Function URL (https://us-central1-your-project.cloudfunctions.net/soundcloudProxy). Add two API Calls: 1. 'Get Track Stream URL' — POST with JSON body containing endpoint '/tracks/{trackId}/streams' (or the relevant stream endpoint for your API access level). Parse the response for the http_mp3_128_url field (the public 128kbps MP3 stream URL). Map this to a String field in your SCTrack Data Type. 2. 'Get Track Detail' — POST with endpoint '/tracks/{trackId}'. Parse the full track response including waveform_url, description, and current play_count. Use this for the track detail screen where you want fresh play count data. In the Response & Test tab, paste sample SoundCloud JSON responses to auto-generate the JSON paths. SoundCloud stream URLs require the access token appended as a query parameter in some API access levels — your proxy should handle this by appending the token before returning the URL.

1{
2  "Group Name": "SoundCloudProxy",
3  "Base URL": "https://us-central1-your-project.cloudfunctions.net/soundcloudProxy",
4  "Calls": [
5    {
6      "Name": "Get Stream URL",
7      "Method": "POST",
8      "Body": {
9        "endpoint": "/tracks/[variable:trackId]/streams"
10      },
11      "JSON Paths": {
12        "streamUrl": "$.http_mp3_128_url"
13      }
14    },
15    {
16      "Name": "Get Track Detail",
17      "Method": "POST",
18      "Body": {
19        "endpoint": "/tracks/[variable:trackId]"
20      },
21      "JSON Paths": {
22        "title": "$.title",
23        "playbackCount": "$.playback_count",
24        "description": "$.description",
25        "duration": "$.duration"
26      }
27    }
28  ]
29}

With the stream URL fetched from the proxy, play the audio using a Custom Action built on the just_audio pub.dev package. In FlutterFlow, go to Custom Code → + Add → Action. Name it 'PlaySoundCloudTrack'. Add just_audio as a dependency in the Dependencies field. The action takes a String parameter streamUrl. It manages a singleton AudioPlayer instance to avoid creating multiple players when the user taps through multiple tracks. When called, the action stops any currently playing track, loads the new stream URL, and starts playback. Add a companion action 'StopSoundCloudTrack' that simply calls player.stop() for use on back navigation or when the user manually stops playback. On each track card's play button, wire the On Tap action flow: first call 'Get Stream URL' from the SoundCloudProxy API group passing the track's ID, then pass the returned streamUrl to 'PlaySoundCloudTrack'. Manage a Page State variable currentlyPlayingId to highlight the active track and show a pause icon. Note: Custom Actions require testing on a real device or in FlutterFlow's Run mode — they do not execute in the web-based Test Mode canvas. Add a kIsWeb guard in the Dart code if deploying to web as well as mobile, since audio streaming behavior differs between the Flutter web renderer and native mobile.

1import 'package:just_audio/just_audio.dart';
2import 'package:flutter/foundation.dart' show kIsWeb;
3
4AudioPlayer? _scPlayer;
5
6Future<void> playSoundCloudTrack(String streamUrl) async {
7  if (streamUrl.isEmpty) return;
8
9  _scPlayer ??= AudioPlayer();
10
11  try {
12    await _scPlayer!.stop();
13    await _scPlayer!.setUrl(streamUrl);
14    await _scPlayer!.play();
15  } catch (e) {
16    debugPrint('SoundCloud playback error: $e');
17  }
18}
19
20Future<void> stopSoundCloudTrack() async {
21  await _scPlayer?.stop();
22}
23
24bool isPlaying() {
25  return _scPlayer?.playing ?? false;
26}