Build dynamic music portfolio sites with SoundCloud and custom Webflow CMS collections
Blog post from Webflow
Music portfolio sites can achieve scalable and maintainable integration by combining SoundCloud's audio platform with Webflow's CMS collections, allowing artists to manage content and maintain control over presentation and metadata. The architecture involves storing SoundCloud track IDs in Webflow CMS, implementing server-side OAuth 2.1 for secure API access, and syncing audio content programmatically between platforms to generate dynamic portfolio pages with embedded audio players. A Backend for Frontend (BFF) service pattern ensures unidirectional data flow, with a focus on security through server-side credential management and bypassing CORS limitations. However, SoundCloud's lack of native webhooks necessitates polling-based synchronization for real-time updates. The solution requires SoundCloud developer access and a Webflow CMS Plan, with authentication handled through OAuth 2.1 for both platforms. Webflow CMS collections provide a structured foundation, supporting specialized field types and reference fields for organizing content, while advanced implementations can include custom audio player integration via HTML embed codes.