SoundCloud

Webflow's Video element plays YouTube, Vimeo, and DailyMotion links, and there it stops. Nothing in the element library streams audio, so a musician, podcaster, or label building in Webflow has no native way to put a playable track on the page. The usual fallback sends listeners off to another site, and they rarely come back to finish reading.

SoundCloud closes that gap with an embedded iframe player. Drop the player on a Webflow page and visitors listen to a track or a whole playlist without leaving the site. A JavaScript Widget API sits on top of that iframe for teams who want their own play button rather than SoundCloud's, and automation platforms or a scheduled server job can push new releases into the CMS so the site keeps up with the catalog.

This lands hardest for artists publishing a release archive, podcasters who need every episode page to carry its own player, and labels running multi-artist catalogs. DJs and promoters use the same setup to keep booking pages current, and agencies use it to hand clients a music site they can update themselves.

How to integrate SoundCloud with Webflow

What is SoundCloud? SoundCloud is a music streaming and sharing platform where artists upload and distribute audio. Uploads accept files up to 4 GB and tracks up to 24 hours long, and any public track can expose an embeddable player that you toggle from the track's Permissions tab. On the developer side it publishes an oEmbed endpoint that returns ready-made embed HTML, a JavaScript Widget API for controlling an embedded player, and a REST API for tracks and playlists.

Teams pair the two platforms so a visitor can press play without a redirect. The Femtastic Podcast stores a SoundCloud track ID against each episode in the Webflow CMS and renders the matching player on every episode page. Studio-T, a truck with a sound studio built into it, runs a custom SoundCloud player wired to the CMS to announce and archive its shows.

SoundCloud publishes no Webflow app, so the integration runs through three routes:

• The Code Embed element renders SoundCloud's iframe player on static pages, in rich text, or in CMS templates.
• Automation platforms such as Zapier, Make, and IFTTT poll SoundCloud and write new tracks into CMS items.
• The Webflow and SoundCloud APIs give you full control over syncing and player behavior, at the cost of server-side development and a paid SoundCloud subscription.

Most sites combine the first two and reach for the third only when the catalog or the player design outgrows them.

Embed SoundCloud players with Code Embed elements

The Code Embed element takes SoundCloud's iframe code and renders the player on your published site, which is the fastest route and the one most sites never need to go beyond. It accepts HTML, CSS in <style> tags, and JavaScript in <script> tags, up to 50,000 characters. Webflow gates the element behind a Core, Growth, Agency, or Freelancer Workspace, or an active Site plan. Free Starter sites cannot use it, though the rich text method below works on any plan.

Paste a track's embed code

Use this for a single track or playlist on a static page. SoundCloud writes the code and Webflow renders it, with no credentials involved at any point.

To embed a track:

1. On SoundCloud, click Share below the track's waveform and open the Embed tab.
2. Pick a player. The classic player is a compact bar, and the visual player shows large artwork behind the waveform in 300 px, 450 px, and 600 px heights.
3. Copy the markup from Code & preview.
4. In Webflow, open the Add panel > Components, drop a Code Embed element on the page, paste the code, then click Save & close.

The canvas shows a placeholder rather than the player, because embeds carrying scripts only render on preview, publish, or export. Artist Pro subscribers get two extra checkboxes on that dialog, Show recommendations and Show SoundCloud overlays, which strip the promotional layer off the player.

Paste a URL into a rich text element

Rich text elements resolve a bare SoundCloud URL into a player on their own. SoundCloud is named as a supported rich media type in Webflow's rich text overview, alongside Spotify, Google Maps, and Codepen. No embed code changes hands and no plan gate applies.

To add a player this way:

1. Copy the track's URL from SoundCloud.
2. Paste that URL on its own line inside the rich text element.

The tradeoff is control: you get SoundCloud's default player with no parameters, and it only works inside rich text content, never as a standalone element on the canvas.

Drive embeds from CMS fields

Sites with a real catalog store one track ID per CMS item instead of hard-coding an embed per page. The player markup lives once on the Collection template and the ID swaps per item, so adding a release becomes a content task rather than a design task.

To set it up:

1. Copy the track ID out of the SoundCloud embed code. It is the number after /tracks/ in the iframe's src.
2. Add a plain text field, for example SoundCloud Track ID, to your Collection and fill it per item.
3. On the Collection template page, add a Code Embed element and paste the full iframe.
4. Highlight the track ID, click Add field, pick the Track ID field, then click Save & close.

Every Collection page now resolves to its own track. The same field reference works inside a Collection list on a static page, which Webflow documents under dynamic data in embeds, and it is the pattern the automation platforms below feed into.

Connect with Zapier, Make, or IFTTT

SoundCloud fires no webhooks, so nothing on its side pushes a new upload to your site. Every automation platform works around that the same way, by polling SoundCloud on a timer and writing a CMS item when it finds something new. They move data only, so pair one with the CMS-driven embed above or your new items will arrive without a player.

Here is what each platform gives you, and the constraint all three share:

• Zapier: the Webflow and SoundCloud pairing exposes New Track I Like and New Post by User I Follow as triggers, feeding Create Item or Create Live Item on the Webflow side.
• Make: the SoundCloud app carries 41 modules against 40 on its Webflow app, including Create an Item, which is the widest coverage of the three for multi-step scenarios.
• IFTTT: SoundCloud triggers for any new public track or a new playlist connect to Webflow's Create collection item and Create live collection item actions, which suits one-step applets.
• Polling latency: IFTTT states its Webflow trigger checks run every five minutes on Pro and Pro Plus and hourly on Free, and the other platforms schedule on similar tiers.

None of this is real-time, and no amount of configuration makes it real-time, because the delay comes from SoundCloud having nothing to push. Build the copy on your release page to survive a gap of minutes or hours between an upload going live and the site catching up.

Build with the Webflow and SoundCloud APIs

The most useful thing to know before you plan an API build is that SoundCloud's two developer surfaces have completely different entry costs. The Widget API and oEmbed are open to anyone with an embedded player and need no credentials at all. The REST API needs a registered application, and registering one requires a paid SoundCloud subscription.

Registration itself is open and self-serve: SoundCloud's API key page walks you through creating an app in the browser or from a command line tool, and it returns a Client ID and Client Secret immediately. The gate is the account, not a queue. You need an Artist Pro subscription on the SoundCloud account before the form will issue credentials, and every client is treated as confidential, so the secret has to live in server-side code. Webflow Cloud runs Next.js and Astro apps deployed from GitHub if you would rather not stand up your own host.

These are the surfaces a custom build calls:

• SoundCloud Widget API: the Widget API controls an embedded player from the parent page in client-side JavaScript, with no key and no subscription.
• SoundCloud oEmbed: the oEmbed endpoint at https://soundcloud.com/oembed returns finished embed HTML for any track, set, or user URL without authentication.
• SoundCloud REST API: the API guide covers tracks, playlists, and user data at https://api.soundcloud.com, authenticated with OAuth 2.1 and PKCE.
• Webflow Data API: the CMS endpoints create, update, and publish Collection items, which is where every synced track lands.
• Webflow webhooks: Webflow's webhooks fire on events such as collection_item_published and site_publish for anything downstream.

Read that list as two tiers. The first two rows cost nothing and cover most player work, and only the third obliges you to pay SoundCloud before writing a line of code.

Control embedded players with the Widget API

The Widget API is the part of SoundCloud most Webflow builds should reach for first, because it runs entirely in the browser and asks for no key, no server, and no subscription. It gives JavaScript control over any player already embedded on the page, which is how custom play buttons, seek bars, and multi-track sequencing get built.

To wire it up:

1. Load https://w.soundcloud.com/player/api.js in a Code Embed element, or site-wide through head and body code under Site settings > Custom code.
2. Add the SoundCloud iframe and give it an id. SoundCloud's own documentation uses track 293 as its example track, so the markup looks like this:

   <script src="https://w.soundcloud.com/player/api.js"></script>
   
   <iframe id="soundcloud-player"
     width="100%" height="166" scrolling="no"
     frameborder="no" allow="autoplay"
     src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/293">
   </iframe>

3. Call SC.Widget('soundcloud-player') to get the widget object. The entry point accepts either the iframe element or its id, so the string here has to match the id on the iframe above.
4. Drive it with play(), pause(), toggle(), seekTo(milliseconds), setVolume(volume), next(), and prev(), and listen with bind(SC.Widget.Events.PLAY, handler).

Two behaviors catch people out. Every getter, including getDuration and getPosition, returns its value through a callback rather than a return statement, because parent and iframe talk over window.postMessage. And player options such as auto_play, color, show_artwork, and single_active go on the player URL as query parameters, so they apply before any script runs. auto_play defaults to false, and setting it true is a request rather than a guarantee: the iframe needs the allow="autoplay" permission attribute that SoundCloud's own embed markup includes, and browsers still apply their own autoplay policies on top of it.

Sync new SoundCloud tracks into the CMS

A scheduled server job replaces the automation platforms above when you need custom field mapping or tighter control over timing. The shape is the same, because SoundCloud still has nothing to push: you poll, you diff, you write.

To implement the sync:

1. Authenticate with OAuth 2.1. Client Credentials covers public tracks, and the token request must use HTTP Basic authentication, since credentials in the request body are not supported.
2. Poll GET https://api.soundcloud.com/users/{user_urn}/tracks on a schedule, appending linked_partitioning=true and following next_href for pagination, up to 200 items per page.
3. Map title, track ID, artwork URL, and duration onto Collection fields, then write with POST https://api.webflow.com/v2/collections/{collection_id}/items/live. For a backfill, POST /v2/collections/{collection_id}/items/bulk takes up to 100 staged items per request.
4. Publish the site when the batch is done with POST https://api.webflow.com/v2/sites/{site_id}/publish.

Budget for the token economics before you pick a polling interval. Access tokens last about an hour and refresh tokens are single-use, so persist the newest one after every exchange, and SoundCloud caps Client Credentials exchanges at 50 per 12 hours per application. Its published rate limits also hold play stream requests to 15,000 per 24 hour window and answer an overrun with HTTP 429. Separately, the API Terms of Use require you to credit both the uploader and SoundCloud and to link back to the track's permalink_url, and they prohibit downloading or storing the audio itself.

What an embedded player costs you

An embed is somebody else's page running inside yours, and that has consequences worth deciding on deliberately rather than discovering after launch. We would still ship the player on most music sites, but not without answering these first.

• Page weight: each player pulls a full third-party document, its scripts, and its artwork from w.soundcloud.com, so a page listing twenty tracks is loading twenty of them.
• Consent and privacy: the iframe sets SoundCloud's own cookies and runs SoundCloud's own scripts, which puts it inside the scope of your consent banner rather than outside it.
• Indexing: audio inside the iframe is not page content, so search engines and AI answer engines see nothing of a track unless you also publish the title, description, and transcript as real text around the player.
• Link fragility: SoundCloud warns that changing your profile URL leaves existing embeds playing while the click-through lands on an empty page, and unpublishing an embed code does not disable players already deployed.

The practical answer to most of these is the same one: lazy-load players below the fold, keep the track metadata in CMS fields as text next to the embed, and treat the iframe as a playback surface rather than as your content.

What you can build with the SoundCloud Webflow integration

Putting the two together lets you publish playable audio anywhere on the site without handing the listener off to another platform, and the CMS turns that from a per-page job into a content field.

Four patterns cover most of what teams ship:

• Podcast sites with episode archives: Femtastic keeps a SoundCloud track ID per episode in the CMS, so every episode page renders its own player beside the show notes.
• Artist and promoter portfolios: Primo London, a house music promoter, embeds tracks from its featured artists so a visitor can press play on the page they landed on.
• CMS-connected event archives: Studio-T, a truck with a sound studio and DJ booth inside it, runs a custom player wired to the CMS that announces and then archives each show.
• Auto-updating release feeds: an applet fires on any new public track and creates a live Collection item, and a CMS-connected Code Embed on that template ships the player with it.

For a step by step on wiring a third-party media feed into Webflow pages, follow our walkthrough on embedding an Instagram feed, which uses the same Code Embed and CMS pattern described here. And if you are building the Collection structure the sync writes into, connect your AI tools to the Webflow MCP server and have them create the fields, audit the items, and publish the site for you.